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.

Solution

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]
        });
    });
});

Comments

[Sebastian Bochan]

I fix your code to be more efficient and skip multiple animations.

[Vael Victus]

It's clear there will be no more answers any time soon, and your solution did work. Thanks so much. If only there were some way to get animation working with add/removeSeries, but I understand why there can't be.

[wergeld]

The animation does work with adding the series. What do you mean?

[Vael Victus]

Sorry; in my chart here, I must remove all series then re-add them with addSeries. They're always entirely new data. So, I lose my animation.

[wergeld]

@VaelVictus do you have an example jsfiddle of this?

[Vael Victus]

I really doubt I'd get a solution for animation, so I won't go through the trouble of making one. The idea is that I run chart.series[0].remove on all series, then chart.addSeries({data: [newSeries[ui.value][i]],name: newNames[ui.value][i]}) If you honestly think posting one will help in that case, I guess I could, but I have little faith that it could possibly figure it out based on what, the name?

[wergeld]

@VaelVictus, okay, what are you trying to animate. When you use chart.addSeries() the animation is a param. See: api.highcharts.com/highcharts#Chart.addSeries.

[Vael Victus]

Indeed it is a param. I remove all series from the chart with the first loop. I then add all my new series and use chart.redraw(). I don't think there's a way to get it to animate when I do that, because upon deleting the series, I lose the data to map the animation to. I have seen it working when using only setData for updating.

[wergeld]

@VaelVictus, See this demo: jsfiddle.net/c1c5zmtf. The series is removed and a new one added on button click and it is animated. What am I missing?

[Vael Victus]

I understand now. When I say animation, I'm talking between each data point. So moving a data point from 2 to 4 on a standard x axis would move it from left to right. In this case, you thought I meant the chart itself animation on load of new data. Sorry for the confusion. The good news is I've had a talk with the boss and we can, in fact, work around to get the data molded properly for animations. Thanks for the help, wergeld.