Bug fix for dygraph point selection touch event.
[dygraphs.git] / tests / smooth-plots.html
CommitLineData
98bb0633
DV
1<!DOCTYPE html>
2<html>
3 <head>
fd6b8dad 4 <link rel="stylesheet" href="../dist/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:&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>
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
35var functionData = [];
36var vs = [10, 20, 40, 0, 30, 15, 25, 60, 35, 45];
37for (var i = 0; i < 10; i++) {
38 var v = vs[i];
39 functionData.push([i, v, v]);
40}
41
42var g6;
43function 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}
65drawSmoothPlot();
66
67var smoothRangeEl = document.getElementById('smoothing-amount');
68smoothRangeEl.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>