We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Destory and Re-initialize Graph

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");
    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.

5 Replies

PR Pradeep September 19, 2013 01:59 AM UTC

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

PR Pradeep September 19, 2013 02:37 AM UTC

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>");

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?

VK Vijayabharathi K Syncfusion Team September 20, 2013 05:09 AM UTC

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,



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




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.






PR Pradeep September 23, 2013 05:31 AM UTC

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

VK Vijayabharathi K Syncfusion Team September 24, 2013 10:55 AM UTC

Hi Pradeep,


Thanks for the update.


Please let us know if you need further assistance.




Live Chat Icon For mobile
Up arrow icon