tests/two-axes.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</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</h2>
  18     <p>The same data with both one and two y-axes. Two y-axes:</p>
  19     <p>Two y-axes with y as primary axis (default):</p>
  20     <div id="demodiv" style="width: 640; height: 350; border: 1px solid black"></div>
  21     <p>Two y-axes with y2 as primary axis:</p>
  22     <div id="demodiv_y2_primary" style="width: 640; height: 350; border: 1px solid black"></div>
  23     <p>Two y-axes using different grids:</p>
  24     <div id="demodiv_two_grids" style="width: 640; height: 350; border: 1px solid black"></div>
  25     <p>A single y-axis (left):</p>
  26     <div id="demodiv_one" style="width: 640; height: 350; border: 1px solid black"></div>
  27     <p>A single y-axis (right):</p>
  28     <div id="demodiv_one_right" style="width: 640; height: 350; border: 1px solid black"></div>
  29
  30     <script type="text/javascript">
  31       var data = [];
  32       for (var i = 1; i <= 100; i++) {
  33         var m = "01", d = i;
  34         if (d > 31) { m = "02"; d -= 31; }
  35         if (m == "02" && d > 28) { m = "03"; d -= 28; }
  36         if (m == "03" && d > 31) { m = "04"; d -= 31; }
  37         if (d < 10) d = "0" + d;
  38         // two series, one with range 1-100, one with range 1-2M
  39         data.push([new Date("2010/" + m + "/" + d),
  40                    i,
  41                    100 - i,
  42                    1e6 * (1 + i * (100 - i) / (50 * 50)),
  43                    1e6 * (2 - i * (100 - i) / (50 * 50))]);
  44       }
  45
  46       g = new Dygraph(
  47           document.getElementById("demodiv"),
  48           data,
  49           {
  50             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  51             'Y3': {
  52               axis: {
  53               }
  54             },
  55             'Y4': {
  56               axis: 'Y3'  // use the same y-axis as series Y3
  57             },
  58             axes: {
  59               y2: {
  60                 // set axis-related properties here
  61                 labelsKMB: true
  62               }
  63             },
  64             ylabel: 'Primary y-axis',
  65             y2label: 'Secondary y-axis',
  66             yAxisLabelWidth: 60
  67           }
  68       );
  69
  70       g2 = new Dygraph(
  71           document.getElementById("demodiv_y2_primary"),
  72           data,
  73           {
  74             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  75             ylabel: 'Primary y-axis',
  76             y2label: 'Secondary y-axis',
  77             series : {
  78               'Y3': {
  79                 axis: 'y2'
  80               },
  81               'Y4': {
  82                 axis: 'y2'
  83               }
  84             },
  85             axes: {
  86               y: {
  87                 // set axis-related properties here
  88                 drawGrid: false,
  89                 independentTicks: false
  90               },
  91               y2: {
  92                 // set axis-related properties here
  93                 labelsKMB: true,
  94                 drawGrid: true,
  95                 independentTicks: true
  96               }
  97             }
  98           }
  99       );
 100
 101       g3 = new Dygraph(
 102           document.getElementById("demodiv_two_grids"),
 103           data,
 104           {
 105             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
 106             ylabel: 'Primary y-axis',
 107             y2label: 'Secondary y-axis',
 108             series : {
 109               'Y3': {
 110                 axis: 'y2'
 111               },
 112               'Y4': {
 113                 axis: 'y2'
 114               }
 115             },
 116             axes: {
 117               y2: {
 118                 // set axis-related properties here
 119                 labelsKMB: true,
 120                 drawGrid: true,
 121                 independentTicks: true,
 122                 gridLinePattern: [2,2]
 123               }
 124             }
 125           }
 126       );
 127
 128       g4 = new Dygraph(
 129         document.getElementById("demodiv_one"),
 130         data,
 131         {
 132           labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
 133           labelsKMB: true,
 134           ylabel: 'Primary y-axis',
 135           y2label: 'Secondary y-axis',
 136         }
 137       );
 138
 139       g5 = new Dygraph(
 140        document.getElementById("demodiv_one_right"),
 141        data,
 142        {
 143          labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
 144          ylabel: 'Primary y-axis',
 145          y2label: 'Secondary y-axis',
 146           series : {
 147             'Y1': {
 148                axis: 'y2'
 149             },
 150             'Y2': {
 151               axis: 'y2'
 152             },
 153             'Y3': {
 154               axis: 'y2'
 155             },
 156             'Y4': {
 157               axis: 'y2'
 158             }
 159           },
 160           axes: {
 161             y: {
 162               // set axis-related properties here
 163               drawGrid: false,
 164               independentTicks: false
 165             },
 166             y2: {
 167               // set axis-related properties here
 168               labelsKMB: true,
 169               drawGrid: true,
 170               independentTicks: true
 171             }
 172           }
 173         }
 174       );
 175
 176       function update(el) {
 177         g.updateOptions( { fillGraph: el.checked } );
 178         g2.updateOptions( { fillGraph: el.checked } );
 179         g3.updateOptions( { fillGraph: el.checked } );
 180         g4.updateOptions( { fillGraph: el.checked } );
 181         g5.updateOptions( { fillGraph: el.checked } );
 182       }
 183     </script>
 184
 185     <input type=checkbox id="check" onChange="update(this)"><label for="check"> Fill?</label>
 186 </body>
 187 </html>