[dygraphs.git] / tests / dense-fill.html

<!DOCTYPE html>
<html>
  <head>
    <title>dense, filled plots</title>
    <script type="text/javascript" src="../dygraph-dev.js"></script>
    <style>
    .chart {
      width: 800px;
      height: 500px;
    }
    </style>
  </head>
  <body>
  <p>These charts are substantially sped up by <a href="https://github.com/danvk/dygraphs/pull/462/">down-sampling.</a></p>
    <div class="chart" data-opts='{"fillGraph":true}'></div>

    <p>step plot, filled</p>
    <div class="chart" data-opts='{"fillGraph":true,"stepPlot":true}'></div>

    <script>
      var data = [];
      for (var i = 0; i < 10000; i++) {
        data.push([i, Math.sin(i/1000), Math.cos(i/1000)]);
      }

      var chartDivs = document.querySelectorAll('.chart');
      for (var i = 0; i < chartDivs.length; i++) {
        var chartDiv = chartDivs[i];
        var opts = {labels: ['X', 'sin', 'cos'], animatedZooms: true};
        var thisOpts = JSON.parse(chartDiv.getAttribute('data-opts'));
        for (var k in thisOpts) {
          opts[k] = thisOpts[k];
        }

        new Dygraph(chartDivs[i], data, opts);
      }
    </script>
  </body>
</html>
Commit	Line	Data
	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<title>dense, filled plots</title>
	5	<script type="text/javascript" src="../dygraph-dev.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>