Creating my Highchart with preset options works fine:
chart = new Highcharts.Chart(options);
However, when I want to destroy and recreate the chart it only destroys. Even if I remove chart.destroy();
the chart is still just completely blanked but not recreated.
$('#resetChart').on("click", function(e){
e.preventDefault();
chart.destroy();
chart = new Highcharts.Chart(options);
});
A little stuck here on how to reset this chart.
Edit::
Inspecting the chart container shows the Pie charts is creating something here but doesn't seem to be retrieving the data properly. Do I need to pass in my data variable again as well even though it's set in the options?
series: [{
name: name,
data: data,
/* changes bar size */
pointPadding: 0,
borderWidth: 0,
pointWidth: 15,
shadow: false
}]
Then data is defined on the page (For our CMS):
<script type="text/javascript">
data = [
{
y: {value},
name: 'field1',
id:'1'
},
{
y: {value},
name: 'field2',
id:'2'
},
{
y: {value},
name: 'field3',
id:'3'
}
];
</script>
$('#resetChart').on("click", function(e){
e.preventDefault();
while(chart.series.length > 0) chart.series[0].remove(true);
chart = new Highcharts.Chart(options);
});
http://jsfiddle.net/tapkr/1
When you create your chart for the first time you pass some options thrue the parameter, you can save them into an var and when you want to create again you use the same options like the following code.
var defaultOptions = {
// your options
};
function drawDefaultChart() {
chart = new Highcharts.Chart(defaultOptions);
}
drawDefaultChart();
$('#resetChart').on("click", function(e){
e.preventDefault();
chart.destroy();
drawDefaultChart();
});
You can see it working here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With