--- /dev/null
+<html>
+ <head>
+ <title>dygraph</title>
+ <!--[if IE]>
+ <script type="text/javascript" src="excanvas.js"></script>
+ <![endif]-->
+ <script type="text/javascript" src="../strftime/strftime-min.js"></script>
+ <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
+ <script type="text/javascript" src="../dygraph-canvas.js"></script>
+ <script type="text/javascript" src="../dygraph.js"></script>
+ </head>
+ <body>
+ <p>1: Simple line chart:</p>
+ <div id="graphdiv1"></div>
+ <script type="text/javascript">
+ g1 = new Dygraph(document.getElementById("graphdiv1"),
+ "Date,Temperature\n" +
+ "2008-05-07,75\n" +
+ "2008-05-08,70\n" +
+ "2008-05-09,80\n" +
+ "2008-05-10,55\n" +
+ "2008-05-11,69\n");
+ </script>
+
+ <p>2: Simple step chart:</p>
+ <div id="graphdiv2"></div>
+ <script type="text/javascript">
+ g2 = new Dygraph(document.getElementById("graphdiv2"),
+ "Date,Temperature\n" +
+ "2008-05-07,75\n" +
+ "2008-05-08,70\n" +
+ "2008-05-09,80\n" +
+ "2008-05-10,55\n" +
+ "2008-05-11,69\n",
+ {
+ stepPlot: true
+ });
+ </script>
+
+ <p>3: Filled step chart:</p>
+ <div id="graphdiv3"></div>
+ <script type="text/javascript">
+ g3 = new Dygraph(document.getElementById("graphdiv3"),
+ "Date,Temperature\n" +
+ "2008-05-07,75\n" +
+ "2008-05-08,70\n" +
+ "2008-05-09,80\n" +
+ "2008-05-10,55\n" +
+ "2008-05-11,69\n",
+ {
+ stepPlot: true,
+ fillGraph: true
+ });
+ </script>
+
+ <p>4: Line chart with error bars:</p>
+ <div id="graphdiv4"></div>
+ <script type="text/javascript">
+ g4 = new Dygraph(document.getElementById("graphdiv4"),
+ [
+ [1, [75, 2]],
+ [2, [70, 5]],
+ [3, [80, 7]],
+ [4, [55, 3]],
+ [5, [69, 4]]
+ ],
+ {
+ errorBars: true,
+ labels: ["X", "Data"]
+ }
+ );
+ </script>
+
+ <p>5: Step chart with error bars:</p>
+ <div id="graphdiv5"></div>
+ <script type="text/javascript">
+ g5 = new Dygraph(document.getElementById("graphdiv5"),
+ [
+ [1, [75, 2]],
+ [2, [70, 5]],
+ [3, [80, 7]],
+ [4, [55, 3]],
+ [5, [69, 4]]
+ ],
+ {
+ stepPlot: true,
+ errorBars: true,
+ labels: ["X", "Data"]
+ }
+ );
+ </script>
+
+ <p>6: Stepped chart with gaps from CSV:</p>
+ <div id="graphdiv6"></div>
+ <script type="text/javascript">
+ g6 = new Dygraph(
+ document.getElementById("graphdiv6"),
+ "Date,GapSeries1,GapSeries2\n" +
+ "2009/12/01,10,10\n" +
+ "2009/12/02,15,11\n" +
+ "2009/12/03,,12\n" +
+ "2009/12/04,20,13\n" +
+ "2009/12/05,15,\n" +
+ "2009/12/06,18,15\n" +
+ "2009/12/07,12,16\n",
+ {
+ stepPlot: true
+ }
+ );
+ </script>
+
+ <p>7: Stepped chart with gaps from native data:</p>
+ <div id="graphdiv7"></div>
+ <script type="text/javascript">
+ g7 = new Dygraph(
+ document.getElementById("graphdiv7"),
+ [
+ [ new Date("2009/12/01"), 10, 10],
+ [ new Date("2009/12/02"), 15, 11],
+ [ new Date("2009/12/03"), null, 12],
+ [ new Date("2009/12/04"), 20, 13],
+ [ new Date("2009/12/05"), 15, null],
+ [ new Date("2009/12/06"), 18, 15],
+ [ new Date("2009/12/07"), 12, 16]
+ ],
+ {
+ labels: ["Date","GapSeries1","GapSeries2"],
+ showRoller: true,
+ stepPlot: true
+ }
+ );
+ </script>
+
+ </body>
+</html>