summaryrefslogtreecommitdiff
path: root/examples/realtime/index.html
diff options
context:
space:
mode:
authorIgor Sfiligoi <isfiligoi@ucsd.edu>2013-11-07 12:50:35 -0500
committerIgor Sfiligoi <isfiligoi@ucsd.edu>2013-11-07 12:50:35 -0500
commit680241cbb652ee29088baa6cde2da02002e5ec47 (patch)
tree3f0c17df67c0ab0e91542ae75fff175750581859 /examples/realtime/index.html
parentf361d0498d284c6c7f3f366bf88e49b93e1245f0 (diff)
flot-0.8.1-tooltip-0.6.2HEADmasterflot-0.8
Diffstat (limited to 'examples/realtime/index.html')
-rw-r--r--examples/realtime/index.html122
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 + " &ndash; ");
+ });
+
+ </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 &copy; 2007 - 2013 IOLA and Ole Laursen
+ </div>
+
+</body>
+</html>