ticker-graph
Version:
Simple Ticker Graph
80 lines (69 loc) • 2.36 kB
HTML
<html>
<head>
<title>TickerGraph Example</title>
<script src="./lib/TickerGraph.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
"use strict";
var tRandomChange = new TickerGraph(document.getElementById('TickerSampleRandomChange')),
tRandomDecrease = new TickerGraph(document.getElementById('TickerSampleRandomDecreasing'), {
color: function( data ) {
if( data.ratio > data.prevRatio ) {
return "#090";
} else {
return "#0F0";
}
}
}),
tPureRandom = new TickerGraph(document.getElementById('TickerSamplePurelyRandom'), {
color: function( data ) {
var d = Math.round(((data.increment / data.maxIncrement) * 200) + 55).toString(16);
return "#" + d + "0044";
}
}),
tSporadic = new TickerGraph(document.getElementById('TickerSampleSporadic'), {bottomOffsetPx: 2}),
tOccasional = new TickerGraph(document.getElementById('TickerSampleOccasional'), {bottomOffsetPx: 2}),
tSine = new TickerGraph(document.getElementById('TickerSampleSinusoidal'));
var valRandChange = 0,
valDec = 0,
valSporadic = 0,
valOccasional = 0,
valSine = 0;
setInterval(function() {
valDec -= (Math.random() - .45);
tRandomDecrease.push(valDec);
tPureRandom.push(Math.random());
valSporadic += Math.random() > .85 ? 1 : -1;
valSporadic = Math.max(valSporadic, 0);
tSporadic.push(valSporadic);
valOccasional += Math.random() > .97 ? 1 : -1;
valOccasional = Math.max(valOccasional, 0);
tOccasional.push(valOccasional);
valRandChange += (Math.random() - .5) * 40;
tRandomChange.push(valRandChange);
valSine += .05;
tSine.push(Math.sin(valSine));
}, 50);
});
</script>
</head>
<body>
<style>
canvas {
/*border: 1px solid #eee;*/
}
</style>
<canvas id="TickerSampleRandomChange" width="400px" height="100px"></canvas>
<br />
<canvas id="TickerSampleRandomDecreasing" width="400px" height="100px"></canvas>
<br />
<canvas id="TickerSamplePurelyRandom" width="400px" height="100px"></canvas>
<br />
<canvas id="TickerSampleSporadic" width="400px" height="100px"></canvas>
<br />
<canvas id="TickerSampleOccasional" width="400px" height="100px"></canvas>
<br />
<canvas id="TickerSampleSinusoidal" width="400px" height="100px"></canvas>
</body>
</html>