tests/two-axes-vr.html

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