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