tests/logscale.html

   1 <html>
   2   <head>
   3     <title>log scale</title>
   4     <!--[if IE]>
   5     <script type="text/javascript" src="../excanvas.js"></script>
   6     <![endif]-->
   7     <script type="text/javascript" src="../strftime/strftime-min.js"></script>
   8     <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
   9     <script type="text/javascript" src="../dygraph-canvas.js"></script>
  10     <script type="text/javascript" src="../dygraph.js"></script>
  11   </head>
  12
  13   <body>
  14     <h1>Log scale demo - work in progress</h1>
  15     <h2>x-axis of dates</h2>
  16     <div id="div_g" style="width:600px; height:300px;"></div>
  17     <h2>x-axis of numbers</h2>
  18     <div id="div_g2" style="width:600px; height:300px;"></div>
  19
  20     <input type="button" value="log scale" onclick="logScale()">
  21     <input type="button" value="linear scale" onclick="linearScale()">
  22     <script type="text/javascript">
  23       function Data() {
  24         return "Date,A\n" +
  25         "20101201,5\n"+
  26         "20101202,10\n"+
  27         "20101203,100\n"+
  28         "20101204,250\n"+
  29         "20101205,1000\n"+
  30         "20101206,30\n"+
  31         "20101207,80\n"+
  32         "20101208,100\n"+
  33         "20101209,500\n"+
  34         "";
  35       }
  36       var g = new Dygraph(document.getElementById("div_g"),
  37                       Data, { logscale : true });
  38       function Data2() {
  39         return "X,A\n" +
  40         "1,0.000001\n"+
  41         "2,10\n"+
  42         "3,100\n"+
  43         "4,250\n"+
  44         "5,1000\n"+
  45         "6,30\n"+
  46         "7,80\n"+
  47         "8,100\n"+
  48         "9,500\n"+
  49         "";
  50       }
  51       var g2 = new Dygraph(document.getElementById("div_g2"),
  52                       Data2, { logscale : true });
  53
  54       function logScale() {
  55         g.updateOptions({ logscale : true });
  56         g2.updateOptions({ logscale : true });
  57       }
  58       function linearScale() {
  59         g.updateOptions({ logscale : false });
  60         g2.updateOptions({ logscale : false });
  61       }
  62     </script>
  63
  64   </body>
  65 </html>