Destory and Re-initialize Graph

[Pradeep]

How do I destroy a graph, once it has been initialized?
Right now my pie is being initialized, destroyed and re-initialized like this.
Otherwise, the animation does not occur again.

******************
 function to initialize
******************
var graphStats = $("#graph-statistics");
var totalBox = graphStats.find("#total-box");
removeStatsGraph(totalBox);
totalBox.find(".stats-chart").ejChart(
{
    series: [
    {
        points: [
            { x: 'NFC Interactions', y: 34, text: '', visible: true, interior: primaryColor },
            { x: 'QR Interactions', y: 66, text: '', visible: true, interior: disabledColor }
        ],
        type: 'pie',
        animation: true
    }
    ],
    margin: { top: 0, bottom: 0, left: 0, right: 0 },
    showTooltip: false,
    textColor: 'Black',
    size: { height: 210, width: 210 },
    legend: { visible: false }
});

******************
 function to destroy
****************
function removeStatsGraph(container) {
    $(container).find(".stats-chart").removeClass().addClass("stats-chart").html("<div class='chart-image'></div>");
}


So basically, im removing the existing html, and classes,
and adding in what was there before the graph was initialized,
and then re-initializing it.

[Pradeep]

Actually this also causes the following when I hover over
the pie chart, particularly when I destroy it, and reinitialize,
but it dosen't happen if I don't remove the html by the above method.

TypeError: $(...).parent(...).offset(...) is undefined

[Pradeep]

Ok I resolved the
TypeError: $(...).parent(...).offset(...) is undefined
issue by changing the destroy function like this

function removeStatsGraph(container) {
    $(container).find(".stats-chart").removeClass().addClass("stats-chart").html("<div class='chart-image'></div>");
    $(container).children().andSelf().unbind();
}

I guess the that error was caused by the previous event handlers,
that were bound to the chart container. But I still need a better
solution to destroy a chart ( I cannot use this on all the charts )
..any suggestions?

[Vijayabharathi K]

Hi Pradeep

 

Thanks for using Syncfusion products.

 

We suggest you to use “destroy()” method of JS chart to destroy the chart control. Please find the below code snippet to achieve this,

 

[JS]

       var chartObj = $("#container").data("ejChart");

       chartObj.destroy();

 

 

If your intention is to destroy and re-initialize the chart for animation, we suggest you to use “redraw()” method of JS chart instead of destroy and re-initialize the chart. Since, the chart will redraw with animation when call the redraw() function. Please find the attachment sample for this solution.

 

Please let us know if you need any further assistance.

 

Regards,

Vijayabharathi

 

PieSample_1290df82.zip

[Pradeep]

Thanks that was very helpful. Destroying is more useful to me, as
while reinitializing, the values on the graph change.

[Vijayabharathi K]

Hi Pradeep,

 

Thanks for the update.

 

Please let us know if you need further assistance.

 

Regards,

Vijayabharathi