epoch-charting
Version:
A general purpose real-time charting library for building beautiful, smooth, and high performance visualizations.
284 lines (253 loc) • 10.3 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>
<link rel="stylesheet" type="text/css" href="../../../dist/css/epoch.css">
<script>
var nextTime = (function() {
var currentTime = parseInt(new Date().getTime() / 1000);
return function() { return currentTime++; }
})();
</script>
</head>
<body>
<h1>Real-time Gauge Test</h1>
<p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> » Real-time Gauge</p>
<ol>
<li><a href="#test-1">Single Value Display</a></li>
<li><a href="#test-2">Single Transition</a></li>
<li><a href="#test-3">Stream Transition</a></li>
<li><a href="#test-4">Gauge Sizes</a></li>
<li><a href="#test-5">Color Override</a></li>
<li><a href="test-6">Option: domain</a></li>
<li><a href="test-7">Option: ticks</a></li>
<li><a href="test-8">Option: tickSize</a></li>
<li><a href="test-9">Option: tickOffset</a></li>
<li><a href="test-10">Option: format</a></li>
</ol>
<!-- Test 1 -->
<div id="test-1" class="test">
<h2>1. Single Value Display</h2>
<p>Display a single value of 25%</p>
<div class="epoch gauge-small"></div>
</div>
<script>
$(function() {
$('#test-1 .epoch').epoch({ type: 'time.gauge', value: 0.25 });
});
</script>
<!-- Test 2 -->
<div id="test-2" class="test">
<h2>2. Single Transition</h2>
<p>Display value of 0% and transition to a random value when the button is pressed.</p>
<div class="epoch gauge-small"></div>
<p><button>Transition</button></p>
</div>
<script>
$(function() {
var chart = $('#test-2 .epoch').epoch({
type: 'time.gauge',
value: 0.0
});
$('#test-2 button').on('click', function(e) {
chart.update(Math.random());
});
});
</script>
<!-- Test 3 -->
<div id="test-3" class="test">
<h2>3. Stream Transition</h2>
<p>Display value of 0% and transition to a random value every second when the button is pressed.</p>
<div class="epoch gauge-small"></div>
<p><button>Play</button></p>
</div>
<script>
$(function() {
var chart = $('#test-3 .epoch').epoch({
type: 'time.gauge',
value: 0.0
}),
playing = false,
interval = null;
$('#test-3 button').on('click', function(e) {
if (interval === null) {
interval = setInterval(function() {
chart.update(Math.random());
}, 1000);
chart.update(Math.random());
$(e.target).text('Pause');
}
else {
clearInterval(interval);
interval = null;
$(e.target).text('Play');
}
});
});
</script>
<!-- Test 4 -->
<div id="test-4" class="test">
<h2>4. Gauge Sizes</h2>
<p>Display the four built-in gauge sizes in this order: tiny, small, medium, large.</p>
<div class="epoch gauge-tiny"></div>
<div class="epoch gauge-small"></div>
<div class="epoch gauge-medium"></div>
<div class="epoch gauge-large"></div>
</div>
<script>
$(function() {
$('#test-4 .gauge-tiny').epoch({ type: 'time.gauge', value: 0.75 });
$('#test-4 .gauge-small').epoch({ type: 'time.gauge', value: 0.75 });
$('#test-4 .gauge-medium').epoch({ type: 'time.gauge', value: 0.75 });
$('#test-4 .gauge-large').epoch({ type: 'time.gauge', value: 0.75 });
});
</script>
<!-- Test 5 -->
<div id="test-5" class="test">
<h2>5. Color Override</h2>
<p>
Override the basic gauge styles with the following
<ul>
<li>Outer arc 8px thickness colored green</li>
<li>Inner arc 2px thickness colored orange</li>
<li>Ticks should be 3px in width and red</li>
<li>Needle colored blue.</li>
<li>Needle base colored black</li>
</ul>
</p>
<div id="test-5-plot" class="epoch gauge-medium"></div>
</div>
<style>
#test-5-plot .epoch .gauge .arc.outer {
stroke-width: 8px;
stroke: green;
}
#test-5-plot .epoch .gauge .arc.inner {
stroke-width: 2px;
stroke: orange;
}
#test-5-plot .epoch .gauge .tick {
stroke-width: 3px;
stroke: red;
}
#test-5-plot .epoch .gauge .needle {
fill: blue;
}
#test-5-plot .epoch .gauge .needle-base {
fill: black;
}
</style>
<script>
$(function() {
$('#test-5 .epoch').epoch({ type: 'time.gauge', value: 0.5 });
});
</script>
<!--
Common Option Event Listener Events
-->
<script>
window.makeOptionTest = function(testNumber, chartOptions, optionName) {
chartOptions = chartOptions ? chartOptions : {};
if (!chartOptions.type)
chartOptions.type = 'time.gauge';
if (!chartOptions.value)
chartOptions.value = 0.5;
if (!chartOptions.domain)
chartOptions.domain = [0, 1];
var domain = chartOptions.domain,
id = '#test-' + testNumber,
chart = $(id + ' .epoch').epoch(chartOptions),
interval = null,
next = function() { chart.push(Math.random()*(domain[1] - domain[0]) + domain[0]); };
$(id + ' .playback').click(function(e) {
if (!interval) {
interval = setInterval(next, 1500);
next();
$(e.target).text('Pause');
}
else {
clearInterval(interval);
interval = null;
$(e.target).text('Play');
}
});
var formats = [
Epoch.Formats.percent,
function(d) { return d.toFixed(2); }
];
$(id + ' .option').click(function(e) {
var value = parseInt($(e.target).attr('data-value'));
console.log(optionName, value);
if (optionName == 'domain')
value = domain = $(e.target).attr('data-value').split(',').map(function(d) { return parseInt(d); });
else if (optionName == 'format')
value = formats[value];
chart.option(optionName, value);
});
};
</script>
<!-- Test 6 -->
<div id="test-6" class="test">
<h2>6. Option: domain</h2>
<div class="epoch gauge-small"></div>
<p>
<button class="playback">Play</button> |
<button class="option" data-value="0,1">[0, 1]</button>
<button class="option" data-value="0,2">[0, 2]</button>
</p>
</div>
<script>$(function() { makeOptionTest(6, {}, 'domain'); });</script>
<!-- Test 7 -->
<div id="test-7" class="test">
<h2>7. Option: ticks</h2>
<div class="epoch gauge-small"></div>
<p>
<button class="playback">Play</button> |
<button class="option" data-value="5">5 Ticks</button>
<button class="option" data-value="10">10 Ticks</button>
<button class="option" data-value="20">20 Ticks</button>
<button class="option" data-value="40">40 Ticks</button>
</p>
</div>
<script>$(function() { makeOptionTest(7, {}, 'ticks'); });</script>
<!-- Test 8 -->
<div id="test-8" class="test">
<h2>8. Option: tickSize</h2>
<div class="epoch gauge-small"></div>
<p>
<button class="playback">Play</button> |
<button class="option" data-value="2">2px</button>
<button class="option" data-value="5">5px</button>
<button class="option" data-value="10">10px</button>
<button class="option" data-value="20">20px</button>
</p>
</div>
<script>$(function() { makeOptionTest(8, {}, 'tickSize'); });</script>
<!-- Test 9 -->
<div id="test-9" class="test">
<h2>9. Option: tickOffset</h2>
<div class="epoch gauge-small"></div>
<p>
<button class="playback">Play</button> |
<button class="option" data-value="5">5px</button>
<button class="option" data-value="10">10px</button>
<button class="option" data-value="20">20px</button>
</p>
</div>
<script>$(function() { makeOptionTest(9, {}, 'tickOffset'); });</script>
<!-- Test 10 -->
<div id="test-10" class="test">
<h2>10. Option: format</h2>
<div class="epoch gauge-small"></div>
<p>
<button class="playback">Play</button> |
<button class="option" data-value="0">Percent</button>
<button class="option" data-value="1">Normal</button>
</p>
</div>
<script>$(function() { makeOptionTest(10, {}, 'format'); });</script>
</body>
</html>