[dygraphs.git] / tests / dynamic-update.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>Live random data</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.js"></script>

  </head>
  <body>
    <h3 style="width:800px; text-align: center;">Live random data</h3>
    <div id="div_g" style="width:800px; height:400px;"></div>

    <script type="text/javascript">
      var data = [];
      var t = new Date();
      for (var i = 10; i >= 0; i--) {
        var x = new Date(t.getTime() - i * 1000);
        data.push([x, Math.random()]);
      }

      var g = new Dygraph(document.getElementById("div_g"), data,
                          {
                            drawPoints: true,
                            showRoller: true,
                            valueRange: [0.0, 1.2],
                            labels: ['Time', 'Random']
                          });
      setInterval(function() {
        var x = new Date();  // current time
        var y = Math.random();
        data.push([x, y]);
        g.updateOptions( { 'file': data } );
      }, 1000);

    </script>

    <p>This test is modeled after a <a
      href="http://www.highcharts.com/demo/?example=dynamic-update&theme=default">highcharts
      test</a>. New points should appear once per second. Try zooming and
    panning over to the right edge to watch them show up.</p>
  </body>
</html>
Commit	Line	Data
54425b14	1	<!DOCTYPE html>
5e50289f DV	2	<html>
5e50289f DV	3	<head>
10494b48	4	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
5e50289f DV	5	<title>Live random data</title>
5e50289f DV	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>
5e50289f DV	16	<body>
970d5441 DV	17	<h3 style="width:800px; text-align: center;">Live random data</h3>
970d5441 DV	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>
5e50289f DV	49	</html>