94 lines
No EOL
2.9 KiB
HTML
94 lines
No EOL
2.9 KiB
HTML
<!DOCTYPE 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> |