Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Resetting Highcharts to initial state

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>
like image 456
Gregg B Avatar asked May 22 '12 13:05

Gregg B


2 Answers

$('#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

like image 171
undefined Avatar answered Oct 05 '22 14:10

undefined


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.

like image 26
Ricardo Alvaro Lohmann Avatar answered Oct 05 '22 14:10

Ricardo Alvaro Lohmann