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