tests/straw-broom.html

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