Updating spline chart two lines on top of eachothe

Question

I am showing two lines in a single graph updating them each second with a value that is saved into a global variable (both have different global variables). An example of the code can be found here: jsFiddle example.

As you can see the two lines are on top of each other, even though they have different values when the ymin and ymax are added to the lines (you can see this in the console).

The cause appears to be in the first addPoint call (line 118). If the first boolean is set to true (like the second addPoint call) the lines are shown correctly but the animation is wrong: jsFiddle example.

Does anyone know why the lines are on top of each other while their values are obviously different? And more importantly: how can I fix this while keeping the smooth animation?

Previous (possibly related) question: Chart not moving fluently when adding value to two lines on interval.

Answer 1

It looks like strange with your setInerval functions, because minified example http://jsfiddle.net/DxqUj/ works properly.

Answer 2

The problem is with using the same variable emptyarray for both series. This is known issue with Highcharts (roported on github) that Highcharts overwrites some of options passed to the chart. Possible solution is to use function which will return that empty array, for example:

    function generateArray(){
        var emptyarray = [],
            time = (new Date()).getTime(),
            i;

        for (i = -50; i <= 0; i++) {
            emptyarray.push({
                x: time + i * 1000,
                y: 230
            });
        }
        return emptyarray;
    }

    chartinfo.series = [{
        name: 'Minimum Voltage',
        data: generateArray(),
        color: '#FFFFDD'
    }, {
        name: 'Maximum Voltage',
        data: generateArray(),
        color: '#B72E8D'
    }];

Working jsFiddle: http://jsfiddle.net/XAHa4/2/