HighCharts Dynamically Change Chart Type

Question

Using HighCharts 2.2.3 in an ASP.NET site. See http://jsfiddle.net/wergeld/TDLvc/ for code example. My site setup is a little different than what the jsFiddle shows. My function to change the series exists in an included JS file and the call to the function is not "in-line" with the chart creation JS code (although it is still wrapped in a document ready jquery).

I have two issues and one of which can be seen in the jsFiddle. 1) When changing chart type it looks like the yAxis designation gets lost. You can see I have originally 2 yAxis and after you change the chart type the top axis no longer has value labels (means that the chart data is using only the bottom axis (first yAxis)). 2) When running this under FF or IE I get an error on the line that calls:

data: serie.options.data

The error is: c is not a constructor Line 55 in highcharts.js (this is the min-ed file).

Using highcharts.src.js I can now see that the error is: typeClass is not a constructor

This is on line 8789 in the src.js: serie = new typeClass();

See updated jsFiddle: select Point as chart type: http://jsfiddle.net/wergeld/nS4Ny/1/. This will throw that error.

Answer 1

For anyone that stumbles accross this... You must remove the chart series' from last to first. Also remember to redraw on the last series or your changes will not be displayed:)

function changeChartType(chart, type, redraw) {
    var seriesOptions = new Array(chart.series.length);
    for (var i = 0; i < chart.series.length; i++) {
        var series = chart.series[i];
        seriesOptions[i] = {
            type: type,
            name: series.name,
            color: series.color,
            dashStyle: series.options.dashStyle,
            lineWidth: series.options.lineWidth,
            marker: series.options.marker,
            dataLabels: series.options.dataLabels,
            enableMouseTracking: series.options.enableMouseTracking,
            data: series.options.data,
            isRegressionLine: series.options.isRegressionLine
        };
    }
    for (var i = chart.series.length - 1; i >= 0; i--) {
        chart.series[i].destroy();
    }
    for (var i = 0; i < seriesOptions.length; i++) {
        var newSeries = chart.addSeries(seriesOptions[i], redraw && i == seriesOptions.length - 1);
    }
    chart.currentType = type;
}

Answer 2

This issue is the capitalization of our drop-down values. Changed the check to do:

newType = newType.toLowerCase();

Now chart type changes great take effect. Full code:

function changeType(chart, series, newType) {
        newType = newType.toLowerCase();
        for (var i = 0; i < series.length; i++) {
            series = series[0];
            try {
                series.chart.addSeries({
                    type: newType,
                    stack: series.stack,
                    yaxis: series.yaxis,
                    name: series.name,
                    color: series.color,
                    data: series.options.data
                },
                false);
                series.remove();
            } catch (e) {
                alert(newType & ': ' & e);
            }
        }
    }