CODEWITHSUNDEEP
javascriptjqueryhighcharts
agri
agri

Reputation: 283

Changing Highcharts data series type dynamically

I have Highcharts with multiple series and 'select' for each series. My aim is to change series type via 'select'. 

$('#ChType').change(function () {
    var series = chart.series[0]
    var newType = $('#ChType').val();
    changeType(series, newType);
})

$('#ChType2').change(function () {
    var series = chart.series[1]
    var newType = $('#ChType2').val();
    changeType(series, newType);
})

function changeType(series, newType) {
    var dataArray = [],
        points = series.data;
    series.chart.addSeries({
        type: newType,
        name: series.name,
        color: series.color,
        data: series.options.data
    }, false);
    alert(series.name);
    series.remove();
}

I understand that every time the type gets changed, series will get removed from it's current position in an array and added to the end. Currently I'm able to change only the series that is in the position series[0].

How can I change any other series and not just the series[0]?

I did see the similar question here but couldn't quite get it to work.

My sample code in jsFiddle.

Upvotes: 9

Views: 23485

Answers (2)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can use v3.0 highcharts included series.update() method, which allows to change type of chart, dynamically.

http://jsfiddle.net/8Sg8K/1

chart.series[0].update({
                type: "column"
            });

Upvotes: 19

Blake
Blake

Reputation: 1077

Why didn't you include the loop that you linked to in the similar question?

 $('#ChType').change(function(){
     var series;

     for ( i = 0 ; i < chart.series.length ; i++ ) {
            if ( chart.series[i].name == 'MyData1' ) {
                series = chart.series[i];

            }                
        } 
                 //var series = chart.series[0]
                 var newType = series.type == $('#ChType').val() ? $('#ChType').val()

Put that in place for each type - http://jsfiddle.net/waBck/5/

Upvotes: 0

Related Questions