| 1 | <!DOCTYPE html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <title>dygraph</title> |
| 5 | <!--[if IE]> |
| 6 | <script type="text/javascript" src="../excanvas.js"></script> |
| 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" + |
| 103 | "2009/12/04,,13\n" + |
| 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], |
| 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] |
| 126 | ], |
| 127 | { |
| 128 | labels: ["Date","GapSeries1","GapSeries2"], |
| 129 | showRoller: true, |
| 130 | stepPlot: true, |
| 131 | GapSeries2: { axis: {} } |
| 132 | } |
| 133 | ); |
| 134 | </script> |
| 135 | |
| 136 | </body> |
| 137 | </html> |