Execute custom shapes closure

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

index d1c876b..e3e29ff 100644 (file)
--- a/tests/two-axes.html
+++ b/tests/two-axes.html
@@ -16,9 +16,16 @@
    <body>
      <h2>Multiple y-axes</h2>
      <p>The same data with both one and two y-axes. Two y-axes:</p>
-    <div id="demodiv"></div>
-    <p>A single y-axis:</p>
-    <div id="demodiv_one"></div>
+    <p>Two y-axes with y as primary axis (default):</p>
+    <div id="demodiv" style="width: 640; height: 350; border: 1px solid black"></div>
+    <p>Two y-axes with y2 as primary axis:</p>
+    <div id="demodiv_y2_primary" style="width: 640; height: 350; border: 1px solid black"></div>
+    <p>Two y-axes using different grids:</p>
+    <div id="demodiv_two_grids" style="width: 640; height: 350; border: 1px solid black"></div>
+    <p>A single y-axis (left):</p>
+    <div id="demodiv_one" style="width: 640; height: 350; border: 1px solid black"></div>
+    <p>A single y-axis (right):</p>
+    <div id="demodiv_one_right" style="width: 640; height: 350; border: 1px solid black"></div>
  
      <script type="text/javascript">
        var data = [];
@@ -41,8 +48,6 @@
            data,
            {
              labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
-            width: 640,
-            height: 350,
              'Y3': {
                axis: {
                }
@@ -55,24 +60,125 @@
                  // set axis-related properties here
                  labelsKMB: true
                }
-            }
+            },
+            ylabel: 'Primary y-axis',
+            y2label: 'Secondary y-axis',
+            yAxisLabelWidth: 60
            }
        );
-
+      
        g2 = new Dygraph(
-          document.getElementById("demodiv_one"),
+          document.getElementById("demodiv_y2_primary"),
            data,
            {
              labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
-            width: 640,
-            height: 350,
-            labelsKMB: true
+            ylabel: 'Primary y-axis',
+            y2label: 'Secondary y-axis',
+            series : {
+              'Y3': {
+                axis: 'y2'
+              },
+              'Y4': {
+                axis: 'y2'
+              }
+            },
+            axes: {
+              y: {
+                // set axis-related properties here
+                drawGrid: false,
+                independentTicks: false
+              },
+              y2: {
+                // set axis-related properties here
+                labelsKMB: true,
+                drawGrid: true,
+                independentTicks: true
+              }
+            }
+          }
+      );
+      
+      g3 = new Dygraph(
+          document.getElementById("demodiv_two_grids"),
+          data,
+          {
+            labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
+            ylabel: 'Primary y-axis',
+            y2label: 'Secondary y-axis',
+            series : {
+              'Y3': {
+                axis: 'y2'
+              },
+              'Y4': {
+                axis: 'y2'
+              }
+            },
+            axes: {
+              y2: {
+                // set axis-related properties here
+                labelsKMB: true,
+                drawGrid: true,
+                independentTicks: true,
+                gridLinePattern: [2,2]
+              }
+            }
            }
        );
  
+      g4 = new Dygraph(
+        document.getElementById("demodiv_one"),
+        data,
+        {
+          labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
+          labelsKMB: true,
+          ylabel: 'Primary y-axis',
+          y2label: 'Secondary y-axis',
+        }
+      );
+      
+      g5 = new Dygraph(
+       document.getElementById("demodiv_one_right"),
+       data,
+       {
+         labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
+         ylabel: 'Primary y-axis',
+         y2label: 'Secondary y-axis',
+          series : {
+            'Y1': {
+               axis: 'y2'
+            },
+            'Y2': {
+              axis: 'y2'
+            },
+            'Y3': {
+              axis: 'y2'
+            },
+            'Y4': {
+              axis: 'y2'
+            }
+          },
+          axes: {
+            y: {
+              // set axis-related properties here
+              drawGrid: false,
+              independentTicks: false
+            },
+            y2: {
+              // set axis-related properties here
+              labelsKMB: true,
+              drawGrid: true,
+              independentTicks: true
+            }
+          }
+        }
+      );
+      
        function update(el) {
          g.updateOptions( { fillGraph: el.checked } );
          g2.updateOptions( { fillGraph: el.checked } );
+        g3.updateOptions( { fillGraph: el.checked } );
+        g4.updateOptions( { fillGraph: el.checked } );
+        g5.updateOptions( { fillGraph: el.checked } );
        }
      </script>