Highchart, dynamically change the chart type - ajax

Question

html
<div id="top10_" style="float:left">
<strong>Top10:</strong>
<select id="top10_update">
<option value="typ">Typ</option>
<option value="kategoria">Kategoria</option>
<option value="typ2 selected="selected" >Typ2</option>
<option value="usluga">usługa</option>
</select>
<img id="set_column" src="static/images/chart-bar-icon.png" width="20" />
<img id="set_pie" src="static/images/chart-pie-icon.png" width="20" />
<img id="set_area" src="static/images/Chart-Graph-Ascending-icon.png" width="20" />
<img id="set_line" src="static/images/chart_curve.png" width="20" />
</div>
<div id="top10" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>
js
$('#set_column').click(function() {
var chart = $(this).parent('div').attr('id');
chart = chart.replace('_','');
$('#'+chart).highcharts().series[0].update({ type: "column"});
});
$('#set_pie').click(function() {
var chart = $(this).parent('div').attr('id');
chart = chart.replace('_','');
$('#'+chart).highcharts().series[0].update({ type: "pie"});
});
$('#set_area').click(function() {
var chart = $(this).parent('div').attr('id');
chart = chart.replace('_','');
$('#'+chart).highcharts().series[0].update({ type: "area"});
});
$('#set_line').click(function() {
var chart = $(this).parent('div').attr('id');
chart = chart.replace('_','');
$('#'+chart).highcharts().series[0].update({ type: "line"});
});
and chart
$('#top10').highcharts({
chart: {
type: 'column',
margin: [ 50, 50, 100, 80]
},
title: {
text: 'TOP10'
},
subtitle: {
text: ' '
},
credits: {
enabled: false
},
xAxis: {
categories: [],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Ilość'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
'Ilość: '+ this.y;
}
},
series: [{
name: 'Ilość, TOP10',
data: [],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
as you can see it has empty data because data is loaded dynamically with ajax
function ajax_update(date) {
$.ajax({
url: "index.php/ajax",
async: false,
method: 'post',
dataType: "json",
data: {date:date},
beforeSend: function(){
$('#loading').show();
$('#top10').highcharts().showLoading();
},
success: function(dane) {
$('#top10').highcharts().xAxis[0].setCategories(dane.top10.xlabel, false);
$('#top10').highcharts().series[0].setData(dane.top10.data);
$('#top10').highcharts().setTitle(null, { text: 'Dane za: '+date.replace('^', ' - ') });
$('#top10').highcharts().hideLoading();
$('#loading').hide();
},
error: function (dane) {
alert( dane.responseText );
}
});
}
the problem is that when I click on the icon to change the type of chart data on chart disappear and when update it using the above-mentioned function it shows again with a modified type
live, working example is here: http://jsfiddle.net/zqvNq/1/
but as i said, i have empty data and append it to chart with json

Answer 1

here's example how i fix this:
var global_highcharts = new Object();
function ajax_update_chart(level, date, co) {
$.ajax({
url: "index.php/ajax/"+co,
async: false,
method: 'post',
dataType: "json",
data: {date:date, level:level},
beforeSend: function(){
$('#loading').show();
$('#'+co.substr(7)).highcharts().showLoading();
},
success: function(dane) {
$.each(dane, function(i) {
global_highcharts[i+'Cat'] = this.categories;
global_highcharts[i+'Dat'] = this.data;
$('#'+i).highcharts().xAxis[0].setCategories( this.categories, false );
$('#'+i).highcharts().series[0].setData( this.data );
$('#'+i).highcharts().hideLoading();
});
//ustawiamy domyślne wartości które w main.php mają ustawione selected aby nie mylić ludzi na stronie
$('#loading').hide();
//console.log( global_highcharts );
},
error: function (dane) {
alert( dane.responseText );
}
});
}
$.each(['line', 'column', 'spline', 'area', 'areaspline', 'scatter', 'pie'], function (i, type) {
$('#' + type).click(function () {
var chartaz = $('#top10').highcharts();
chartaz.series[0].update({
type: type
});
$('#top10').highcharts().xAxis[0].setCategories( global_highcharts.top10Cat , false);
$('#top10').highcharts().series[0].setData( global_highcharts.top10Dat );
});
});
just appending data once againt