tests/two-axes.html

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