Dynamic Chart Type HighCharts

Question

Using HighCharts 2.2.3 on ASP.NET. See http://jsfiddle.net/wergeld/TDLvc/ for sample code. My site setup is slightly different than what jsFiddle shows. My series change function exists in the included JS file, and the function call is not "in-line" with JS code to create the diagram (although it is still wrapped in jQuery ready).

I have two problems, and one of them can be seen in jsFiddle. 1) When you change the type of chart, it looks like a loss of yAxis. You can see that I initially have 2 yAxis, and after changing the type of chart, the upper axis no longer has value labels (this means that the chart data uses only the lower axis (first yAxis)). 2) When starting under FF or IE, I get an error message on the line that causes:

data: serie.options.data 

Error: c is not a constructor of Line 55 in the highcharts.js file (this is a mini file).

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

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

See updated jsFiddle: select item as chart type: http://jsfiddle.net/wergeld/nS4Ny/1/ . This will cause this error.

Answer 1

This problem is the capitalization of our revealing values. Verification changed:

 newType = newType.toLowerCase(); 

Changes to the chart type will now 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); } } } 

Answer 2

For those who stumble over it ... You must remove the series of diagrams from last to first. Also do not forget to redraw in 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; }