dino-graph
Version:
a simple dynamic graphing library
65 lines (50 loc) • 1.28 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<script src="../dist/dino-graph.js"></script>
<title>dynamic test</title>
</head>
<body>
<canvas id="canvas" width=600 height=300></canvas>
<script>
function pad( str, val )
{
return ( val + str ).slice( -val.length )
}
var data = [ [], [] ]
var g = new DinoGraph
(
document.getElementById( 'canvas' ),
data,
{
dataFormat: function( data, opts )
{
var date = new Date( data[0] )
return [
pad( date.getHours(), '00' ) + ':' + pad( date.getMinutes(), '00' ) + ':' + pad( date.getSeconds(), '00' ),
opts.title + ': ' + parseFloat( data[1] ).toFixed(1)
]
},
numLabelsX: 10,
numLabelsY: 10,
xRange: 5000
}
)
function rand( min, max ) { return Math.floor( Math.random() * max ) + min }
function update( o )
{
var x = Date.now() - ( o || 0 )
var y = rand( 0, 50 )
data[0].push( [ x, y ] )
y = rand( 0, 50 )
data[1].push( [ x, y ] )
g.setData( data )
}
setInterval( update, 1000 )
update( 2000 )
update( 1000 )
</script>
</body>
</html>