Added stepPlot option.
authorNeal Nelson <neal@adrimac.makalumedia.loc>
Tue, 15 Jun 2010 15:38:37 +0000 (17:38 +0200)
committerNeal Nelson <neal@adrimac.makalumedia.loc>
Tue, 15 Jun 2010 15:38:37 +0000 (17:38 +0200)
tests/steps.html [new file with mode: 0644]

diff --git a/tests/steps.html b/tests/steps.html
new file mode 100644 (file)
index 0000000..81dfbd0
--- /dev/null
@@ -0,0 +1,135 @@
+<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>