[dygraphs.git] / tests / straw-broom.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="../dist/dygraph.css">
    <title>Straw broom charts demo</title>
    <script type="text/javascript" src="../dist/dygraph.js"></script>

    <script type="text/javascript" src="../src/extras/synchronizer.js"></script>
    <script type="text/javascript" src="../src/extras/rebase.js"></script>

    <script type="text/javascript" src="data.js"></script>

    <style type="text/css">
      #g1, #g2, #g3 {
        width: 500px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <caption>Hover, click and zoom to test the rebase:</caption>
      </thead>
      <tbody>
        <tr>
          <td>
            <h2>Value:</h2>
            <div id="g1"></div>
          </td>
          <td>
            <h2>Percent:</h2>
            <div id="g2"></div>
          </td>
        </tr>
        <tr>
          <td>
            <h2>None:</h2>
            <div id="g3"></div>
          </td>
        </tr>
      </tbody>
    </table>

    <script type="text/javascript">
      var gs = [];
      var rebaseOpts = [100, 'percent', null];
      for (var i = 1; i <= 3; i++) {
        var baseOpt = rebaseOpts.shift();
        var rebase = new Dygraph.Plugins.Rebase(baseOpt);
        gs.push(
          new Dygraph(
            document.getElementById("g" + i),
            stockData,
            { plugins: [rebase] }
          )
        );
      }
      Dygraph.synchronize(gs, { range: false });
    </script>
  </body>
</html>
Commit	Line	Data
	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<link rel="stylesheet" href="../dist/dygraph.css">
	5	<title>Straw broom charts demo</title>
	6	<script type="text/javascript" src="../dist/dygraph.js"></script>
	7
	8	<script type="text/javascript" src="../src/extras/synchronizer.js"></script>
	9	<script type="text/javascript" src="../src/extras/rebase.js"></script>
	10
	11	<script type="text/javascript" src="data.js"></script>
	12
	13	<style type="text/css">
	14	#g1, #g2, #g3 {
	15	width: 500px;
	16	height: 300px;
	17	}
	18	</style>
	19	</head>
	20	<body>
	21	<table>
	22	<thead>
	23	<caption>Hover, click and zoom to test the rebase:</caption>
	24	</thead>
	25	<tbody>
	26	<tr>
	27	<td>
	28	<h2>Value:</h2>
	29	<div id="g1"></div>
	30	</td>
	31	<td>
	32	<h2>Percent:</h2>
	33	<div id="g2"></div>
	34	</td>
	35	</tr>
	36	<tr>
	37	<td>
	38	<h2>None:</h2>
	39	<div id="g3"></div>
	40	</td>
	41	</tr>
	42	</tbody>
	43	</table>
	44
	45	<script type="text/javascript">
	46	var gs = [];
	47	var rebaseOpts = [100, 'percent', null];
	48	for (var i = 1; i <= 3; i++) {
	49	var baseOpt = rebaseOpts.shift();
	50	var rebase = new Dygraph.Plugins.Rebase(baseOpt);
	51	gs.push(
	52	new Dygraph(
	53	document.getElementById("g" + i),
	54	stockData,
	55	{ plugins: [rebase] }
	56	)
	57	);
	58	}
	59	Dygraph.synchronize(gs, { range: false });
	60	</script>
	61	</body>
	62	</html>