Highcharts: how to use setData to add series

Question

I have a bubble chart that works with a jQuery UI slider to change the contents of the graph. ("through time") However, the bubbles on the chart can fall in and out of the chart by week, and when updating with setData, it ignores any new series that weren't there initially. My code:

series: [{ name: 'hidden',showInLegend: false, enableMouseTracking: false, marker: { lineColor:'rgba(255,255,255,0)', fillColor: 'rgba(255,255,255,0)', fillOpacity: 0 },
                   data: [{x:0,y:0,z:0, zz:0}]

        },{ name: 'bubble 2',showInLegend: false,
                   marker: { lineColor:'black', fillColor: { radialGradient: {cx: 0.4,cy: 0.3,r: 0.7}, stops: [ [0, 'green'], [1, 'white'] ] } },
                   data: [{x:11,y:10,z:5, zz:0}]

        },{ name: 'bubble 3',showInLegend: false,
                   marker: { lineColor:'black', fillColor: { radialGradient: {cx: 0.4,cy: 0.3,r: 0.7}, stops: [ [0, 'red'], [1, 'white'] ] } },
                   data: [{x:100,y:100,z:77, zz:0}]
        }]

If I put in setData like:

newSeries[0] = [{x:0,y:0,z:0.0000000000},
{x:9,y:13,z:1,name: 'hello', marker: { fillColor: { radialGradient: {cx: 0.4,cy: 0.3,r: 0.7}, stops: [ [0, 'green'], [1, 'white'] ] } }},
{x:23,y:23,z:6,name: 'hello2', marker: { fillColor: { radialGradient: {cx: 0.4,cy: 0.3,r: 0.7}, stops: [ [0, 'green'], [1, 'white'] ] } }},
{x:23,y:49,z:6,name: 'hello3', marker: { fillColor: { radialGradient: {cx: 0.4,cy: 0.3,r: 0.7}, stops: [ [0, 'green'], [1, 'white'] ] } }},
{x:24,y:24,z:2,name: 'hello4', marker: { fillColor: { radialGradient: {cx: 0.4,cy: 0.3,r: 0.7}, stops: [ [0, 'green'], [1, 'white'] ] } }}];

hello3 and hello4 are completely ignored. You can see a fiddle here, not of my chart but one which will demonstrate the issue: http://jsfiddle.net/ruchitrami/YUa3R/1/

If you add chart.series[3].setData([4, 4, 4, 3, 3]); to that chart's button, it's ignored.

We need to use separate series because using one series and updating the data is not flexible enough to allow change via setData. We need to change the color of the bubbles in the chart by week, for example. There is only one data point per series.

If I manually add in some "dummy" series to the initial call, it works perfectly. I just need Highcharts to accept these series without me needing to declare them. (as the bubbles drop in/out by week) Also, I'm not sure why the setData won't accept my "hello1, hello2" names on the new series... if anyone knows that.

Answer 1

That is because it is trying to set the data of a series that does not exist. You get this error if you add that setData line:

Uncaught TypeError: Cannot read property 'setData' of undefined

Instead you want to add the new series via chart.addSeries():

$('#button').click(function () {
        chart.series[0].setData([10, 10, 10, 10, 10],false);
        chart.series[1].setData([5, 5, 5, 5, 5],false);
        chart.series[2].setData([4, 4, 4, 4, 4],false);
        chart.addSeries({
            data: [4, 4, 4, 3, 3]
        });
    });
});