diff options
Diffstat (limited to 'examples/realtime.html')
-rw-r--r-- | examples/realtime.html | 83 |
1 files changed, 0 insertions, 83 deletions
diff --git a/examples/realtime.html b/examples/realtime.html deleted file mode 100644 index 3b427e1..0000000 --- a/examples/realtime.html +++ /dev/null @@ -1,83 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -<html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <title>Flot Examples</title> - <link href="layout.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> - </head> - <body> - <h1>Flot Examples</h1> - - <div id="placeholder" style="width:600px;height:300px;"></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> - -<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; - var y = prev + Math.random() * 10 - 5; - if (y < 0) - y = 0; - 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; - } - - // setup 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; - if (updateInterval > 2000) - updateInterval = 2000; - $(this).val("" + updateInterval); - } - }); - - // setup plot - var options = { - series: { shadowSize: 0 }, // drawing is faster without shadows - yaxis: { min: 0, max: 100 }, - xaxis: { show: false } - }; - var plot = $.plot($("#placeholder"), [ getRandomData() ], options); - - 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(); -}); -</script> - - </body> -</html> |