How to pass series to plot options in highcharts

Question

I am trying to update the series data option for 'pie' type chart:

I am using exporting buttons to display options to change chart type, all other chart types work well except pie which needs a different format of series data.

exporting: {
                    buttons: {
                        lineButton: {
                            text: 'line',
                            onclick: function () {
                                for(i=0;i<this.series.length;i++) {
                                    this.series[i].update({
                                        type: "line"
                                    }); 
                                }
                            }
                        },
                        barButton: {
                            text: 'bar',
                            onclick: function () {
                                for(i=0;i<this.series.length;i++) {
                                    this.series[i].update({
                                        type: "column"
                                    }); 
                                }
                            }
                        },
                        pieButton: {
                            text: 'pie',
                            onclick: function () {
                            var pieSeries = [];

                            $.each(category_totals, function(j, k) {
                                pieSeries.push( { name: j , y: k } );
                            }); 

                            for(i=0;i<this.series.length;i++) {
                                this.series[i].remove();    
                            }

                            this.series = [{
                                name: title,
                                colorByPoint: true,
                                data: pieSeries
                            }];

                            this.series[0].update({
                                    type: "pie"
                                });
                        }
                    }
                }
...

And I get this error: Uncaught TypeError: this.series[0].update is not a function

a quick question, why can't you just define the type where you define the series? i.e `this.series = [{ name: title, colorByPoint: true, data: pieSeries, type: 'pie' }]`? — Rahul Sharma, Aug 05 '16 at 15:18
same error? do you still have that `this.series[0].update` statement in your code? if you do what I mentioned in my first comment, you wouldn't need this statement. — Rahul Sharma, Aug 05 '16 at 15:35

score 1 · Answer 1 · answered Aug 05 '16 at 15:43

The problem is that you sequentially remove the series from the chart, after each call the chart is redrawn and by the end of the for loop the chart doesn't have any series. When you do

this.series = [{
                name: title,
                colorByPoint: true,
                data: pieSeries
}]

you are modifying the javascript object and therefore update method is not available when you try to do

this.series[0].update({
                        type: "pie"
});

because you are trying to call Highcharts method on a generic javascript object. What you should do is

this.addSeries({
                name: title,
                colorByPoint: true,
                data: pieSeries,
                type: 'pie'
})

Also, a suggestion: pass argument false to remove method so that it it doesn't redraw every time. Just redraw when you add the new series. So above call would look like

this.addSeries({
                name: title,
                colorByPoint: true,
                data: pieSeries,
                type: 'pie'
}, true)

score 0 · Answer 2 · edited May 23 '17 at 10:28

1.

for(i=0;i<this.series.length;i++) {
    this.series[i].remove();    
}

The code above will not remove series items: see here

2. The correct way to add series is: this.addSeries({...});

3. Final working code:

...
pieButton: {
    text: 'pie',
    onclick: function () {
        var pieSeries = [];

        $.each(category_totals, function(j, k) {
            pieSeries.push( { name: j , y: k } );
        });

        while(this.series.length > 0) {
            this.series[0].remove(true);
        }


        this.addSeries({
            name: title,
            colorByPoint: true,
            data: pieSeries,
            type: 'pie'
        });

        // As Rahul Sharma pointed out in comments above,
        // you can pass the "type" option to 
        // addSeries method, making this call redundant
        // this.series[0].update({
        //        type: "pie"
        //    });
    }
}
...

@RahulSharma update your answer with the `correct way to remove series` and I will accept your's instead of mine. — ImpendingDoom, Aug 05 '16 at 15:49

How to pass series to plot options in highcharts

2 Answers2