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