samedi 25 avril 2015

jqplot animate pie chart and donut chart


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://ift.tt/1IVwUXl

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://ift.tt/1HCD29O

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


Aucun commentaire:

Enregistrer un commentaire