1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Plotters demo</title>
<link rel="stylesheet" type="text/css" href="../dist/dygraph.css" />
<link rel="stylesheet" type="text/css" href="../common/vextlnk.css" />
<script type="text/javascript" src="../dist/dygraph.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: <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. (However, for better browser compatibility, use the
file from <tt>src-es5/extras/</tt> (<tt>dist/extras/</tt>) instead.) See the <a
href="../smooth-plotter.md">comment from the pull request that introduced this plotter</a> (<a
href="https://github.com/danvk/dygraphs/blob/master/docs/smooth-plotter.md">online</a>) to
learn more about how it smooths your curves.</p>
<script type="text/javascript"><!--//--><![CDATA[//><!--
Dygraph.onDOMready(function onDOMready() {
// 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>
|
