Merge branch 'master' of https://github.com/kberg/dygraphs
[dygraphs.git] / tests / dynamic-update.html
CommitLineData
54425b14 1<!DOCTYPE html>
5e50289f
DV
2<html>
3 <head>
10494b48 4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
5e50289f
DV
5 <title>Live random data</title>
6 <!--[if IE]>
a2b2c3a1 7 <script type="text/javascript" src="../excanvas.js"></script>
5e50289f 8 <![endif]-->
67b65269
DV
9 <script type="text/javascript" src="../strftime/strftime-min.js"></script>
10 <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
5e50289f
DV
11 <script type="text/javascript" src="../dygraph-canvas.js"></script>
12 <script type="text/javascript" src="../dygraph.js"></script>
13 </head>
14 <body>
970d5441
DV
15 <h3 style="width:800px; text-align: center;">Live random data</h3>
16 <div id="div_g" style="width:800px; height:400px;"></div>
5e50289f
DV
17
18 <script type="text/javascript">
19 var data = [];
20 var t = new Date();
21 for (var i = 10; i >= 0; i--) {
22 var x = new Date(t.getTime() - i * 1000);
23 data.push([x, Math.random()]);
24 }
25
26 var g = new Dygraph(document.getElementById("div_g"), data,
27 {
28 drawPoints: true,
29 showRoller: true,
30 valueRange: [0.0, 1.2],
31 labels: ['Time', 'Random']
32 });
33 setInterval(function() {
34 var x = new Date(); // current time
35 var y = Math.random();
36 data.push([x, y]);
37 g.updateOptions( { 'file': data } );
38 }, 1000);
39
40 </script>
970d5441
DV
41
42 <p>This test is modeled after a <a
43 href="http://www.highcharts.com/demo/?example=dynamic-update&theme=default">highcharts
44 test</a>. New points should appear once per second. Try zooming and
45 panning over to the right edge to watch them show up.</p>
5e50289f
DV
46 </body>
47</html>