CODEWITHSUNDEEP
javascriptchartshighcharts
ImpendingDoom
ImpendingDoom

Reputation: 437

How to pass series to plot options in highcharts

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

Upvotes: 0

Views: 885

Answers (2)

ImpendingDoom
ImpendingDoom

Reputation: 437

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"
        //    });
    }
}
...

Upvotes: 0

Rahul Sharma
Rahul Sharma

Reputation: 912

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)

Upvotes: 1

Related Questions