1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<!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>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>
|
