Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 84 lines (71 sloc) 2.737 kb
a095971 Add example of how to update a chart real-time (using the random walk
olau@iola.dk authored
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>Flot Examples</title>
6 <link href="layout.css" rel="stylesheet" type="text/css">
7 <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
8 <script language="javascript" type="text/javascript" src="../jquery.js"></script>
9 <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
10 </head>
11 <body>
12 <h1>Flot Examples</h1>
13
14 <div id="placeholder" style="width:600px;height:300px;"></div>
15
16 <p>You can update a chart periodically to get a real-time effect
17 by using a timer to insert the new data in the plot and redraw it.</p>
18
19 <p>Time between updates: <input id="updateInterval" type="text" value="" style="text-align: right; width:5em"> milliseconds</p>
20
21 <script type="text/javascript">
22 $(function () {
23 // we use an inline data source in the example, usually data would
24 // be fetched from a server
25 var data = [], totalPoints = 300;
26 function getRandomData() {
27 if (data.length > 0)
28 data = data.slice(1);
29
30 // do a random walk
31 while (data.length < totalPoints) {
32 var prev = data.length > 0 ? data[data.length - 1] : 50;
33 var y = prev + Math.random() * 10 - 5;
34 if (y < 0)
35 y = 0;
36 if (y > 100)
37 y = 100;
38 data.push(y);
39 }
40
41 // zip the generated y values with the x values
42 var res = [];
43 for (var i = 0; i < data.length; ++i)
44 res.push([i, data[i]])
45 return res;
46 }
47
48 // setup control widget
49 var updateInterval = 30;
50 $("#updateInterval").val(updateInterval).change(function () {
51 var v = $(this).val();
52 if (v && !isNaN(+v)) {
53 updateInterval = +v;
54 if (updateInterval < 1)
55 updateInterval = 1;
56 if (updateInterval > 2000)
57 updateInterval = 2000;
58 $(this).val("" + updateInterval);
59 }
60 });
61
62 // setup plot
63 var options = {
64 series: { shadowSize: 0 }, // drawing is faster without shadows
65 yaxis: { min: 0, max: 100 },
66 xaxis: { show: false }
67 };
68 var plot = $.plot($("#placeholder"), [ getRandomData() ], options);
69
70 function update() {
71 plot.setData([ getRandomData() ]);
72 // since the axes don't change, we don't need to call plot.setupGrid()
73 plot.draw();
74
75 setTimeout(update, updateInterval);
76 }
77
78 update();
79 });
80 </script>
81
82 </body>
83 </html>
Something went wrong with that request. Please try again.