tests/two-axes-vr.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <link rel="stylesheet" href="../dist/dygraph.css">
   5     <title>Multiple y-axes with valueRange</title>
   6     <script type="text/javascript" src="../dist/dygraph.js"></script>
   7
   8   </head>
   9   <body>
  10     <h2>Multiple y-axes with valueRange</h2>
  11     <p>The same data with both different valueRanges. Two-axis old y[40, 70] valueRange:</p>
  12     <div id="demodiv" style="width: 640; height: 350; border: 1px solid black"></div>
  13     <p>Two-axis new valueRange y[40, 80] set:</p>
  14     <div id="demodiv_one" style="width: 640; height: 350; border: 1px solid black"></div>
  15     <p>Two-axis new valueRange y[40, 80] &amp; y2[1e6, 1.2e6] set:</p>
  16     <div id="demodiv_two" style="width: 640; height: 350; border: 1px solid black"></div>
  17     <script type="text/javascript">
  18       var data = [];
  19       for (var i = 1; i <= 100; i++) {
  20         var m = "01", d = i;
  21         if (d > 31) { m = "02"; d -= 31; }
  22         if (m == "02" && d > 28) { m = "03"; d -= 28; }
  23         if (m == "03" && d > 31) { m = "04"; d -= 31; }
  24         if (d < 10) d = "0" + d;
  25         // two series, one with range 1-100, one with range 1-2M
  26         data.push([new Date("2010/" + m + "/" + d),
  27                    i,
  28                    100 - i,
  29                    1e6 * (1 + i * (100 - i) / (50 * 50)),
  30                    1e6 * (2 - i * (100 - i) / (50 * 50))]);
  31       }
  32
  33       g = new Dygraph(
  34           document.getElementById("demodiv"),
  35           data,
  36           {
  37             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  38             series : {
  39               'Y3': { axis: 'y2' },
  40               'Y4': { axis: 'y2' }
  41             },
  42             valueRange: [40, 70],
  43             axes: {
  44               y2: {
  45                 // set axis-related properties here
  46                 labelsKMB: true
  47               }
  48             },
  49             ylabel: 'Primary y-axis',
  50             y2label: 'Secondary y-axis'
  51           }
  52       );
  53
  54       g2 = new Dygraph(
  55           document.getElementById("demodiv_one"),
  56           data,
  57           {
  58             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  59             series : {
  60               'Y3': { axis: 'y2' },
  61               'Y4': { axis: 'y2' }
  62             },
  63             axes: {
  64               y: {
  65                 valueRange: [40, 80]
  66               },
  67               y2: {
  68                 // set axis-related properties here
  69                 labelsKMB: true
  70               }
  71             },
  72             ylabel: 'Primary y-axis',
  73             y2label: 'Secondary y-axis',
  74             axes: {
  75               y: {
  76                 axisLabelWidth: 60
  77               }
  78             }
  79           }
  80       );
  81
  82       g3 = new Dygraph(
  83           document.getElementById("demodiv_two"),
  84           data,
  85           {
  86             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  87             series : {
  88               'Y3': { axis: 'y2' },
  89               'Y4': { axis: 'y2' }
  90             },
  91             axes: {
  92               y: {
  93                 valueRange: [40, 80],
  94                 axisLabelWidth: 60
  95               },
  96               y2: {
  97                 // set axis-related properties here
  98                 valueRange: [1e6, 1.2e6],
  99                 labelsKMB: true
 100               }
 101             },
 102             ylabel: 'Primary y-axis',
 103             y2label: 'Secondary y-axis'
 104           }
 105       );
 106
 107
 108     </script>
 109 </body>
 110 </html>