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

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