Aqqqq Aqqqq - 3 months ago 16
jQuery Question

Highchart: How to prevent the "flashback" in animation?

This is the code in concern: http://jsfiddle.net/z24ysp8m/18/

$(function() {
var chartData = [100, 150, 170, 100.823, 100.823, 94.3796, 96.7395, 98.6239, 102.914, 100.331, 114.383, 110.577, 120.006, 123.887,
120, 160, 50, 60, 70, 100, 120, 160, 50, 60, 70, 100];
var timeStamps = [];
var dataToDisplay = []
var index = 1;
var chart1, chart2;
$('#b').click(function(){
timeStamps.push(new Date());
var buttonB = document.getElementById('b');
buttonB.disabled = true;
if(index <= chartData.length){
chart1.xAxis[0].setExtremes(index-1,index);
chart1.series[0].show();
setTimeout(function(){
if(index == 1){
chart1.series[0].setData([chartData[0]]);
}else{
chart1.series[0].setData(dataToDisplay);
}
chart1.series[0].addPoint(chartData[index]);
}, 1000);

setTimeout(function(){chart1.series[0].hide();}, 2000);
/* A new data point is added to the chart on the right
(two new data points when the index is 1). */
setTimeout(function(){
if(index === 1){
dataToDisplay.push(chartData[0]);
dataToDisplay.push(chartData[1]);
}else{
dataToDisplay.push(chartData[index]);
}
console.log(dataToDisplay);
chart2.series[0].setData(dataToDisplay);
index++;
}, 2000);

}

if(index < chartData.length - 1){
setTimeout(function(){buttonB.disabled = false;}, 2000);
}else{
setTimeout(function(){buttonB.style.visibility="hidden";}, 2000);
}
if(index == chartData.length - 2){
setTimeout(function(){document.getElementById('b').innerHTML = 'Last Period';}, 2000);
}
console.log(timeStamps);
})
Highcharts.setOptions({
lang: {
decimalPoint: ','
},
});
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
width: 170,
marginLeft: 74,
marginRight: 16,
marginBottom: 60,
events: {
load: function() {
this.xAxis[0].setExtremes(0,1);
}
}
},
title: {
text: ''
},
colors: [
'#0000ff',
],
xAxis: {
title: {
text: ''
},
gridLineWidth: 1
},
yAxis: {
title: {
text: 'Value'
},
min:40,
max:160,
tickPixelInterval: 20
},
plotOptions: {
line: {
marker: {
enabled: false
}
}
},

tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2) + 'GE';
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits:{
enabled:false
},
series: [{
name: '',
data: []
}]
});

chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'line',
width: 2002,
marginLeft: 55,
marginRight:3,
marginBottom: 60

},
colors: [
'#0000ff',
],
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
startOnTick: true,
tickPixelInterval: 80,
min:0,
max:24
},
yAxis: {
title: {
text: 'Value'
},
min:40,
max:160,
tickPixelInterval: 20
},
plotOptions: {
line: {
marker: {
enabled: false
}
}
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2) + 'GE';
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits:{
enabled:false
},
series: [{
name: '',
data: []
}]
});
});


The chart works as I want it to except that at all the clicks of the button except for the first click, the chart on the left always show the trend line from the previous simulation for a moment, which I would like to prevent (i.e. when I click the button for the second time, what I wanted is that the chart on the left should show only the line from period 1 to 2 as animated (The datapoint for x=1 is shown on the gridline corresponding to period 1, then a line is drawn to the datapoint for x=2). What is shown is that before the wished animation, there is a flashback to the line from period 0 to 1.)

I have tried redraw() and put the line chart1.series[0].show();

in different part of the code. But the change has either no effect or have some other undesireable effect without correcting the problem.

Is there any way around this?

(I think it has something to do with the setExtreme method)

Screenshot for demonstration: Immediately after the second click of the button, the trend from Period 0 to 1 is visible for a flash

(Note: I have changed the JSFiddle a bit to make the trend more differentiable.)

B 7 B 7
Answer

You can simply use parameters of Highcharts functions!

From the documentation:

setExtremes (Number min, Number max, [Boolean redraw], [Mixed animation])

Set the minimum and maximum of the axes after render time. If the startOnTick and endOnTick options are true, the minimum and maximum values are rounded off to the nearest tick. To prevent this, these options can be set to false before calling setExtremes. Also, setExtremes will not allow a range lower than the minRange option, which by default is the range of five points.

Parameters

  • min: Number The new minimum value
  • max: Number The new maximum value
  • redraw: Boolean Defaults to true. Whether to redraw the chart or wait for an explicit call to chart.redraw().
  • animation: Mixed Defaults to true. When true, the resize will be animated with default animation options. The animation can also be a configuration object with properties duration and easing.

Here are the modifications that I did in your code:

        chart1.series[0].show(); 
        chart1.xAxis[0].setExtremes(index-1,index,true,false); 

        //setTimeout(function(){
            if(index == 1){
                chart1.series[0].setData([chartData[0]]);                                
            }else{
                chart1.series[0].setData(dataToDisplay);
            }
            chart1.series[0].addPoint(chartData[index]);
        //}, 1000);                     

        setTimeout(function(){chart1.series[0].hide();}, 2000);

Complete code : http://jsfiddle.net/z24ysp8m/27/

Comments