javascript - Highchart: why can I not set the duration in this case? -
relevant code here: http://jsfiddle.net/e0qxfltt/5/
$(function drawcharts() { var chartdata = [100,120,120,140,110,110]; var index = 1; $('#b').click(function(){ var buttonb = document.getelementbyid('b'); buttonb.disabled = true; if(index < chartdata.length){ var x = index, // current time y = chartdata[index]; $('#container').highcharts().series[0].setdata([chartdata[index - 1], chartdata[index]]); settimeout(function(){$('#container').highcharts().series[0].setdata([]);}, 1000); settimeout(function(){ if(index === 1){ $('#container1').highcharts().series[0].addpoint([0,chartdata[0]]); } $('#container1').highcharts().series[0].addpoint([x,y]); index++; }, 1000); } settimeout(function(){buttonb.disabled = false;}, 3000); }) $(document).ready(function () { var chart1 = new highcharts.chart({ chart: { renderto: 'container1', type: 'line', animation: highcharts.svg, // don't animate in old ie marginright: 10, events: { load: function () { series = this.series[0]; }, } }, title: { text: '' }, xaxis: { title: { text: '' }, gridlinewidth: 1, startontick: true, tickpixelinterval: 40, min:0, max:10 }, yaxis: { title: { text: '' }, min:0, max:200 }, plotoptions: { line: { marker: { enabled: false } }, series: { animation: { duration: 1000 } } }, tooltip: { formatter: function () { return highcharts.numberformat(this.y, 2); } }, legend: { enabled: false }, exporting: { enabled: false }, credits:{ enabled:false }, series: [{ name: '', data: [] }] }); var chart2 = new highcharts.chart({ chart: { renderto: 'container', type: 'line', animation: highcharts.svg, // don't animate in old ie marginright: 10, events: { load: function () { series = this.series[0]; }, } }, title: { text: '' }, xaxis: { title: { text: '' }, gridlinewidth: 1, startontick: true, tickpixelinterval: 80, categories: ['a', 'b'], min: 0, max: 1 }, yaxis: { title: { text: '' }, min:0, max:200 }, plotoptions: { line: { marker: { enabled: false } }, series: { animation: { duration: 2000 } } }, tooltip: { formatter: function () { return highcharts.numberformat(this.y, 2); } }, legend: { enabled: false }, exporting: { enabled: false }, credits:{ enabled:false }, series: [{ name: '', data: [] }] }); });
});
i chart on left animate on duration of 2 seconds, , used code purpose:
plotoptions: { series: { animation: { duration: 2000 } } }
however, chart seems animate on instant despite setting.
could due settimeout functions? if so, there way around that?
Comments
Post a Comment