[dygraphs.git] / tests / logscale.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>log scale</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.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">
      Dygraph.Interaction.DEBUG = true;

      function data0() {
        return "Date,A\n" +
        "20101201,5\n"+
        "20101202,10\n"+
        "20101203,-1\n"+
        "20101204,250\n"+
        "20101205,1000\n"+
        "20101206,30\n"+
        "20101207,80\n"+
        "20101208,100\n"+
        "20101209,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"+
        "101,500\n"+
        "30,500\n"+
        "50,400\n"+
        "100,300\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 };
      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>
Commit	Line	Data
54425b14	1	<!DOCTYPE html>
ff022deb RK	2	<html>
ff022deb RK	3	<head>
10494b48	4	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
ff022deb RK	5	<title>log scale</title>
	6	<!--[if IE]>
	7	<script type="text/javascript" src="../excanvas.js"></script>
	8	<![endif]-->
7e5ddc94 DV	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
ff022deb RK	15	</head>
	16
	17	<body>
2cae510b	18	<center>
5b9b2142 RK	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>
2cae510b RK	24	</center>
2cae510b RK	25
93f26a2d	26	<h2>X axis of dates</h2>
2cae510b	27	<div id="div_g0" style="width:600px; height:300px;"></div>
5b9b2142	28	<div style="font-style: italic; margin-left: 40px;">(Note: when the x-axis is dates, logscale is ignored on that axis.)</div>
2cae510b	29
93f26a2d	30	<h2>X axis of numbers</h2>
2cae510b RK	31	<div id="div_g1" style="width:600px; height:300px;"></div>
2cae510b RK	32
ff022deb	33	<script type="text/javascript">
5b9b2142 RK	34	Dygraph.Interaction.DEBUG = true;
5b9b2142 RK	35
2cae510b	36	function data0() {
ff022deb	37	return "Date,A\n" +
d59b6f34 RK	38	"20101201,5\n"+
d59b6f34 RK	39	"20101202,10\n"+
2cae510b	40	"20101203,-1\n"+
d59b6f34 RK	41	"20101204,250\n"+
	42	"20101205,1000\n"+
	43	"20101206,30\n"+
	44	"20101207,80\n"+
	45	"20101208,100\n"+
7d0e7a0d	46	"20101209,500\n"+
ff022deb	47	"";
2cae510b RK	48	};
2cae510b RK	49	function data1() {
7d0e7a0d	50	return "X,A\n" +
4b467120	51	"1,0.000001\n"+
7d0e7a0d RK	52	"2,10\n"+
	53	"3,100\n"+
	54	"4,250\n"+
	55	"5,1000\n"+
	56	"6,30\n"+
9d8685cc	57	"7,0\n"+
7d0e7a0d RK	58	"8,100\n"+
7d0e7a0d RK	59	"9,500\n"+
44462ba3	60	"101,500\n"+
5b9b2142 RK	61	"30,500\n"+
	62	"50,400\n"+
	63	"100,300\n"+
	64	"300,200\n"+
	65	"1000,100\n"+
7d0e7a0d	66	"";
2cae510b	67	};
ff022deb	68
5b9b2142 RK	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;
ff022deb	86	}
5b9b2142 RK	87
5b9b2142 RK	88	setLogScale('y', true);
ff022deb RK	89	</script>
	90
	91	</body>
	92	</html>