tests/two-axes.html

   1 <html>
   2   <head>
   3     <title>Multiple y-axes</title>
   4     <!--[if IE]>
   5     <script type="text/javascript" src="../excanvas.js"></script>
   6     <![endif]-->
   7     <script type="text/javascript" src="../strftime/strftime-min.js"></script>
   8     <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
   9     <script type="text/javascript" src="../dygraph-canvas.js"></script>
  10     <script type="text/javascript" src="../dygraph.js"></script>
  11   </head>
  12   <body>
  13     <h2>Multiple y-axes</h2>
  14     <p>The same data with both one and two y-axes. Two y-axes:</p>
  15     <div id="demodiv"></div>
  16     <p>A single y-axis:</p>
  17     <div id="demodiv_one"></div>
  18
  19     <script type="text/javascript">
  20       var data = [];
  21       for (var i = 1; i <= 100; i++) {
  22         var m = "01", d = i;
  23         if (d > 31) { m = "02"; d -= 31; }
  24         if (m == "02" && d > 28) { m = "03"; d -= 28; }
  25         if (m == "03" && d > 31) { m = "04"; d -= 31; }
  26         if (d < 10) d = "0" + d;
  27         // two series, one with range 1-100, one with range 1-2M
  28         data.push([new Date("2010/" + m + "/" + d),
  29                    i,
  30                    100 - i,
  31                    1e6 * (1 + i * (100 - i) / (50 * 50)),
  32                    1e6 * (2 - i * (100 - i) / (50 * 50))]);
  33       }
  34
  35       g = new Dygraph(
  36           document.getElementById("demodiv"),
  37           data,
  38           {
  39             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  40             width: 640,
  41             height: 350,
  42             'Y3': {
  43               axis: {
  44                 // set axis-related properties here
  45                 labelsKMB: true
  46               }
  47             },
  48             'Y4': {
  49               axis: 'Y3'  // use the same y-axis as series Y3
  50             }
  51           }
  52       );
  53
  54       g2 = new Dygraph(
  55           document.getElementById("demodiv_one"),
  56           data,
  57           {
  58             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  59             width: 640,
  60             height: 350,
  61             labelsKMB: true
  62           }
  63       );
  64
  65       function update(el) {
  66         g.updateOptions( { fillGraph: el.checked } );
  67         g2.updateOptions( { fillGraph: el.checked } );
  68       }
  69     </script>
  70
  71     <input type=checkbox id="check" onChange="update(this)"><label for="check"> Fill?</label>
  72 </body>
  73 </html>