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