4 <link rel=
"stylesheet" href=
"../css/dygraph.css">
7 For production (minified) code, use:
8 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
10 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
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" +
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" +
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" +
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"),
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"),
94 <p>6: Stepped chart with gaps from CSV:
</p>
95 <div id=
"graphdiv6"></div>
96 <script type=
"text/javascript">
98 document.getElementById(
"graphdiv6"),
99 "Date,GapSeries1,GapSeries2\n" +
100 "2009/12/01,10,10\n" +
101 "2009/12/02,15,11\n" +
105 "2009/12/06,18,15\n" +
106 "2009/12/07,12,16\n",
113 <p>7: Stepped chart with gaps from native data:
</p>
114 <div id=
"graphdiv7"></div>
115 <script type=
"text/javascript">
117 document.getElementById(
"graphdiv7"),
119 [ new Date(
"2009/12/01"),
10,
10],
120 [ new Date(
"2009/12/02"),
15,
11],
121 [ new Date(
"2009/12/03"), null,
12],
122 [ new Date(
"2009/12/04"), null,
13],
123 [ new Date(
"2009/12/05"),
15, null],
124 [ new Date(
"2009/12/06"),
18,
15],
125 [ new Date(
"2009/12/07"),
12,
16]
128 labels: [
"Date",
"GapSeries1",
"GapSeries2"],
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"),
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",
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"),
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",
170 Idle: {stepPlot: true},
171 Used: {stepPlot: false}
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"),
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",
193 Idle: {stepPlot: false},
194 Used: {stepPlot: true}
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",
215 Idle: {stepPlot: false},
216 Used: {stepPlot: true},
217 NotUsed: {stepPlot: false},
218 Active: {stepPlot: true}
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"),
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]]
239 labels: [
"X",
"Data1",
"Data2"],
241 Data1: {stepPlot: true},
242 Data2: {stepPlot: false}
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"),
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]]
261 labels: [
"X",
"Data1",
"Data2"],
263 Data1: {stepPlot: true},
264 Data2: {stepPlot: false}