AJAX Refresh Graph without Redraw?

I’m using flot library to draw graphs in my Yii application. The graph is very similar to the one shown in this example http://people.iola.dk/olau/flot/examples/pie.html. I’m also using jQuery.ajax() along with setInterval to reload/refresh this graph on the page with the updated content. Given below is the jQuery AJAX code that I’m using,




<script type="text/javascript">

jQuery(function($) {

	function updateData()

	{

		var html = $.ajax({

			url: "<?php echo $this->createUrl('report/pie',array( 'campaignId'=>CHtml::encode($campaign->id))); ?>",

			success: function(data) {

				$('#pieChart').html(data);

			}

		});

	}

	

	updateData();


	setInterval(function(){

		updateData()

	}, 10000);

});

</script>



So the above code queries a URL through AJAX and gets back latest HTML/JS content of the pie graph in return. This content is then appended to the #pieChart div. This happens every 10 seconds.

The problem is, every 10 seconds, the pie graph on the page disappears and then reappears. This is obviously not a good practice. Only the areas in the pie graph should shift, the graph should not be redrawn completely. On a slower connection, the graph disappears for a long time, which looks very bad. Is it possible to achieve this? I’m also using a line graph on the page in a very similar manner and it also disappears before reappearing with latest content. I want the x-axis and y-axis of the line graph to remain the same way and just change the orientation of lines on it every 10 seconds.

issue resolved!

solution: one should not do


<?php Yii::app()->clientScript->registerCoreScript("jquery"); ?>

in the php page which is queried by jQuery.ajax(). This makes the graph disappear. All the script files should be included in the page where the jQuery.ajax() code is present.

i don’t know if anyone understands what i’m talking about…! :P