This example shows how to destroy a webchart and it's associated controls using the chart.destroy
method introduced in v1.7. The example was created using webcharts and builds upon this example
Last active
December 21, 2016 04:07
-
-
Save jwildfire/3cf9dea34afecd477c43db2471df6d6c to your computer and use it in GitHub Desktop.
Destroy a webcharts chart and its controls
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
Number | Period | Group | Symbol | Name | Mass | Radius | Valence el. | Stable isotopes | Melting point | Boiling point | Density | |
---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | 1 | 1 | H | Hydrogen | 1.008 | 25 | 1 | 2 | 14.1 | 20.3 | 0.084 | |
2 | 1 | 18 | He | Helium | 4.003 | 31 | 2 | 2 | 4.2 | 0.17 | ||
3 | 2 | 1 | Li | Lithium | 6.941 | 145 | 1 | 2 | 454 | 1615 | 0.53 | |
4 | 2 | 2 | Be | Beryllium | 9.012 | 105 | 2 | 1 | 1551 | 3750 | 1.85 | |
5 | 2 | 13 | B | Boron | 10.81 | 85 | 3 | 2 | 2349 | 4200 | 2.46 | |
6 | 2 | 14 | C | Carbon | 12.011 | 70 | 4 | 2 | 3820 | 5100 | 3.51 | |
7 | 2 | 15 | N | Nitrogen | 14.007 | 65 | 5 | 2 | 63.1 | 77.4 | 1.17 | |
8 | 2 | 16 | O | Oxygen | 15.999 | 60 | 6 | 3 | 54.4 | 90.2 | 1.33 | |
9 | 2 | 17 | F | Fluorine | 18.998 | 50 | 7 | 1 | 53.5 | 85 | 1.58 | |
10 | 2 | 18 | Ne | Neon | 20.18 | 38 | 8 | 3 | 24.6 | 27.1 | 0.84 | |
11 | 3 | 1 | Na | Sodium | 22.99 | 180 | 1 | 1 | 371 | 1156 | 0.97 | |
12 | 3 | 2 | Mg | Magnesium | 24.305 | 150 | 2 | 3 | 923 | 1380 | 1.74 | |
13 | 3 | 13 | Al | Aluminium | 26.92 | 125 | 3 | 1 | 933 | 2740 | 2.7 | |
14 | 3 | 14 | Si | Silicon | 28.085 | 110 | 4 | 3 | 1683 | 2628 | 2.33 | |
15 | 3 | 15 | P | Phosphorus | 30.974 | 100 | 5 | 1 | 317 | 550 | 1.82 | |
16 | 3 | 16 | S | Sulfur | 62.065 | 100 | 6 | 4 | 338 | 718 | 2.06 | |
17 | 3 | 17 | Cl | Chlorine | 35.453 | 100 | 7 | 2 | 172 | 239 | 2.95 | |
18 | 3 | 18 | Ar | Argon | 39.948 | 71 | 8 | 3 | 84 | 87 | 1.66 | |
19 | 4 | 1 | K | Potassium | 39.098 | 220 | 1 | 2 | 337 | 1032 | 0.86 | |
20 | 4 | 2 | Ca | Calcium | 40.078 | 280 | 2 | 4 | 1115 | 1757 | 1.54 | |
21 | 4 | 3 | Sc | Scandium | 44.956 | 160 | 1 | 1814 | 3103 | 2.99 | ||
22 | 4 | 4 | Ti | Titanium | 47.867 | 140 | 5 | 1941 | 3560 | 4.51 | ||
23 | 4 | 5 | V | Vanadium | 50.942 | 135 | 1 | 2183 | 3680 | 6.09 | ||
24 | 4 | 6 | Cr | Chromium | 51.996 | 140 | 3 | 2130 | 2945 | 7.14 | ||
25 | 4 | 7 | Mn | Manganese | 54.938 | 140 | 1 | 1517 | 2235 | 7.44 | ||
26 | 4 | 8 | Fe | Iron | 55.845 | 140 | 4-Mar | 1808 | 3023 | 7.87 | ||
27 | 4 | 9 | Co | Cobalt | 58.993 | 135 | 1 | 1768 | 3200 | 8.89 | ||
28 | 4 | 10 | Ni | Nickel | 58.693 | 135 | 5 | 1738 | 3186 | 8.91 | ||
29 | 4 | 11 | Cu | Copper | 63.456 | 135 | 2 | 1358 | 2840 | 8.92 | ||
30 | 4 | 12 | Zn | Zinc | 65.39 | 135 | 5 | 693 | 1180 | 7.14 | ||
31 | 4 | 13 | Ga | Gallium | 69.723 | 130 | 3 | 2 | 303 | 2477 | 5.91 | |
32 | 4 | 14 | Ge | Germanium | 72.64 | 125 | 4 | 4 | 1211 | 3093 | 5.32 | |
33 | 4 | 15 | As | Arsenic | 74.922 | 115 | 5 | 1 | 889 | 5.72 | ||
34 | 4 | 16 | Se | Selenium | 78.96 | 115 | 6 | 5 | 494 | 958 | 4.82 | |
35 | 4 | 17 | Br | Bromine | 79.904 | 115 | 7 | 2 | 266 | 332 | 3.14 | |
36 | 4 | 18 | Kr | Krypton | 83.8 | 88 | 8 | 5 | 116 | 120 | 3.48 | |
37 | 5 | 1 | Rb | Rubidium | 85.468 | 235 | 1 | 1 | 312 | 961 | 1.53 | |
38 | 5 | 2 | Sr | Strontium | 87.62 | 200 | 2 | 4 | 1050 | 1655 | 2.63 | |
39 | 5 | 3 | Y | Yttrium | 88.906 | 180 | 1 | 1799 | 3609 | 4.47 | ||
40 | 5 | 4 | Zr | Zirconium | 91.224 | 155 | 4 | 2130 | 4682 | 6.51 | ||
41 | 5 | 5 | Nb | Niob | 92.906 | 145 | 1 | 2750 | 5017 | 8.58 | ||
42 | 5 | 6 | Mo | Molybdenum | 95.94 | 145 | 6 | 2896 | 4912 | 10.28 | ||
43 | 5 | 7 | Tc | Technetium | 98 | 135 | 2430 | 5150 | 11.49 | |||
44 | 5 | 8 | Ru | Ruthenium | 101.07 | 130 | 7 | 2607 | 4423 | 12.45 | ||
45 | 5 | 9 | Rh | Rhodium | 102.91 | 135 | 1 | 2273 | 3968 | 12.41 | ||
46 | 5 | 10 | Pd | Palladium | 106.42 | 140 | 6 | 1828 | 3236 | 12.02 | ||
47 | 5 | 11 | Ag | Silver | 107.87 | 160 | 2 | 1234 | 2435 | 10.49 | ||
48 | 5 | 12 | Cd | Cadmium | 112.41 | 155 | ?3 | 594 | 1040 | 8.64 | ||
49 | 5 | 13 | In | Indium | 114.82 | 155 | 3 | 1 | 430 | 2345 | 7.31 | |
50 | 5 | 14 | Sn | Tin | 118.71 | 145 | 4 | 10 | 505 | 2875 | 7.29 | |
51 | 5 | 15 | Sb | Antimony | 121.76 | 145 | 5 | 2 | 904 | 1860 | 6.69 | |
52 | 5 | 16 | Te | Tellurium | 127.6 | 140 | 6 | 5-Apr | 723 | 1263 | 6.25 | |
53 | 5 | 17 | I | Iodine | 126.9 | 140 | 7 | 1 | 387 | 457 | 4.94 | |
54 | 5 | 18 | Xe | Xenon | 131.29 | 108 | 8 | 9 | 161 | 165 | 4.49 | |
55 | 6 | 1 | Cs | Caesium | 132.9 | 260 | 1 | 1 | 302 | 944 | 1.9 | |
56 | 6 | 2 | Ba | Barium | 137.33 | 215 | 2 | 7 | 1000 | 1913 | 3.65 | |
57 | 6 | 3 | La | Lanthanum | 138.91 | 195 | 1 | 1193 | 3730 | 6.16 | ||
58 | 6 | 3 | Ce | Cerium | 140.12 | 185 | 3 | 1068 | 3716 | 6.77 | ||
59 | 6 | 3 | Pr | Praseodym | 140.91 | 185 | 1 | 1204 | 3793 | 6.48 | ||
60 | 6 | 3 | Nd | Neodym | 144.24 | 185 | 5 | 1297 | 3373 | 7 | ||
61 | 6 | 3 | Pm | Promethium | 145 | 185 | 1315 | 3273 | 7.22 | |||
62 | 6 | 3 | Sm | Samarium | 150.36 | 185 | 4 | 1345 | 2076 | 7.54 | ||
63 | 6 | 3 | Eu | Europium | 151.96 | 185 | 2 | 1099 | 1800 | 6.16 | ||
64 | 6 | 3 | Gd | Gadolinium | 157.25 | 180 | 6 | 1585 | 3523 | 7.89 | ||
65 | 6 | 3 | Tb | Terbium | 158.92 | 175 | 1 | 1629 | 3503 | 8.25 | ||
66 | 6 | 3 | Dy | Dysprosium | 162.5 | 175 | 7 | 1680 | 2840 | 8.56 | ||
67 | 6 | 3 | Ho | Holmium | 163.93 | 175 | 1 | 1747 | 2963 | 8.78 | ||
68 | 6 | 3 | Er | Erbium | 167.26 | 175 | 6 | 1795 | 2783 | 9.05 | ||
69 | 6 | 3 | Tm | Thulium | 168.93 | 175 | 1 | 1818 | 2220 | 9.32 | ||
70 | 6 | 3 | Yb | Ytterbium | 173.04 | 175 | 7 | 1097 | 1467 | 6.97 | ||
71 | 6 | 3 | Lu | Lutetium | 174.97 | 175 | 1 | 1936 | 3668 | 9.84 | ||
72 | 6 | 4 | Hf | Hafnium | 178.49 | 155 | 5 | 2506 | 4876 | 13.31 | ||
73 | 6 | 5 | Ta | Tantalum | 180.95 | 145 | 1 | 3290 | 5731 | 16.68 | ||
74 | 6 | 6 | W | Tungsten | 183.84 | 135 | 4 | 3695 | 5828 | 19.26 | ||
75 | 6 | 7 | Re | Rhenium | 186.21 | 135 | 1 | 3459 | 5869 | 21.03 | ||
76 | 6 | 8 | Os | Osmium | 190.23 | 130 | 6 | 3306 | 5285 | 22.61 | ||
77 | 6 | 9 | Ir | Iridium | 192.22 | 135 | 2 | 2739 | 4701 | 22.65 | ||
78 | 6 | 10 | Pt | Platinum | 195.08 | 135 | 5-Apr | 2045 | 4100 | 21.45 | ||
79 | 6 | 11 | Au | Gold | 196.97 | 135 | 1 | 1337 | 3129 | 19.32 | ||
80 | 6 | 12 | Hg | Mercury | 200.59 | 150 | 7 | 234 | 630 | 13.55 | ||
81 | 6 | 13 | Tl | Thallium | 204.38 | 190 | 3 | 2 | 577 | 1746 | 11.85 | |
82 | 6 | 14 | Pb | Lead | 207.2 | 180 | 4 | 3 | 601 | 2023 | 11.34 | |
83 | 6 | 15 | Bi | Bismuth | 208.98 | 160 | 5 | 544 | 1837 | 9.8 | ||
84 | 6 | 16 | Po | Polonium | 209 | 190 | 6 | 527 | 1235 | 9.2 | ||
85 | 6 | 17 | At | Astatine | 210 | 7 | 575 | 610 | ||||
86 | 6 | 18 | Rn | Radon | 222 | 120 | 8 | 202 | 211 | 9.23 | ||
87 | 7 | 1 | Fr | Francium | 223 | 1 | 300 | 950 | ||||
88 | 7 | 2 | Ra | Radium | 226 | 215 | 2 | 973 | 2010 | 5.5 | ||
89 | 7 | 3 | Ac | Actinium | 227 | 195 | 1327 | 3473 | 10.07 | |||
90 | 7 | 3 | Th | Thorium | 232.04 | 180 | 2028 | 5061 | 11.72 | |||
91 | 7 | 3 | Pa | Protactinium | 231.04 | 180 | 2113 | 4300 | 15.37 | |||
92 | 7 | 3 | U | Uranium | 238.03 | 175 | 1406 | 4203 | 18.97 | |||
93 | 7 | 3 | Np | Neptunium | 237 | 175 | 912 | 4175 | 20.48 | |||
94 | 7 | 3 | Pu | Plutonium | 244 | 175 | 913 | 3509 | 19.74 | |||
95 | 7 | 3 | Am | Americium | 243 | 175 | 1449 | 2880 | 13.67 | |||
96 | 7 | 3 | Cm | Curium | 247 | 1613 | 3383 | 13.51 | ||||
97 | 7 | 3 | Bk | Berkelium | 247 | 1259 | 13.25 | |||||
98 | 7 | 3 | Cf | Californium | 251 | 1173 | 1743 | 15.1 | ||||
99 | 7 | 3 | Es | Einsteinium | 252 | 1133 | ||||||
100 | 7 | 3 | Fm | Fermium | 257 | 1800 | ||||||
101 | 7 | 3 | Md | Mendelevium | 258 | 1100 | ||||||
102 | 7 | 3 | No | Nobelium | 259 | 1100 | ||||||
103 | 7 | 3 | Lr | Lawrencium | 262 | |||||||
104 | 7 | 4 | Rf | Rutherfordium | 267 | |||||||
105 | 7 | 5 | Db | Dubnium | 262 | |||||||
106 | 7 | 6 | Sg | Seaborgium | 266 | |||||||
107 | 7 | 7 | Bh | Bohrium | 264 | |||||||
108 | 7 | 8 | Hs | Hassium | 277 | |||||||
109 | 7 | 9 | Mt | Meitnerium | 268 | |||||||
110 | 7 | 10 | Ds | Darmstadtium | 281 | |||||||
111 | 7 | 11 | Rg | Roentgenium | 280 | |||||||
112 | 7 | 12 | Cp | Copernicium | 277 | |||||||
113 | 7 | 13 | Uut | Ununtrium | 287 | 3 | ||||||
114 | 7 | 14 | Fl | Flerovium | 289 | 4 | ||||||
115 | 7 | 15 | Uup | Ununpentium | 288 | 5 | ||||||
116 | 7 | 16 | Lv | Livermorium | 289 | 6 | ||||||
117 | 7 | 17 | Uus | Ununseptium | 291 | 7 | ||||||
118 | 7 | 18 | Uuh | Ununoctium | 294 | 8 |
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 - Countdown to destroy a chart with controls</title> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
<link rel="stylesheet" href="https://rawgit.com/RhoInc/Webcharts/master/css/webcharts.css"> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src='https://rawgit.com/RhoInc/Webcharts/master/build/webcharts.js'></script> | |
</head> | |
<body style="padding:1em;"> | |
<h3 class="message"></h3> | |
<div class="chart"></div> | |
</body> | |
<script src="selfDestruct.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
var settings = { | |
x: {column: "Group", type: "ordinal", label: "Group" }, | |
y: {column: "Boiling point", type: "linear", label: function(){return this.config.y.column; } }, | |
marks: [ | |
{type: "bar", per: ["Group"], split: "Period", arrange: "grouped"}, | |
{type: "circle", per: ["Group"], summarizeY: "mean", tooltip: "[Name]", attributes: {"fill-opacity": 1, fill: "black", "stroke": "black"}, size: 4} | |
], | |
color_by: "Period", | |
max_width: 800, | |
gridlines: 'xy' | |
}; | |
var controls = webCharts.createControls('div.chart', | |
{ | |
location: 'top', | |
inputs:[ | |
{type: "dropdown", option: "y.column", label: "Y Values", values: ["Mass", "Boiling point", "Melting point", "Density", "Radius"], require: true}, | |
{type: "subsetter", value_col: "Period", label: "Filter by Period"}, | |
{type: "subsetter", value_col: "Group", label: "Filter by Group"} | |
] | |
} | |
); | |
var coolChart = webCharts.createChart('div.chart', settings, controls); | |
d3.csv('elements2.csv', function(e,d){ | |
coolChart.init(d); | |
console.log(coolChart) | |
var counter=5; | |
interval = setInterval(function() { | |
counter--; | |
if(counter < 0) { | |
coolChart.destroy(); | |
coolChart=null; | |
controls=null; | |
d3.select('body').select(".message").html("💥The chart and controls have been destroyed💥. <br><button onClick='window.location.reload()'>Reload</button>") | |
clearInterval(interval) | |
} else { | |
d3.select('body').select(".message").text("This chart will self-destruct in in " + counter.toString() + " seconds.") | |
} | |
}, 1000); | |
}) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment