[dygraphs.git] / tests / logscale.html

<html>
  <head>
    <title>log scale</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../strftime/strftime-min.js"></script>
    <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
    <script type="text/javascript" src="../dygraph-canvas.js"></script>
    <script type="text/javascript" src="../dygraph.js"></script>
  </head>

  <body>
    <h1>Log scale demo</h1>
    <h2>x-axis of dates</h2>
    <div id="div_g" style="width:600px; height:300px;"></div>
    <h2>x-axis of numbers</h2>
    <div id="div_g2" style="width:600px; height:300px;"></div>
      
    <input type="button" value="log scale" onclick="logScale()">
    <input type="button" value="linear scale" onclick="linearScale()">
    <script type="text/javascript">
      function Data() {
        return "Date,A\n" +
        "20101201,5\n"+
        "20101202,10\n"+
        "20101203,100\n"+
        "20101204,250\n"+
        "20101205,1000\n"+
        "20101206,30\n"+
        "20101207,80\n"+
        "20101208,100\n"+
        "20101209,500\n"+
        "";
      }
      var g = new Dygraph(document.getElementById("div_g"),
                      Data, { logscale : true });
      function Data2() {
        return "X,A\n" +
        "1,0.000001\n"+
        "2,10\n"+
        "3,100\n"+
        "4,250\n"+
        "5,1000\n"+
        "6,30\n"+
        "7,80\n"+
        "8,100\n"+
        "9,500\n"+
        "";
      }
      var g2 = new Dygraph(document.getElementById("div_g2"),
                      Data2, { logscale : true });

      function logScale() {
        g.updateOptions({ logscale : true });
        g2.updateOptions({ logscale : true });
      }
      function linearScale() {
        g.updateOptions({ logscale : false });
        g2.updateOptions({ logscale : false });
      }
    </script>

  </body>
</html>
Commit	Line	Data
ff022deb RK	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>
b598af95	14	<h1>Log scale demo</h1>
7d0e7a0d	15	<h2>x-axis of dates</h2>
ff022deb	16	<div id="div_g" style="width:600px; height:300px;"></div>
7d0e7a0d RK	17	<h2>x-axis of numbers</h2>
7d0e7a0d RK	18	<div id="div_g2" style="width:600px; height:300px;"></div>
ff022deb RK	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" +
d59b6f34 RK	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"+
7d0e7a0d	33	"20101209,500\n"+
ff022deb RK	34	"";
	35	}
	36	var g = new Dygraph(document.getElementById("div_g"),
	37	Data, { logscale : true });
7d0e7a0d RK	38	function Data2() {
7d0e7a0d RK	39	return "X,A\n" +
4b467120	40	"1,0.000001\n"+
7d0e7a0d RK	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 });
ff022deb RK	53
	54	function logScale() {
	55	g.updateOptions({ logscale : true });
7d0e7a0d	56	g2.updateOptions({ logscale : true });
ff022deb RK	57	}
ff022deb RK	58	function linearScale() {
0037b2a4	59	g.updateOptions({ logscale : false });
7d0e7a0d	60	g2.updateOptions({ logscale : false });
ff022deb RK	61	}
	62	</script>
	63
	64	</body>
	65	</html>