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.