tests/logscale.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>log scale</title>

    <link rel="stylesheet" type="text/css" href="../dist/dygraph.css" />
    <link rel="stylesheet" type="text/css" href="../common/vextlnk.css" />
    <script type="text/javascript" src="../dist/dygraph.js"></script>
  </head>
  <body>
    <center>
      <input id='ylog' type="button" value="y log scale" onclick="setLogScale('y', true)">
      <input id='ylinear' type="button" value="y linear scale" onclick="setLogScale('y', false)">
      <input id='xlog' type="button" value="x log scale" onclick="setLogScale('x', true)">
      <input id='xlinear' type="button" value="x linear scale" onclick="setLogScale('x', false)">
      <div>Current scales: <span id="description"></span></div>
    </center>

    <h2>X axis of dates</h2>
    <div id="div_g0" style="width:600px; height:300px;"></div>
    <div style="font-style: italic; margin-left: 40px;">(Note: when the x-axis is dates, logscale is ignored on that axis.)</div>

    <h2>X axis of numbers</h2>
    <div id="div_g1" style="width:600px; height:300px;"></div>

    <script type="text/javascript"><!--//--><![CDATA[//><!--
    Dygraph.onDOMready(function onDOMready() {
      function data0() {
        return "Date,A\n" +
        "2010-12-01,5\n"+
        "2010-12-02,10\n"+
        "2010-12-03,-1\n"+
        "2010-12-04,250\n"+
        "2010-12-05,1000\n"+
        "2010-12-06,30\n"+
        "2010-12-07,80\n"+
        "2010-12-08,100\n"+
        "2010-12-09,500\n"+
        "";
      };
      function data1() {
        return "X,A\n" +
        "1,0.000001\n"+
        "2,10\n"+
        "3,100\n"+
        "4,250\n"+
        "5,1000\n"+
        "6,30\n"+
        "7,0\n"+
        "8,100\n"+
        "9,500\n"+
        "30,500\n"+
        "50,400\n"+
        "100,300\n"+
        "101,500\n"+
        "300,200\n"+
        "1000,100\n"+
        "";
      };

      var g0 = new Dygraph(document.getElementById("div_g0"), data0, {});
      var g1 = new Dygraph(document.getElementById("div_g1"), data1, {});
      var graphs = [ g0, g1 ];
      var scales = { x : false, y : false };
      setLogScale = function setLogScale(axis, val) {
        if (axis === 'y') {
          for (var idx = 0; idx < graphs.length; idx++) {
            graphs[idx].updateOptions({ logscale: val });
          }
        } else {
          for (var idx = 0; idx < graphs.length; idx++) {
            graphs[idx].updateOptions({ axes : { x : {  logscale : val } } });
          }
        }
        scales[axis] = val;
        var text = "y: " + (scales.y ? "log" : "linear") + ", x: " + (scales.x ? "log" : "linear");
        document.getElementById("description").innerText = text;
      }

      setLogScale('y', true);
    });
    //--><!]]></script>
  </body>
</html>