Commit | Line | Data |
---|---|---|
54425b14 | 1 | <!DOCTYPE html> |
342b0985 NN |
2 | <html> |
3 | <head> | |
fd6b8dad | 4 | <link rel="stylesheet" href="../dist/dygraph.css"> |
342b0985 | 5 | <title>dygraph</title> |
fbd6834a | 6 | <script type="text/javascript" src="../dist/dygraph.js"></script> |
7e5ddc94 | 7 | |
342b0985 NN |
8 | </head> |
9 | <body> | |
10 | <p>1: Simple line chart:</p> | |
11 | <div id="graphdiv1"></div> | |
12 | <script type="text/javascript"> | |
13 | g1 = new Dygraph(document.getElementById("graphdiv1"), | |
14 | "Date,Temperature\n" + | |
15 | "2008-05-07,75\n" + | |
16 | "2008-05-08,70\n" + | |
17 | "2008-05-09,80\n" + | |
18 | "2008-05-10,55\n" + | |
19 | "2008-05-11,69\n"); | |
20 | </script> | |
21 | ||
22 | <p>2: Simple step chart:</p> | |
23 | <div id="graphdiv2"></div> | |
24 | <script type="text/javascript"> | |
25 | g2 = new Dygraph(document.getElementById("graphdiv2"), | |
26 | "Date,Temperature\n" + | |
27 | "2008-05-07,75\n" + | |
28 | "2008-05-08,70\n" + | |
29 | "2008-05-09,80\n" + | |
30 | "2008-05-10,55\n" + | |
31 | "2008-05-11,69\n", | |
32 | { | |
33 | stepPlot: true | |
34 | }); | |
35 | </script> | |
36 | ||
37 | <p>3: Filled step chart:</p> | |
38 | <div id="graphdiv3"></div> | |
39 | <script type="text/javascript"> | |
40 | g3 = new Dygraph(document.getElementById("graphdiv3"), | |
41 | "Date,Temperature\n" + | |
42 | "2008-05-07,75\n" + | |
43 | "2008-05-08,70\n" + | |
44 | "2008-05-09,80\n" + | |
45 | "2008-05-10,55\n" + | |
46 | "2008-05-11,69\n", | |
47 | { | |
48 | stepPlot: true, | |
49 | fillGraph: true | |
50 | }); | |
51 | </script> | |
52 | ||
53 | <p>4: Line chart with error bars:</p> | |
54 | <div id="graphdiv4"></div> | |
55 | <script type="text/javascript"> | |
56 | g4 = new Dygraph(document.getElementById("graphdiv4"), | |
57 | [ | |
58 | [1, [75, 2]], | |
59 | [2, [70, 5]], | |
60 | [3, [80, 7]], | |
61 | [4, [55, 3]], | |
62 | [5, [69, 4]] | |
63 | ], | |
64 | { | |
65 | errorBars: true, | |
66 | labels: ["X", "Data"] | |
67 | } | |
68 | ); | |
69 | </script> | |
70 | ||
71 | <p>5: Step chart with error bars:</p> | |
72 | <div id="graphdiv5"></div> | |
73 | <script type="text/javascript"> | |
74 | g5 = new Dygraph(document.getElementById("graphdiv5"), | |
75 | [ | |
76 | [1, [75, 2]], | |
77 | [2, [70, 5]], | |
78 | [3, [80, 7]], | |
79 | [4, [55, 3]], | |
80 | [5, [69, 4]] | |
81 | ], | |
82 | { | |
83 | stepPlot: true, | |
84 | errorBars: true, | |
85 | labels: ["X", "Data"] | |
86 | } | |
87 | ); | |
88 | </script> | |
89 | ||
90 | <p>6: Stepped chart with gaps from CSV:</p> | |
91 | <div id="graphdiv6"></div> | |
92 | <script type="text/javascript"> | |
93 | g6 = new Dygraph( | |
94 | document.getElementById("graphdiv6"), | |
95 | "Date,GapSeries1,GapSeries2\n" + | |
96 | "2009/12/01,10,10\n" + | |
97 | "2009/12/02,15,11\n" + | |
98 | "2009/12/03,,12\n" + | |
5d13ef68 | 99 | "2009/12/04,,13\n" + |
342b0985 NN |
100 | "2009/12/05,15,\n" + |
101 | "2009/12/06,18,15\n" + | |
102 | "2009/12/07,12,16\n", | |
103 | { | |
104 | stepPlot: true | |
105 | } | |
106 | ); | |
107 | </script> | |
108 | ||
109 | <p>7: Stepped chart with gaps from native data:</p> | |
110 | <div id="graphdiv7"></div> | |
111 | <script type="text/javascript"> | |
112 | g7 = new Dygraph( | |
113 | document.getElementById("graphdiv7"), | |
114 | [ | |
115 | [ new Date("2009/12/01"), 10, 10], | |
116 | [ new Date("2009/12/02"), 15, 11], | |
117 | [ new Date("2009/12/03"), null, 12], | |
5d13ef68 | 118 | [ new Date("2009/12/04"), null, 13], |
342b0985 NN |
119 | [ new Date("2009/12/05"), 15, null], |
120 | [ new Date("2009/12/06"), 18, 15], | |
121 | [ new Date("2009/12/07"), 12, 16] | |
122 | ], | |
123 | { | |
124 | labels: ["Date","GapSeries1","GapSeries2"], | |
125 | showRoller: true, | |
44c6bc29 | 126 | stepPlot: true, |
27fd63fc DV |
127 | series: { |
128 | GapSeries2: { | |
129 | axis: 'y2' | |
130 | } | |
131 | } | |
342b0985 NN |
132 | } |
133 | ); | |
134 | </script> | |
349dd9ba DW |
135 | |
136 | <p>8: Stacked filled step chart:</p> | |
137 | <div id="graphdiv8"></div> | |
138 | <script type="text/javascript"> | |
139 | g8 = new Dygraph(document.getElementById("graphdiv8"), | |
140 | "Date,Idle,Used\n" + | |
141 | "2008-05-07,70,30\n" + | |
142 | "2008-05-08,12,88\n" + | |
143 | "2008-05-09,88,12\n" + | |
144 | "2008-05-10,63,37\n" + | |
145 | "2008-05-11,35,65\n", | |
146 | { | |
147 | stepPlot: true, | |
148 | fillGraph: true, | |
149 | stackedGraph: true, | |
150 | includeZero: true | |
151 | }); | |
152 | </script> | |
104d87c5 | 153 | |
154 | <p>9: Mixed mode - step and line:</p> | |
155 | <div id="graphdiv9"></div> | |
156 | <script type="text/javascript"> | |
157 | g8 = new Dygraph(document.getElementById("graphdiv9"), | |
158 | "Date,Idle,Used\n" + | |
159 | "2008-05-07,70,30\n" + | |
160 | "2008-05-08,12,88\n" + | |
161 | "2008-05-09,88,12\n" + | |
162 | "2008-05-10,63,37\n" + | |
163 | "2008-05-11,35,65\n", | |
164 | { | |
165 | series: { | |
166 | Idle: {stepPlot: true}, | |
167 | Used: {stepPlot: false} | |
168 | }, | |
169 | ||
170 | fillGraph: false, | |
171 | stackedGraph: false, | |
172 | includeZero: true | |
173 | }); | |
174 | </script> | |
175 | ||
176 | ||
177 | <p>10: Mixed mode - step and line (filled):</p> | |
178 | <div id="graphdiv10"></div> | |
179 | <script type="text/javascript"> | |
180 | g8 = new Dygraph(document.getElementById("graphdiv10"), | |
181 | "Date,Idle,Used\n" + | |
182 | "2008-05-07,70,30\n" + | |
183 | "2008-05-08,12,88\n" + | |
184 | "2008-05-09,88,12\n" + | |
185 | "2008-05-10,63,37\n" + | |
186 | "2008-05-11,35,65\n", | |
187 | { | |
188 | series: { | |
189 | Idle: {stepPlot: false}, | |
190 | Used: {stepPlot: true} | |
191 | }, | |
192 | ||
193 | fillGraph: true, | |
194 | stackedGraph: false, | |
195 | includeZero: true | |
196 | }); | |
197 | </script> | |
198 | ||
199 | <p>11: Mixed mode - step and line (stacked and filled):</p> | |
200 | <div id="graphdiv11"></div> | |
201 | <script type="text/javascript"> | |
202 | g8 = new Dygraph(document.getElementById("graphdiv11"), | |
203 | "Date,Idle,Used,NotUsed,Active\n" + | |
204 | "2008-05-07,60,30,5,5\n" + | |
205 | "2008-05-08,12,73,5,10\n" + | |
206 | "2008-05-09,38,12,30,20\n" + | |
207 | "2008-05-10,50,17,23,10\n" + | |
208 | "2008-05-11,35,25,35,5\n", | |
209 | { | |
210 | series: { | |
211 | Idle: {stepPlot: false}, | |
212 | Used: {stepPlot: true}, | |
213 | NotUsed: {stepPlot: false}, | |
214 | Active: {stepPlot: true} | |
215 | }, | |
216 | fillGraph: true, | |
217 | stackedGraph: true, | |
218 | includeZero: true | |
219 | }); | |
220 | </script> | |
221 | ||
222 | <p>12: Mixed mode - step and line (errorbars):</p> | |
223 | <div id="graphdiv12"></div> | |
224 | <script type="text/javascript"> | |
225 | g8 = new Dygraph(document.getElementById("graphdiv12"), | |
226 | [ | |
227 | [1, [75, 2], [50, 3]], | |
228 | [2, [70, 5], [90, 4]], | |
229 | [3, [80, 7], [112, 5]], | |
230 | [4, [55, 3], [100, 2]], | |
231 | [5, [69, 4], [85, 6]] | |
232 | ], | |
233 | { | |
234 | errorBars: true, | |
235 | labels: ["X", "Data1", "Data2"], | |
236 | series: { | |
237 | Data1: {stepPlot: true}, | |
238 | Data2: {stepPlot: false} | |
239 | } | |
240 | } | |
241 | ); | |
242 | </script> | |
243 | ||
244 | <p>13: Mixed mode - step and line (custombars):</p> | |
245 | <div id="graphdiv13"></div> | |
246 | <script type="text/javascript"> | |
247 | g8 = new Dygraph(document.getElementById("graphdiv13"), | |
248 | [ | |
249 | [1, [73, 75, 78], [50, 55, 70]], | |
250 | [2, [65, 70, 75], [83, 91, 99]], | |
251 | [3, [75, 85, 90], [98, 107, 117]], | |
252 | [4, [55, 58, 61], [93, 102, 105]], | |
253 | [5, [69, 73, 85], [80, 85, 87]] | |
254 | ], | |
255 | { | |
256 | customBars: true, | |
257 | labels: ["X", "Data1", "Data2"], | |
258 | series: { | |
259 | Data1: {stepPlot: true}, | |
260 | Data2: {stepPlot: false} | |
261 | } | |
262 | } | |
263 | ); | |
264 | </script> | |
342b0985 NN |
265 | |
266 | </body> | |
267 | </html> |