4 <meta http-equiv=
"X-UA-Compatible" content=
"IE=EmulateIE7; IE=EmulateIE9">
5 <title>Plotters demo
</title>
7 <script type=
"text/javascript" src=
"../excanvas.js"></script>
9 <script type=
"text/javascript" src=
"../dygraph-dev.js"></script>
10 <script type=
"text/javascript" src=
"../extras/smooth-plotter.js"></script>
12 <style type=
"text/css">
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>
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>
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++) {
42 functionData.push([i, v, v]);
46 function drawSmoothPlot() {
47 g6 = new Dygraph(document.getElementById('smooth-line'),
50 labels: ['Year', 'Straight', 'Smoothed'],
53 color: 'rgba(
0,
0,
0,
0.33)',
59 plotter: smoothPlotter,
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;