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