Commit | Line | Data |
---|---|---|
54425b14 | 1 | <!DOCTYPE html> |
12e4c741 NK |
2 | <html> |
3 | <head> | |
93a5bb4c | 4 | <link rel="stylesheet" href="../css/dygraph.css"> |
12e4c741 | 5 | <title>stacked</title> |
7e5ddc94 DV |
6 | <!-- |
7 | For production (minified) code, use: | |
8 | <script type="text/javascript" src="dygraph-combined.js"></script> | |
9 | --> | |
fbd6834a | 10 | <script type="text/javascript" src="../dist/dygraph.js"></script> |
7e5ddc94 | 11 | |
12e4c741 NK |
12 | </head> |
13 | <body> | |
d160cc3b | 14 | <p>Simple graph:</p> |
354e15ab | 15 | <div id="simple_div"></div> |
d160cc3b | 16 | <p>Stacked graph:</p> |
354e15ab DE |
17 | <div id="stacked_div"></div> |
18 | <p>Simple graph with missing data:</p> | |
19 | <div id="simple_missing_div"></div> | |
20 | <p>Stacked graph with missing data:</p> | |
21 | <div id="stacked_missing_div"></div> | |
22 | <p>Stacked graph with many series:</p> | |
23 | <div id="stacked_many_div"></div> | |
38f33a44 | 24 | <p>Change selection/highlighting on all graphs:</p> |
25 | <div id="graph_selection_div"> | |
26 | <select onchange="javascript:setSelection(this.options[this.selectedIndex].value);"> | |
27 | <option value="" selected></option> | |
28 | <option value="0">0</option> | |
29 | <option value="10">10</option> | |
30 | <option value="20">20</option> | |
31 | <option value="30">30</option> | |
32 | <option value="40">40</option> | |
33 | <option value="50">50</option> | |
34 | <option value="60">60</option> | |
35 | <option value="70">70</option> | |
36 | <option value="80">80</option> | |
37 | <option value="90">90</option> | |
38 | <option value="99">99</option> | |
39 | </select> | |
40 | </div> | |
12e4c741 NK |
41 | |
42 | <script type="text/javascript"> | |
d1278ac9 DV |
43 | data = "X,x,100-x\n"; |
44 | for (var i = 0; i < 100; i++) { | |
45 | data += i + "," + i + "," + (100 - i) + "\n"; | |
46 | } | |
38f33a44 | 47 | |
48 | var graphs = []; | |
d1278ac9 | 49 | |
38f33a44 | 50 | graphs.push( |
51 | new Dygraph( | |
52 | document.getElementById("simple_div"), | |
53 | data)); | |
54 | ||
55 | graphs.push( | |
56 | new Dygraph( | |
57 | document.getElementById("stacked_div"), | |
58 | data, | |
59 | { stackedGraph: true })); | |
354e15ab DE |
60 | |
61 | missing_data = "X,x,100-x\n"; | |
62 | for (var i = 0; i < 100; i++) { | |
63 | if (i >= 20 && i < 40) { | |
64 | missing_data += i + ",," + (100 - i) + "\n"; | |
65 | } else if (i >= 60 && i < 80) { | |
66 | missing_data += i + "," + i + ",\n"; | |
67 | } else { | |
68 | missing_data += i + "," + i + "," + (100 - i) + "\n"; | |
69 | } | |
70 | } | |
71 | ||
38f33a44 | 72 | graphs.push( |
73 | new Dygraph( | |
74 | document.getElementById("simple_missing_div"), | |
75 | missing_data)); | |
76 | ||
77 | graphs.push( | |
78 | new Dygraph( | |
79 | document.getElementById("stacked_missing_div"), | |
80 | missing_data, | |
81 | { stackedGraph: true })); | |
354e15ab DE |
82 | |
83 | many_data = "X,a,b,c,d,e,100-a,100-b,100-c,100-d,100-e\n"; | |
84 | for (var i = 0; i < 100; i++) { | |
85 | many_data += i + "," + i + "," + i + "," + i + "," + i + "," + i; | |
86 | j = 100 - i; | |
87 | many_data += "," + j + "," + j + "," + j + "," + j + "," + j; | |
88 | many_data += "\n"; | |
89 | } | |
90 | ||
38f33a44 | 91 | graphs.push( |
92 | new Dygraph( | |
93 | document.getElementById("stacked_many_div"), | |
94 | many_data, | |
95 | { stackedGraph: true })); | |
96 | ||
97 | function setSelection(row) { | |
98 | for (var i = 0; i < graphs.length; i++) { | |
99 | graphs[i].setSelection(row ? row : false); | |
100 | } | |
101 | } | |
12e4c741 NK |
102 | </script> |
103 | </body> | |
104 | </html> |