epoch-charting
Version:
A general purpose real-time charting library for building beautiful, smooth, and high performance visualizations.
94 lines (80 loc) • 2.99 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>Basic Chart Model / Data Test</h1>
<p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> » Basic Chart Model / Data Test</p>
<p>
<button class="set" data-index="0">Data A</button>
<button class="set" data-index="1">Data B</button>
<button class="set" data-index="2">Data C</button>
</p>
<div id="sparkline" class="epoch"></div>
<div id="area" class="epoch"></div>
<div id="bar" class="epoch"></div>
<script>
$(function() {
var dataA = [];
for (var j = 0; j < 3; j++) {
var layer = [];
for (var i = 0; i < 20; i++) {
layer.push(50 + Math.random()*20);
}
dataA.push(layer);
}
var dataB = [];
for (var j = 0; j < 2; j++) {
var layer = [];
for (i = 0; i < 30; i++) {
layer.push(10 + Math.random() * 40)
}
dataB.push(layer);
}
var dataC = [];
for (var i = 0; i < 50; i++) {
dataC.push(Math.random() * 100);
}
var data = [dataA, dataB, dataC];
// Setup the model
window.model = new Epoch.Model({ dataFormat: 'array' });
model.setData(dataA);
// Make the charts and associate them with the model
var sparkline = $('#sparkline').epoch({
type: 'line',
axes: ['left', 'right'],
model: model
});
var area = $('#area').epoch({
type: 'area',
axes: ['left', 'right', 'bottom'],
model: model
});
window.bar = $('#bar').epoch({
type: 'bar',
axes: ['left', 'right', 'bottom'],
model: model
});
// Click listeners for the buttons
$('button.set').click(function(e) {
var index = parseInt($(e.target).attr('data-index'));
model.setData(data[index]);
});
})
</script>
</body>
</html>