tests/two-axes.html

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