4 <link rel=
"stylesheet" href=
"../dist/dygraph.css">
6 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
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" +
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" +
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" +
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"),
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"),
90 <p>6: Stepped chart with gaps from CSV:
</p>
91 <div id=
"graphdiv6"></div>
92 <script type=
"text/javascript">
94 document.getElementById(
"graphdiv6"),
95 "Date,GapSeries1,GapSeries2\n" +
96 "2009/12/01,10,10\n" +
97 "2009/12/02,15,11\n" +
101 "2009/12/06,18,15\n" +
102 "2009/12/07,12,16\n",
109 <p>7: Stepped chart with gaps from native data:
</p>
110 <div id=
"graphdiv7"></div>
111 <script type=
"text/javascript">
113 document.getElementById(
"graphdiv7"),
115 [ new Date(
"2009/12/01"),
10,
10],
116 [ new Date(
"2009/12/02"),
15,
11],
117 [ new Date(
"2009/12/03"), null,
12],
118 [ new Date(
"2009/12/04"), null,
13],
119 [ new Date(
"2009/12/05"),
15, null],
120 [ new Date(
"2009/12/06"),
18,
15],
121 [ new Date(
"2009/12/07"),
12,
16]
124 labels: [
"Date",
"GapSeries1",
"GapSeries2"],
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"),
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",
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"),
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",
166 Idle: {stepPlot: true},
167 Used: {stepPlot: false}
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"),
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",
189 Idle: {stepPlot: false},
190 Used: {stepPlot: true}
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",
211 Idle: {stepPlot: false},
212 Used: {stepPlot: true},
213 NotUsed: {stepPlot: false},
214 Active: {stepPlot: true}
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"),
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]]
235 labels: [
"X",
"Data1",
"Data2"],
237 Data1: {stepPlot: true},
238 Data2: {stepPlot: false}
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"),
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]]
257 labels: [
"X",
"Data1",
"Data2"],
259 Data1: {stepPlot: true},
260 Data2: {stepPlot: false}