<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sparkline Test</title>
<!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="../jquery.jqplot.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<!-- BEGIN: load jquery -->
<script language="javascript" type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<!-- END: load jquery -->
<!-- BEGIN: load jqplot -->
<script language="javascript" type="text/javascript" src="../jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.js"></script>
<!-- END: load jqplot -->
<script type="text/javascript" language="javascript">
$(document).ready(function(){
// Set up simulated data from a live price feed for the past minute where data is coming in at every second.
var t = 1000; // 1000 ms equals 1 second
var d = new Date().getTime(); // create a new date at the current time.
var p = Math.random() * 100; // create a random price for right now.
var l = [[d,p]]; // create an array to hold our data, mighty as well put in the current time, price while we're at it.
// loop 59 times to create random data for the past 59 seconds.
for (var i=1; i<61; i++) {
l.unshift([d - i*t, Math.random()*100]);
}
// create a custom ticks array for the
var ticks = [];
for (var i=0; i<7; i++) {
ticks.unshift(d - i*10*t);
}
plot = $.jqplot('chart', [l], {
axes: {
xaxis: { padMin:1.0, padMax: 1.1, tickInterval: "10 seconds", renderer: $.jqplot.DateAxisRenderer, tickOptions:{formatString:"%H:%M:%S"} },
yaxis: { tickOptions:{formatString:"$%.2f"}, min:0, max:100 }
},
series:[
{showMarker:false}
]
});
// window.setInterval(updateData, 1000);
});
function updateData () {
// remove the first element and add a new one on end
var d = new Date().getTime();
var p = Math.random()*100;
var data = plot.series[0].data;
data.splice(0,1);
data.push([d, p]);
// var min = data[0][0];
// var max = data[data.length-1][0];
// var ticks = [];
// for (var t in plot.axes.xaxis._ticks) {
// ticks.push(plot.axes.xaxis._ticks[t].value);
// };
// plot.axes.xaxis.min = min;
// plot.axes.xaxis.max = max;
// plot.axes.xaxis.tickInterval = null;
// // for date axes...
// plot.axes.xaxis.daTickInterval = null;
// plot.axes.xaxis._ticks = null;
plot.replot({resetAxes:['xaxis']});
}
</script>
</head>
<body>
<?php include "nav.inc"; ?>
<div id="chart" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
<button onclick="timer = window.setInterval(updateData, 1000);">Start</button>
<button onclick="timer = window.clearInterval(timer);">Stop</button>
</body>
</html>