jqplot animate pie chart and donut chart

Question

Can anyone tell me if the animate and animate replot options in jqplot work with the pie chart and donut renderer? Doesn't look like a compatible option with this rendered but can't find any specific documentation.

What I need, ideally, is for the pie chart to animate on replot with new data. If the animate options are not working, it could be done by loading in the new data sequentially, rather than all at once, in a similar way to this thread:

JQPlot auto refresh chart with dynamic ajax data

Problem I have is that this example adds to the existing data, rather than replacing it and I wasn't able to get it to work.

This is where I got to using that example:

var storedData = [3, 7];

var plot1;
renderGraph();

$('.change1').click( function(){
doUpdate();
});
$('.change2').click( function(){
doUpdate2();
});

function renderGraph() {
if (plot1) {
    plot1.destroy();
}

var plot1 = $.jqplot('chart1', [storedData], {seriesDefaults: {
  renderer:$.jqplot.DonutRenderer,
  rendererOptions:{
  sliceMargin: 3,
  startAngle: -90,
  showDataLabels: true,
  dataLabels: 'value'
  }
}
});
}

var newData = [9, 1, 4, 6, 8, 2, 5];
function doUpdate() {
if (newData.length) {
    var val = newData.shift();

        var newVal = new Number(val); /* update storedData array*/
        storedData.push(newVal);
        renderGraph();

        setTimeout(doUpdate, 1)

} else {
    log("All Done")
}
}
function log(msg) {
$('body').append('<div>'+msg+'</div>')
}

http://jsfiddle.net/p9SbP/106/

I currently have this to load new data and replace the old data. As you can see, the animate options stated are not affecting the replot:

var storedData = [3, 7];
var newData = [9, 1, 4, 6, 8, 2, 5];

$('.change1').click( function(){
plot1.replot({data: [newData], resetAxes: true,});
});

var plot1 = $.jqplot('chart1', [storedData], {animate: true, animateReplot: true, seriesDefaults: {

  renderer:$.jqplot.DonutRenderer,

  rendererOptions:{
   animation: {
                show: true
            },

  sliceMargin: 3,
  startAngle: -90,
  showDataLabels: true,
  dataLabels: 'value'
  }
}
});

http://jsfiddle.net/p9SbP/107/

I'm thinking there must be a way to combine the two so that the replaced data loads in an animated/delayed way, and to be able to control the timing.

Any help is much appreciated.

Many thanks

Richard

score 1 · Accepted Answer · answered Apr 25 '15 at 17:19

1

Just clear the original data you have before adding the new data. E.g. like so:

var wasCleared = false;
function doUpdate() {
    // Empty existing data
    if (!wasCleared) {
        storedData.length = 0;
        wasCleared = true;
    }
...

Here's your first fiddle updated: http://jsfiddle.net/dekkard/6x82om3x/

answered Apr 25 '15 at 17:19

dekkard

6,121
1
16
26

Hi, thanks for your reply, seems what I am looking for I shall try it out now. I should have mentioned that I need to alter some default options as well with the new data, which is simple to do with .jqreplot but not sure where this can be entered with this example. any ideas? – Richard Harris Apr 25 '15 at 22:06
Your ```doUpdate()``` is calling ```renderGraph()```. Just create a new options object (e.g. ```{animate: true, animateReplot: true}```) and pass it to ```renderGraph()``` which in turn should pass it to ```$.jqplot()``` (you'll have to either merge with or replace its original options). – dekkard Apr 25 '15 at 22:21

jqplot animate pie chart and donut chart

1 Answers1