[dygraphs.git] / tests / smooth-plots.html

<!DOCTYPE html>
<html>
  <head>
    <title>Plotters demo</title>
    <script type="text/javascript" src="../dist/dygraph.js"></script>
    <script type="text/javascript" src="../src/extras/smooth-plotter.js"></script>

    <style type="text/css">
      body {
        max-width: 700px;
      }
      div.chart {
        width: 640px;
        height: 320px;
      }
      input[type="range"] {
        width: 400px;
      }
      .smoother {
        margin-left: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Smooth Lines</h2>
    <p>This plotter draws smooth lines between points using bezier curves.</p>
    <p class="smoother">Smoothing:&nbsp;<input type="range" id="smoothing-amount" min=0 max=0.7 step=0.01 value=0.33> <span id="smoothing-param">0.33</span></p>
    <div id="smooth-line" class="chart"></div>

    <p>View source to see how this works. You'll have to source <code>extras/smooth-plotter.js</code> in addition to dygraphs to get this feature. See the <a href="https://github.com/danvk/dygraphs/pull/469">pull request</a> that introduced this plotter to learn more about how it smooths your curves.</p>

<script type="text/javascript">
// Smooth line plotter
var functionData = [];
var vs = [10, 20, 40, 0, 30, 15, 25, 60, 35, 45];
for (var i = 0; i < 10; i++) {
  var v = vs[i];
  functionData.push([i, v, v]);
}

var g6;
function drawSmoothPlot() {
  g6 = new Dygraph(document.getElementById('smooth-line'),
                   functionData,
                   {
                     labels: ['Year', 'Straight', 'Smoothed'],
                     series: {
                       Straight: {
                         color: 'rgba(0,0,0,0.33)',
                         strokeWidth: 2,
                         drawPoints: true,
                         pointSize: 3
                       },
                       Smoothed: {
                         plotter: smoothPlotter,
                         color: 'red',
                         strokeWidth: 2
                       }
                     },
                     legend: 'always',
                     gridLineColor: '#ddd'
                   });
}
drawSmoothPlot();

var smoothRangeEl = document.getElementById('smoothing-amount');
smoothRangeEl.addEventListener('input', function() {
  var param = parseFloat(smoothRangeEl.value);
  smoothPlotter.smoothing = param;
  document.getElementById('smoothing-param').innerHTML = param;
  drawSmoothPlot();
});
</script>
</body>
</html>
Commit	Line	Data
	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<title>Plotters demo</title>
	5	<script type="text/javascript" src="../dist/dygraph.js"></script>
	6	<script type="text/javascript" src="../src/extras/smooth-plotter.js"></script>
	7
	8	<style type="text/css">
	9	body {
	10	max-width: 700px;
	11	}
	12	div.chart {
	13	width: 640px;
	14	height: 320px;
	15	}
	16	input[type="range"] {
	17	width: 400px;
	18	}
	19	.smoother {
	20	margin-left: 50px;
	21	}
	22	</style>
	23	</head>
	24	<body>
	25	<h2>Smooth Lines</h2>
	26	<p>This plotter draws smooth lines between points using bezier curves.</p>
	27	<p class="smoother">Smoothing: <input type="range" id="smoothing-amount" min=0 max=0.7 step=0.01 value=0.33> <span id="smoothing-param">0.33</span></p>
	28	<div id="smooth-line" class="chart"></div>
	29
	30	<p>View source to see how this works. You'll have to source <code>extras/smooth-plotter.js</code> in addition to dygraphs to get this feature. See the <a href="https://github.com/danvk/dygraphs/pull/469">pull request</a> that introduced this plotter to learn more about how it smooths your curves.</p>
	31
	32	<script type="text/javascript">
	33	// Smooth line plotter
	34	var functionData = [];
	35	var vs = [10, 20, 40, 0, 30, 15, 25, 60, 35, 45];
	36	for (var i = 0; i < 10; i++) {
	37	var v = vs[i];
	38	functionData.push([i, v, v]);
	39	}
	40
	41	var g6;
	42	function drawSmoothPlot() {
	43	g6 = new Dygraph(document.getElementById('smooth-line'),
	44	functionData,
	45	{
	46	labels: ['Year', 'Straight', 'Smoothed'],
	47	series: {
	48	Straight: {
	49	color: 'rgba(0,0,0,0.33)',
	50	strokeWidth: 2,
	51	drawPoints: true,
	52	pointSize: 3
	53	},
	54	Smoothed: {
	55	plotter: smoothPlotter,
	56	color: 'red',
	57	strokeWidth: 2
	58	}
	59	},
	60	legend: 'always',
	61	gridLineColor: '#ddd'
	62	});
	63	}
	64	drawSmoothPlot();
	65
	66	var smoothRangeEl = document.getElementById('smoothing-amount');
	67	smoothRangeEl.addEventListener('input', function() {
	68	var param = parseFloat(smoothRangeEl.value);
	69	smoothPlotter.smoothing = param;
	70	document.getElementById('smoothing-param').innerHTML = param;
	71	drawSmoothPlot();
	72	});
	73	</script>
	74	</body>
	75	</html>