tests/logscale.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
   5     <title>log scale</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
  17   <body>
  18     <center>
  19       <input id='ylog' type="button" value="y log scale" onclick="setLogScale('y', true)">
  20       <input id='ylinear' type="button" value="y linear scale" onclick="setLogScale('y', false)">
  21       <input id='xlog' type="button" value="x log scale" onclick="setLogScale('x', true)">
  22       <input id='xlinear' type="button" value="x linear scale" onclick="setLogScale('x', false)">
  23       <div>Current scales: <span id="description"></span></div>
  24     </center>
  25
  26     <h2>X axis of dates</h2>
  27     <div id="div_g0" style="width:600px; height:300px;"></div>
  28     <div style="font-style: italic; margin-left: 40px;">(Note: when the x-axis is dates, logscale is ignored on that axis.)</div>
  29
  30     <h2>X axis of numbers</h2>
  31     <div id="div_g1" style="width:600px; height:300px;"></div>
  32
  33     <script type="text/javascript">
  34       Dygraph.Interaction.DEBUG = true;
  35
  36       function data0() {
  37         return "Date,A\n" +
  38         "20101201,5\n"+
  39         "20101202,10\n"+
  40         "20101203,-1\n"+
  41         "20101204,250\n"+
  42         "20101205,1000\n"+
  43         "20101206,30\n"+
  44         "20101207,80\n"+
  45         "20101208,100\n"+
  46         "20101209,500\n"+
  47         "";
  48       };
  49       function data1() {
  50         return "X,A\n" +
  51         "1,0.000001\n"+
  52         "2,10\n"+
  53         "3,100\n"+
  54         "4,250\n"+
  55         "5,1000\n"+
  56         "6,30\n"+
  57         "7,0\n"+
  58         "8,100\n"+
  59         "9,500\n"+
  60         "101,500\n"+
  61         "30,500\n"+
  62         "50,400\n"+
  63         "100,300\n"+
  64         "300,200\n"+
  65         "1000,100\n"+
  66         "";
  67       };
  68
  69       var g0 = new Dygraph(document.getElementById("div_g0"), data0, {});
  70       var g1 = new Dygraph(document.getElementById("div_g1"), data1, {});
  71       var graphs = [ g0, g1 ];
  72       var scales = { x : false, y : false };
  73       function setLogScale(axis, val) {
  74         if (axis === 'y') {
  75           for (var idx = 0; idx < graphs.length; idx++) {
  76             graphs[idx].updateOptions({ logscale: val });
  77           }
  78         } else {
  79           for (var idx = 0; idx < graphs.length; idx++) {
  80             graphs[idx].updateOptions({ axes : { x : {  logscale : val } } });
  81           }
  82         }
  83         scales[axis] = val;
  84         var text = "y: " + (scales.y ? "log" : "linear") + ", x: " + (scales.x ? "log" : "linear");
  85         document.getElementById("description").innerText = text;
  86       }
  87
  88       setLogScale('y', true);
  89     </script>
  90
  91   </body>
  92 </html>