This chart demostrates how to destory and then re-create a chart made with webCharts using the chart.destroy() method and the associated .on("destroy") callback. Made with Webcharts.
Last active
December 21, 2016 04:06
-
-
Save jwildfire/fd5bb35a6e1a5307b9e0ac83ab4a6384 to your computer and use it in GitHub Desktop.
Destroy and Recreate a Webcharts Chart using callbacks
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var settings = { | |
| "max_width":"700", | |
| "x":{ | |
| "label":"Medal Count", | |
| "type":"linear", | |
| "column":"count", | |
| domain: [0] | |
| }, | |
| "y":{ | |
| "type":"ordinal", | |
| "column":"Country", | |
| "sort":"total-descending" | |
| }, | |
| "marks":[ | |
| { | |
| "arrange":"stacked", | |
| "split":"type", | |
| "type":"bar", | |
| "per":["Country"], | |
| "attributes": {"fill-opacity": 0.8}, | |
| "summarizeX": 'mean' | |
| } | |
| ], | |
| "gridlines":"x", | |
| "color_by":"type", | |
| legend: { | |
| label: 'Medal Type', | |
| order: ['Bronze', 'Silver', 'Gold'] | |
| } | |
| }; | |
| function chartInit(chart){ | |
| d3.select("span.init").remove() | |
| d3.select("body") | |
| .insert("span",":first-child") | |
| .attr("class","destroy") | |
| .html("<a>Click here</a> to destroy this chart.") | |
| d3.select("span.destroy a") | |
| .style("color","blue") | |
| .style("text-decoration","underline") | |
| .on("click",function(){ | |
| console.log("destroying") | |
| stackedMedalChart.destroy() //removes event listeners and unmounts DOM elements | |
| stackedMedalChart = null; //completely removes original objects. Could add additional lines to remove data and config objects. | |
| }) | |
| } | |
| function chartDestroy(chart){ | |
| d3.select("span.destroy").remove() | |
| d3.select("body") | |
| .insert("span",":first-child") | |
| .attr("class","init") | |
| .html("The chart has been destroyed. <a>Click here</a> to re-initialize this chart.") | |
| d3.select("span.init a") | |
| .style("color","blue") | |
| .style("text-decoration","underline") | |
| .on("click",function(){ | |
| stackedMedalChart = webCharts.createChart('body', settings); //intentional global for the demo | |
| stackedMedalChart.on("init",chartInit) | |
| stackedMedalChart.on("destroy",chartDestroy) | |
| d3.csv('OlympicMedals2012_long.csv', function(error, data){ | |
| stackedMedalChart.init(data); | |
| }); | |
| }) | |
| } | |
| var stackedMedalChart = webCharts.createChart('body', settings); | |
| stackedMedalChart.on("init",chartInit) | |
| stackedMedalChart.on("destroy",chartDestroy) | |
| d3.csv('OlympicMedals2012_long.csv', function(error, data){ | |
| stackedMedalChart.init(data); | |
| }); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <title>Webcharts - chart.destroy() demo</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <link rel="stylesheet" href="https://cdn.rawgit.com/RhoInc/Webcharts/master/css/webcharts.css"> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src='https://cdn.rawgit.com/RhoInc/Webcharts/master/build/webcharts.js'></script> | |
| </head> | |
| <body style="padding:1em;"> | |
| </body> | |
| <script src="destroyDemo.js" defer></script> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Country | type | count | |
|---|---|---|---|
| US | Gold | 46 | |
| China | Gold | 38 | |
| Russia | Gold | 24 | |
| UK | Gold | 29 | |
| Germany | Gold | 11 | |
| Japan | Gold | 7 | |
| Australia | Gold | 7 | |
| France | Gold | 11 | |
| Italy | Gold | 8 | |
| South Korea | Gold | 13 | |
| US | Silver | 29 | |
| China | Silver | 27 | |
| Russia | Silver | 26 | |
| UK | Silver | 17 | |
| Germany | Silver | 19 | |
| Japan | Silver | 14 | |
| Australia | Silver | 16 | |
| France | Silver | 11 | |
| Italy | Silver | 9 | |
| South Korea | Silver | 8 | |
| US | Bronze | 29 | |
| China | Bronze | 23 | |
| Russia | Bronze | 32 | |
| UK | Bronze | 19 | |
| Germany | Bronze | 14 | |
| Japan | Bronze | 17 | |
| Australia | Bronze | 12 | |
| France | Bronze | 12 | |
| Italy | Bronze | 11 | |
| South Korea | Bronze | 7 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment