diff options
| author | Igor Sfiligoi <isfiligoi@ucsd.edu> | 2013-11-07 12:50:35 -0500 |
|---|---|---|
| committer | Igor Sfiligoi <isfiligoi@ucsd.edu> | 2013-11-07 12:50:35 -0500 |
| commit | 680241cbb652ee29088baa6cde2da02002e5ec47 (patch) | |
| tree | 3f0c17df67c0ab0e91542ae75fff175750581859 /examples/realtime/index.html | |
| parent | f361d0498d284c6c7f3f366bf88e49b93e1245f0 (diff) | |
Diffstat (limited to 'examples/realtime/index.html')
| -rw-r--r-- | examples/realtime/index.html | 122 |
1 files changed, 122 insertions, 0 deletions
diff --git a/examples/realtime/index.html b/examples/realtime/index.html new file mode 100644 index 0000000..4333aca --- /dev/null +++ b/examples/realtime/index.html @@ -0,0 +1,122 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Flot Examples: Real-time updates</title> + <link href="../examples.css" rel="stylesheet" type="text/css"> + <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]--> + <script language="javascript" type="text/javascript" src="../../jquery.js"></script> + <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script> + <script type="text/javascript"> + + $(function() { + + // We use an inline data source in the example, usually data would + // be fetched from a server + + var data = [], + totalPoints = 300; + + function getRandomData() { + + if (data.length > 0) + data = data.slice(1); + + // Do a random walk + + while (data.length < totalPoints) { + + var prev = data.length > 0 ? data[data.length - 1] : 50, + y = prev + Math.random() * 10 - 5; + + if (y < 0) { + y = 0; + } else if (y > 100) { + y = 100; + } + + data.push(y); + } + + // Zip the generated y values with the x values + + var res = []; + for (var i = 0; i < data.length; ++i) { + res.push([i, data[i]]) + } + + return res; + } + + // Set up the control widget + + var updateInterval = 30; + $("#updateInterval").val(updateInterval).change(function () { + var v = $(this).val(); + if (v && !isNaN(+v)) { + updateInterval = +v; + if (updateInterval < 1) { + updateInterval = 1; + } else if (updateInterval > 2000) { + updateInterval = 2000; + } + $(this).val("" + updateInterval); + } + }); + + var plot = $.plot("#placeholder", [ getRandomData() ], { + series: { + shadowSize: 0 // Drawing is faster without shadows + }, + yaxis: { + min: 0, + max: 100 + }, + xaxis: { + show: false + } + }); + + function update() { + + plot.setData([getRandomData()]); + + // Since the axes don't change, we don't need to call plot.setupGrid() + + plot.draw(); + setTimeout(update, updateInterval); + } + + update(); + + // Add the Flot version string to the footer + + $("#footer").prepend("Flot " + $.plot.version + " – "); + }); + + </script> +</head> +<body> + + <div id="header"> + <h2>Real-time updates</h2> + </div> + + <div id="content"> + + <div class="demo-container"> + <div id="placeholder" class="demo-placeholder"></div> + </div> + + <p>You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it.</p> + + <p>Time between updates: <input id="updateInterval" type="text" value="" style="text-align: right; width:5em"> milliseconds</p> + + </div> + + <div id="footer"> + Copyright © 2007 - 2013 IOLA and Ole Laursen + </div> + +</body> +</html> |