Commit | Line | Data |
---|---|---|
54425b14 | 1 | <!DOCTYPE html> |
342b0985 NN |
2 | <html> |
3 | <head> | |
4 | <title>dygraph</title> | |
5 | <!--[if IE]> | |
a2b2c3a1 | 6 | <script type="text/javascript" src="../excanvas.js"></script> |
342b0985 NN |
7 | <![endif]--> |
8 | <script type="text/javascript" src="../strftime/strftime-min.js"></script> | |
9 | <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script> | |
10 | <script type="text/javascript" src="../dygraph-canvas.js"></script> | |
11 | <script type="text/javascript" src="../dygraph.js"></script> | |
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 DV |
130 | stepPlot: true, |
131 | GapSeries2: { axis: {} } | |
342b0985 NN |
132 | } |
133 | ); | |
134 | </script> | |
135 | ||
136 | </body> | |
137 | </html> |