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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Destory and Re-initialize Graph

Thread ID:





112339 Sep 18,2013 06:45 AM UTC Sep 24,2013 10:55 AM UTC JavaScript 5
Tags: ejChart
Asked On September 18, 2013 06:45 AM UTC

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.

Replied On 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

Replied On 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?

Vijayabharathi K [Syncfusion]
Replied On 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.






Replied On 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.

Vijayabharathi K [Syncfusion]
Replied On September 24, 2013 10:55 AM UTC

Hi Pradeep,


Thanks for the update.


Please let us know if you need further assistance.





This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon