epoch-charting
Version:
A general purpose real-time charting library for building beautiful, smooth, and high performance visualizations.
156 lines (137 loc) • 5.35 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>
<script>
window.beta = function(a, b) {
a = a ? a : 2;
b = b ? b : 5;
var histogram = new BetaData(a, b, 1).next()[0].histogram,
values = [];
for(var x in histogram)
values.push({x: x, y: histogram[x]})
return [{values: values}];
}
</script>
<link rel="stylesheet" type="text/css" href="../../../dist/css/epoch.css">
</head>
<body>
<h1>Basic Bar Chart Test</h1>
<p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> » Basic Bar</p>
<ol>
<li><a href="#test-1">Beta(2, 5)</a></li>
<li><a href="#test-2">Beta(2, 5) Horizontal</a></li>
<li><a href="#test-3">Option: buckets</a></li>
<li><a href="#test-4">Options: bucketRange & cutOutliers</a></li>
</ol>
<!-- Test 1 -->
<div id="test-1" class="test">
<h2>1. Beta(2, 5)</h2>
<p>Plot a random selection of points from the Beta(2, 5) distribution as a histogram.</p>
<div class="epoch"></div>
<p><button>Refresh</button></p>
</div>
<script>
$(function() {
var chart = $('#test-1 .epoch').epoch({
type: 'histogram',
buckets: 20,
data: beta(2, 5)
});
$('#test-1 button').click(function(e) {
chart.update( beta(2, 5) );
});
});
</script>
<!-- Test 2 -->
<div id="test-2" class="test">
<h2>2. Beta(2, 5) Horizontal</h2>
<p>Plot a random selection of points from Beta(2, 5) and display in a horizontal histogram.</p>
<div class="epoch"></div>
<p><button>Refresh</button></p>
</div>
<script>
$(function() {
var chart = $('#test-2 .epoch').epoch({
type: 'histogram',
buckets: 10,
data: beta(2, 5),
orientation: 'horizontal'
});
$('#test-2 button').click(function(e) {
chart.update( beta(2, 5) );
});
});
</script>
<!-- Test 3 -->
<div id="test-3" class="test">
<h2>3. Option: buckets</h2>
<p>Plot Beta(2, 2) and change number of buckets on the fly.</p>
<div class="epoch"></div>
<p>
<button data-value="5">5 Buckets</button>
<button data-value="10">10 Buckets</button>
<button data-value="20">20 Buckets</button>
<button data-value="25">25 Buckets</button>
<button data-value="50">50 Buckets</button> |
<button class="refresh">Refresh</button>
</p>
</div>
<script>
$(function() {
var chart = $('#test-3 .epoch').epoch({
type: 'histogram',
buckets: 10,
data: beta(2, 2)
});
$('#test-3 button[data-value]').click(function(e) {
var buckets = parseInt($(e.target).attr('data-value'));
chart.option('buckets', buckets);
});
$('#test-3 button.refresh').click(function(e) {
chart.update( beta(2, 2) );
});
});
</script>
<!-- Test 4 -->
<div id="test-4" class="test">
<h2>4. Options: bucketRange & cutOutliers</h2>
<p>Plot beta(2, 5) and change the bucket range on the fly.</p>
<div class="epoch"></div>
<p>
<button data-range="0,100">Range [0, 100]</button>
<button data-range="0,50">Range [0, 50]</button>
<button data-range="25,75">Range [25, 75]</button> |
<button class="cutOutliers">Cut Outliers</button>
<button class="keepOutliers">Keep Outliers</button> |
<button class="refresh">Refresh</button>
</p>
</div>
<script>
$(function() {
var chart = $('#test-4 .epoch').epoch({
type: 'histogram',
buckets: 25,
data: beta(2, 5)
});
$('#test-4 button[data-range]').click(function(e) {
var range = $(e.target).attr('data-range').split(',').map(function(d) { return +d; });
chart.option('bucketRange', range);
});
$('#test-4 .cutOutliers').click(function(e) {
chart.option('cutOutliers', true);
});
$('#test-4 .keepOutliers').click(function(e) {
chart.option('cutOutliers', false);
});
$('#test-4 button.refresh').click(function(e) {
chart.update( beta(2, 5) );
});
});
</script>
</body>
</html>