summaryrefslogtreecommitdiff
path: root/examples/realtime.html
diff options
context:
space:
mode:
Diffstat (limited to 'examples/realtime.html')
-rw-r--r--examples/realtime.html83
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>