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             series: {
  52               'Y3': {
  53                 axis: 'y2'
  54               },
  55               'Y4': {
  56                 axis: 'y2'
  57               },
  58             },
  59             axes: {
  60               y2: {
  61                 // set axis-related properties here
  62                 labelsKMB: true
  63               }
  64             },
  65             ylabel: 'Primary y-axis',
  66             y2label: 'Secondary y-axis',
  67             yAxisLabelWidth: 60
  68           }
  69       );
  70
  71       g2 = new Dygraph(
  72           document.getElementById("demodiv_y2_primary"),
  73           data,
  74           {
  75             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  76             ylabel: 'Primary y-axis',
  77             y2label: 'Secondary y-axis',
  78             series : {
  79               'Y3': {
  80                 axis: 'y2'
  81               },
  82               'Y4': {
  83                 axis: 'y2'
  84               }
  85             },
  86             axes: {
  87               y: {
  88                 // set axis-related properties here
  89                 drawGrid: false,
  90                 independentTicks: false
  91               },
  92               y2: {
  93                 // set axis-related properties here
  94                 labelsKMB: true,
  95                 drawGrid: true,
  96                 independentTicks: true
  97               }
  98             }
  99           }
 100       );
 101
 102       g3 = new Dygraph(
 103           document.getElementById("demodiv_two_grids"),
 104           data,
 105           {
 106             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
 107             ylabel: 'Primary y-axis',
 108             y2label: 'Secondary y-axis',
 109             series : {
 110               'Y3': {
 111                 axis: 'y2'
 112               },
 113               'Y4': {
 114                 axis: 'y2'
 115               }
 116             },
 117             axes: {
 118               y2: {
 119                 // set axis-related properties here
 120                 labelsKMB: true,
 121                 drawGrid: true,
 122                 independentTicks: true,
 123                 gridLinePattern: [2,2]
 124               }
 125             }
 126           }
 127       );
 128
 129       g4 = new Dygraph(
 130         document.getElementById("demodiv_one"),
 131         data,
 132         {
 133           labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
 134           labelsKMB: true,
 135           ylabel: 'Primary y-axis',
 136           y2label: 'Secondary y-axis',
 137         }
 138       );
 139
 140       g5 = new Dygraph(
 141        document.getElementById("demodiv_one_right"),
 142        data,
 143        {
 144          labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
 145          ylabel: 'Primary y-axis',
 146          y2label: 'Secondary y-axis',
 147           series : {
 148             'Y1': {
 149                axis: 'y2'
 150             },
 151             'Y2': {
 152               axis: 'y2'
 153             },
 154             'Y3': {
 155               axis: 'y2'
 156             },
 157             'Y4': {
 158               axis: 'y2'
 159             }
 160           },
 161           axes: {
 162             y: {
 163               // set axis-related properties here
 164               drawGrid: false,
 165               independentTicks: false
 166             },
 167             y2: {
 168               // set axis-related properties here
 169               labelsKMB: true,
 170               drawGrid: true,
 171               independentTicks: true
 172             }
 173           }
 174         }
 175       );
 176
 177       function update(el) {
 178         g.updateOptions( { fillGraph: el.checked } );
 179         g2.updateOptions( { fillGraph: el.checked } );
 180         g3.updateOptions( { fillGraph: el.checked } );
 181         g4.updateOptions( { fillGraph: el.checked } );
 182         g5.updateOptions( { fillGraph: el.checked } );
 183       }
 184     </script>
 185
 186     <input type=checkbox id="check" onChange="update(this)"><label for="check"> Fill?</label>
 187 </body>
 188 </html>