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     <div id="div_g" style="width:600px; height:300px;"></div>
  16
  17     <input type="button" value="log scale" onclick="logScale()">
  18     <input type="button" value="linear scale" onclick="linearScale()">
  19     <script type="text/javascript">
  20       function Data() {
  21         return "Date,A\n" +
  22         "20101201,1\n"+
  23         "20101202,5\n"+
  24         "20101203,10\n"+
  25         "20101204,100\n"+
  26         "20101205,250\n"+
  27         "20101206,1000\n"+
  28         "20101207,30\n"+
  29         "20101208,80\n"+
  30         "20101209,100\n"+
  31         "20101210,250\n"+
  32         "";
  33       }
  34       var g = new Dygraph(document.getElementById("div_g"),
  35                       Data, { logscale : true });
  36       Dygraph.addEvent(g.canvas_, 'mousemove', function(e) {
  37         var y = Dygraph.pageY(e) - Dygraph.findPosY(g.canvas_);
  38         console.log(y, g.toDataYCoord(y));
  39       });
  40
  41       function logScale() {
  42         g.updateOptions({ logscale : true });
  43       }
  44       function linearScale() {
  45         g.updateOptions({ logscale : null });
  46       }
  47     </script>
  48
  49   </body>
  50 </html>