tests/straw-broom.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <link rel="stylesheet" href="../css/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>