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

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="../css/dygraph.css">
    <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
98bb0633 DV	1	<!DOCTYPE html>
	2	<html>
	3	<head>
93a5bb4c	4	<link rel="stylesheet" href="../css/dygraph.css">
98bb0633	5	<title>Plotters demo</title>
fbd6834a	6	<script type="text/javascript" src="../dist/dygraph.js"></script>
2b66af4f	7	<script type="text/javascript" src="../src/extras/smooth-plotter.js"></script>
98bb0633 DV	8
	9	<style type="text/css">
	10	body {
	11	max-width: 700px;
	12	}
	13	div.chart {
	14	width: 640px;
	15	height: 320px;
	16	}
	17	input[type="range"] {
	18	width: 400px;
	19	}
	20	.smoother {
	21	margin-left: 50px;
	22	}
	23	</style>
	24	</head>
	25	<body>
	26	<h2>Smooth Lines</h2>
	27	<p>This plotter draws smooth lines between points using bezier curves.</p>
	28	<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>
	29	<div id="smooth-line" class="chart"></div>
	30
	31	<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>
	32
	33	<script type="text/javascript">
	34	// Smooth line plotter
	35	var functionData = [];
	36	var vs = [10, 20, 40, 0, 30, 15, 25, 60, 35, 45];
	37	for (var i = 0; i < 10; i++) {
	38	var v = vs[i];
	39	functionData.push([i, v, v]);
	40	}
	41
	42	var g6;
	43	function drawSmoothPlot() {
	44	g6 = new Dygraph(document.getElementById('smooth-line'),
	45	functionData,
	46	{
	47	labels: ['Year', 'Straight', 'Smoothed'],
	48	series: {
	49	Straight: {
	50	color: 'rgba(0,0,0,0.33)',
	51	strokeWidth: 2,
	52	drawPoints: true,
	53	pointSize: 3
	54	},
	55	Smoothed: {
	56	plotter: smoothPlotter,
	57	color: 'red',
	58	strokeWidth: 2
	59	}
	60	},
	61	legend: 'always',
	62	gridLineColor: '#ddd'
	63	});
	64	}
	65	drawSmoothPlot();
	66
	67	var smoothRangeEl = document.getElementById('smoothing-amount');
	68	smoothRangeEl.addEventListener('input', function() {
	69	var param = parseFloat(smoothRangeEl.value);
	70	smoothPlotter.smoothing = param;
	71	document.getElementById('smoothing-param').innerHTML = param;
72	drawSmoothPlot();
73	});
74	</script>
75	</body>
76	</html>