javascript - Highchart: How could I set animation duration in case of adding data points to bar/column chart? -
here code in concern: http://jsfiddle.net/e0qxfltt/14/
$(function() { var chartdata = [50, 30, 4, 70, -10, -20, 20, 30]; var index = 1; var chart1, chart2; $('#b').click(function(){ var buttonb = document.getelementbyid('b'); buttonb.disabled = true; if(index < chartdata.length){ chart1.series[0].remove(); chart1.addseries({data: [chartdata[index - 1]]}); settimeout(function(){chart1.series[0].setdata([]);}, 1000); settimeout(function(){ chart2.series[0].addpoint([index, chartdata[index - 1]]);; index++; }, 1000); } settimeout(function(){buttonb.disabled = false;}, 3000); }) chart1 = new highcharts.chart({ chart: { renderto: 'container', type: 'column' }, title: { text: '' }, xaxis: { title: { text: '' }, gridlinewidth: 1, tickpixelinterval: 80, categories: [''], min:0, max:0 }, yaxis: { title: { text: '' }, min:-100, max:100 }, plotoptions: { series: { animation: { duration: 1000 } } }, credits: { enabled: false }, tooltip: { formatter: function () { return highcharts.numberformat(this.y, 2) + '%'; } }, legend: { enabled: false }, exporting: { enabled: false }, series: [{ pointplacement: 'on', data: [], pointwidth: 28 }] }); chart2 = new highcharts.chart({ chart: { renderto: 'container1', type: 'column' }, title: { text: '' }, xaxis: { title: { text: '' }, gridlinewidth: 1, tickpixelinterval: 40, min:0, max:10 }, yaxis: { title: { text: '' }, min:-100, max:100 }, plotoptions: { series: { animation: { duration: 1000 } } }, credits: { enabled: false }, tooltip: { formatter: function () { return highcharts.numberformat(this.y, 2) + '%'; } }, legend: { enabled: false }, exporting: { enabled: false }, series: [{ pointplacement: 'on', data: [] }] }); });
the bar charts not animating @ all. (i color.) tried addseries. however, use chart on left, chart on right, last drawn bar should newly drawn/animated.
Comments
Post a Comment