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     <div id="demodiv"></div>
  15     <script type="text/javascript">
  16       var data = [];
  17       for (var i = 1; i <= 100; i++) {
  18         var m = "01", d = i;
  19         if (d > 31) { m = "02"; d -= 31; }
  20         if (m == "02" && d > 28) { m = "03"; d -= 28; }
  21         if (m == "03" && d > 31) { m = "04"; d -= 31; }
  22         if (d < 10) d = "0" + d;
  23         // two series, one with range 1-100, one with range 1-2M
  24         data.push([new Date("2010/" + m + "/" + d),
  25                    i,
  26                    100 - i,
  27                    1e6 * (1 + i * (100 - i) / (50 * 50)),
  28                    1e6 * (2 - i * (100 - i) / (50 * 50))]);
  29       }
  30       g = new Dygraph(
  31               document.getElementById("demodiv"),
  32               data,
  33               {
  34                 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  35                 width: 640,
  36                 height: 350,
  37                 'Y3': {
  38                   axis: {
  39                     // set axis-related properties here
  40                     labelsKMB: true
  41                   }
  42                 },
  43                 'Y4': {
  44                   axis: 'Y3'  // use the same y-axis as series Y3
  45                 }
  46               }
  47           );
  48     </script>
  49 </body>
  50 </html>