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]-->
7e5ddc94
DV
9 <!--
10 For production (minified) code, use:
11 <script type="text/javascript" src="dygraph-combined.js"></script>
12 -->
13 <script type="text/javascript" src="../dygraph-dev.js"></script>
14
5e50289f
DV
15 </head>
16 <body>
970d5441
DV
17 <h3 style="width:800px; text-align: center;">Live random data</h3>
18 <div id="div_g" style="width:800px; height:400px;"></div>
5e50289f
DV
19
20 <script type="text/javascript">
21 var data = [];
22 var t = new Date();
23 for (var i = 10; i >= 0; i--) {
24 var x = new Date(t.getTime() - i * 1000);
25 data.push([x, Math.random()]);
26 }
27
28 var g = new Dygraph(document.getElementById("div_g"), data,
29 {
30 drawPoints: true,
31 showRoller: true,
32 valueRange: [0.0, 1.2],
33 labels: ['Time', 'Random']
34 });
35 setInterval(function() {
36 var x = new Date(); // current time
37 var y = Math.random();
38 data.push([x, y]);
39 g.updateOptions( { 'file': data } );
40 }, 1000);
41
42 </script>
970d5441
DV
43
44 <p>This test is modeled after a <a
45 href="http://www.highcharts.com/demo/?example=dynamic-update&theme=default">highcharts
46 test</a>. New points should appear once per second. Try zooming and
47 panning over to the right edge to watch them show up.</p>
5e50289f
DV
48 </body>
49</html>