tests/dense-fill.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>dense, filled plots</title>
   5     <script type="text/javascript" src="../dist/dygraph.js"></script>
   6     <style>
   7     .chart {
   8       width: 800px;
   9       height: 500px;
  10     }
  11     </style>
  12   </head>
  13   <body>
  14   <p>These charts are substantially sped up by <a href="https://github.com/danvk/dygraphs/pull/462/">down-sampling.</a></p>
  15     <div class="chart" data-opts='{"fillGraph":true}'></div>
  16
  17     <p>step plot, filled</p>
  18     <div class="chart" data-opts='{"fillGraph":true,"stepPlot":true}'></div>
  19
  20     <script>
  21       var data = [];
  22       for (var i = 0; i < 10000; i++) {
  23         data.push([i, Math.sin(i/1000), Math.cos(i/1000)]);
  24       }
  25
  26       var chartDivs = document.querySelectorAll('.chart');
  27       for (var i = 0; i < chartDivs.length; i++) {
  28         var chartDiv = chartDivs[i];
  29         var opts = {labels: ['X', 'sin', 'cos'], animatedZooms: true};
  30         var thisOpts = JSON.parse(chartDiv.getAttribute('data-opts'));
  31         for (var k in thisOpts) {
  32           opts[k] = thisOpts[k];
  33         }
  34
  35         new Dygraph(chartDivs[i], data, opts);
  36       }
  37     </script>
  38   </body>
  39 </html>