Chart not moving fluently when adding value to two

Question

I'm using an updating spline chart to show a line that changes each second. The changing is set in chartinfo.chart.events.load. Below is the code I'm using in my actual program:

chartinfo.chart.events.load: function() {
    powerLine = this.series[0];
    setInterval(function() {
        var x = (new Date()).getTime(), // current time
        y = ((latestPowerValue > maxPower) ? maxPower : ((latestPowerValue < minPower) ? minPower : latestPowerValue)); //Math.random() * 250;
        powerLine.addPoint([x, y], true, true);
    }, 1000);
}

I have another updating spline chart to show two lines which also changes each second. This is almost the same as the above example but this time two series are updated.

chartinfo.chart.events.load: function() {
    var minLine = this.series[0];
    var maxLine = this.series[1];

    setInterval(function() {
        var x = (new Date()).getTime();
        var ymin = ((latestVoltageMin > maxVoltage) ? maxVoltage : ((latestVoltageMin < minVoltage) ? minVoltage : latestVoltageMin));
        var ymax = ((latestVoltageMax > maxVoltage) ? maxVoltage : ((latestVoltageMax < minVoltage) ? minVoltage : latestVoltageMax));

        minLine.addPoint([x, ymin], true, true);
        maxLine.addPoint([x, ymax], true, true);
    }, 1000);
};

I have also prepared working examples of the single lined (working) graph and the double lined (not working) graph in jsFiddle.

I'd like to find out how to get the double lined graph to move/slide like the single lined graph. Any help or insight into the problem is welcome!

Answer 1

Set the first add point's animate parameter to false, the second add point will animate for the both of them.

series.addPoint([x, y], false, true);
series2.addPoint([x, y2], true, true);

jsFiddle

Answer 2

In addition to series.addPoint([x, y], false, true); series2.addPoint([x, y2], true, true);

also write chart.redraw(); after series2.addPoint([x, y2], true, true); This makes it work for me in webapp