Add example of how to update a chart real-time (using the random walk

data generation idea from Doug Suerich's test case on issue 387) git-svn-id: https://flot.googlecode.com/svn/trunk@320 1e0a6537-2640-0410-bfb7-f154510ff394

Add example of how to update a chart real-time (using the random walk
data generation idea from Doug Suerich's test case on issue 387) git-svn-id: https://flot.googlecode.com/svn/trunk@320 1e0a6537-2640-0410-bfb7-f154510ff394
a095971b · olau@iola.dk · 477b6147 · a095971b · a095971b · a095971b
Commit a095971b authored Mar 17, 2011 by olau@iola.dk
Hide whitespace changes
Inline Side-by-side

Showing with 85 additions and 1 deletion

NEWS.txt NEWS.txt +1 -0

index.html examples/index.html +1 -1

realtime.html examples/realtime.html +83 -0

No files found.
--- a/NEWS.txt
+++ b/NEWS.txt
@@ -101,6 +101,7 @@ Changes:
  and hopefully makes replotting faster for those who are using $.plot
  instead of .setData()/.draw(). Also update jQuery to 1.5.1 to
  prevent IE leaks fixed in jQuery.
+- New real-time line chart example.

 - New hooks: drawSeries, shutdown


--- a/examples/index.html
+++ b/examples/index.html
@@ -14,7 +14,7 @@
      <li><a href="basic.html">Basic example</a></li>
      <li><a href="graph-types.html">Different graph types</a></li>
      <li><a href="setting-options.html">Setting various options</a> and <a href="annotating.html">annotating a chart</a></li>
-      <li><a href="ajax.html">Updating graphs with AJAX</a></li>
+      <li><a href="ajax.html">Updating graphs with AJAX</a> and <a href="realtime.html">real-time updates</a></li>
    </ul>

    <p>Being interactive:</p>

--- a/examples/realtime.html
+++ b/examples/realtime.html
+<!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>