epoch-charting
Version:
A general purpose real-time charting library for building beautiful, smooth, and high performance visualizations.
85 lines (72 loc) • 2.67 kB
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/tests.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="../../../dist/js/epoch.js"></script>
<script src="../js/data.js"></script>
<link rel="stylesheet" type="text/css" href="../../../dist/css/epoch.css">
<style>
body { background: #333; color: #d0d0d0; }
a:link, a:visited { color: white; color: white; }
.epoch {
height: 220px;
}
#sparkline { height: 50px; }
</style>
</head>
<body class="epoch-theme-dark">
<h1>Real-time Chart Model / Data Test</h1>
<p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> » Real-time Chart Model / Data Test</p>
<p><button class="next">Next</button></p>
<div id="gauge" class="epoch gauge-small"></div>
<div id="sparkline" class="epoch"></div>
<div id="area" class="epoch"></div>
<div id="bar" class="epoch"></div>
<script>
$(function() {
var rnd = function() { return Math.random(); };
var data = [];
for (var j = 0; j < 3; j++) {
var layer = [];
for (var i = 0; i < 80; i++) {
layer.push(rnd());
}
data.push(layer);
}
// Setup the model
window.model = new Epoch.Model({
dataFormat: {
name: 'array',
options: { startTime: (new Date().getTime() / 1000)|0 }
}
});
model.setData(data);
// Make the charts and associate them with the model
window.sparkline = $('#sparkline').epoch({
type: 'time.line',
axes: ['left', 'right'],
model: model
});
window.area = $('#area').epoch({
type: 'time.area',
axes: ['left', 'right', 'bottom'],
model: model
});
window.bar = $('#bar').epoch({
type: 'time.bar',
axes: ['left', 'right', 'bottom'],
model: model
});
window.gauge = $('#gauge').epoch({
type: 'time.gauge',
model: model
})
$('button.next').click(function(e) {
model.push([rnd(), rnd(), rnd()]);
});
})
</script>
</body>
</html>