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

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