axis computation

[dygraphs.git] / tests / two-axes.html
diff --git a/tests/two-axes.html b/tests/two-axes.html

new file mode 100644 (file)

index 0000000..460a278
--- /dev/null
+++ b/tests/two-axes.html
@@ -0,0 +1,50 @@
+<html>
+  <head>
+    <title>Multiple y-axes</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>
+    <h2>Multiple y-axes</h2>
+    <div id="demodiv"></div>
+    <script type="text/javascript">
+      var data = [];
+      for (var i = 1; i <= 100; i++) {
+        var m = "01", d = i;
+        if (d > 31) { m = "02"; d -= 31; }
+        if (m == "02" && d > 28) { m = "03"; d -= 28; }
+        if (m == "03" && d > 31) { m = "04"; d -= 31; }
+        if (d < 10) d = "0" + d;
+        // two series, one with range 1-100, one with range 1-2M
+        data.push([new Date("2010/" + m + "/" + d),
+                   i,
+                   100 - i,
+                   1e6 * (1 + i * (100 - i) / (50 * 50)),
+                   1e6 * (2 - i * (100 - i) / (50 * 50))]);
+      }
+      g = new Dygraph(
+              document.getElementById("demodiv"),
+              data,
+              {
+                labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
+                width: 640,
+                height: 480,
+                'Y3': {
+                  axis: {
+                    // set axis-related properties here
+                    labelsKMB: true
+                  }
+                },
+                'Y4': {
+                  axis: 'Y3'  // use the same y-axis as series Y3
+                }
+              }
+          );
+    </script>
+</body>
+</html>