267 lines
No EOL
9.1 KiB
HTML
267 lines
No EOL
9.1 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; }
|
|
</style>
|
|
</head>
|
|
<body class="epoch-theme-dark">
|
|
<h1>Basic Chart Options and Events</h1>
|
|
<p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> » Basic Chart Options and Events</p>
|
|
<ol>
|
|
<li><a href="#test-1">Axes</a></li>
|
|
<li><a href="#test-2">Margins</a></li>
|
|
<li><a href="#test-3">Ticks and Tick Formats</a></li>
|
|
<li><a href="#test-4">Resize</a></li>
|
|
<li><a href="#test-5">Domain</a></li>
|
|
<li><a href="#test-6">Range</a></li>
|
|
</ol>
|
|
|
|
<!-- Test 1 -->
|
|
<div id="test-1" class="test">
|
|
<h2>1. Axes</h2>
|
|
<p>
|
|
Correctly add and remove axes when options are set.
|
|
</p>
|
|
<div class="epoch"></div>
|
|
<div class="controls">
|
|
<button data-index="0">All</button>
|
|
<button data-index="1">[left, right]</button>
|
|
<button data-index="2">[top, bottom]</button>
|
|
<button data-index="3">[left, bottom]</button>
|
|
<button data-index="4">[top, right]</button>
|
|
<button data-index="5">None</button>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
$(function() {
|
|
var axes = [
|
|
['top', 'left', 'bottom', 'right'],
|
|
['left', 'right'],
|
|
['top', 'bottom'],
|
|
['left', 'bottom'],
|
|
['top', 'right'],
|
|
[]
|
|
];
|
|
|
|
var chart = $('#test-1 .epoch').epoch({
|
|
type: 'line',
|
|
data: data().add(function(x) { return Math.cos(x) }).get([0, 2*Math.PI], Math.PI/25)
|
|
});
|
|
|
|
$('#test-1 button').click(function(e) {
|
|
chart.option('axes', axes[parseInt($(e.target).attr('data-index'))]);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
<!-- Test 2 -->
|
|
<div id="test-2" class="test">
|
|
<h2>2. Margins</h2>
|
|
<p>
|
|
Correctly resize margins when options are set.
|
|
</p>
|
|
<div class="epoch"></div>
|
|
<div class="controls">
|
|
<button data-index="0">No Margins</button>
|
|
<button data-index="1">Big Margins</button>
|
|
<button data-index="2">Small Margins</button>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
$(function() {
|
|
var sizes = [
|
|
{margins: {top: null, left: null, bottom: null, right: null }},
|
|
{margins: {top: 60, left: 60, bottom: 60, right: 60 }},
|
|
{margins: {top: 20, left: 20, bottom: 20, right: 20 }}
|
|
];
|
|
|
|
var chart = $('#test-2 .epoch').epoch({
|
|
type: 'line',
|
|
data: data().add(function(x) { return Math.sin(x); })
|
|
.add(function(x) { return Math.cos(x); })
|
|
.get([0, 2*Math.PI], Math.PI/25),
|
|
axes: []
|
|
});
|
|
|
|
$('#test-2 button').click(function(e) {
|
|
var margins = sizes[parseInt($(e.target).attr('data-index'))];
|
|
console.log(margins);
|
|
chart.option(margins);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- Test 3 -->
|
|
<div id="test-3" class="test">
|
|
<h2>3. Ticks and Tick Formats</h2>
|
|
<p>
|
|
Correctly resize margins when options are set.
|
|
</p>
|
|
<div class="epoch"></div>
|
|
<div class="controls">
|
|
<button class="ticks">Toggle Ticks</button>
|
|
<button class="tickFormats">Toggle Tick Formats</button>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
$(function() {
|
|
var ticksIndex = 0, ticks = [
|
|
{
|
|
ticks: {
|
|
top: 14,
|
|
bottom: 14,
|
|
left: 5,
|
|
right: 5,
|
|
}
|
|
},
|
|
{
|
|
ticks: {
|
|
top: 30,
|
|
left: 2,
|
|
bottom: 30,
|
|
right: 2
|
|
}
|
|
}
|
|
];
|
|
|
|
var tickFormatsIndex = 0, tickFormats = [
|
|
{
|
|
tickFormats: {
|
|
top: Epoch.Formats.regular,
|
|
bottom: Epoch.Formats.regular,
|
|
left: Epoch.Formats.si,
|
|
right: Epoch.Formats.si
|
|
}
|
|
},
|
|
{
|
|
tickFormats: {
|
|
top: function(d) { return parseInt(100*d)+'%' },
|
|
bottom: function(d) { return parseInt(100*d)+'%' },
|
|
left: function(d) { return parseInt(100*d)+'%' },
|
|
right: function(d) { return parseInt(100*d)+'%' }
|
|
}
|
|
}
|
|
];
|
|
|
|
var chart = $('#test-3 .epoch').epoch({
|
|
type: 'area',
|
|
data: data().add(function(x) { return (Math.sin(x)+1) / (x+1); })
|
|
.add(function(x) { return (Math.cos(x)+1) / (x+2); })
|
|
.get([0, 2*Math.PI], Math.PI/25),
|
|
axes: ['top', 'left', 'right', 'bottom']
|
|
});
|
|
|
|
$('#test-3 button.ticks').click(function(e) {
|
|
ticksIndex = (ticksIndex + 1) % ticks.length;
|
|
chart.option(ticks[ticksIndex]);
|
|
});
|
|
|
|
$('#test-3 button.tickFormats').click(function(e) {
|
|
tickFormatsIndex = (tickFormatsIndex + 1) % tickFormats.length;
|
|
chart.option(tickFormats[tickFormatsIndex]);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- Test 4 -->
|
|
<div id="test-4" class="test">
|
|
<h2>4. Resize</h2>
|
|
<p>
|
|
Correctly resize the chart when the width and height options are set.
|
|
</p>
|
|
<div class="epoch" style="width: 600px; height: 200px"></div>
|
|
<div class="controls">
|
|
<button data-index="0">Original</button>
|
|
<button data-index="1">Bigger</button>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
$(function() {
|
|
var sizes = [
|
|
[600, 200],
|
|
[800, 320]
|
|
];
|
|
|
|
var chart = $('#test-4 .epoch').epoch({
|
|
type: 'line',
|
|
data: data().add(function(x) { return Math.sin(x) }).get([0, 2*Math.PI], Math.PI/25)
|
|
});
|
|
|
|
$('#test-4 button').click(function(e) {
|
|
var index = parseInt($(e.target).attr('data-index'));
|
|
chart.option('width', sizes[index][0]);
|
|
chart.option('height', sizes[index][1]);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- Test 5 -->
|
|
<div id="test-5" class="test">
|
|
<h2>6. Option: domain</h2>
|
|
<div class="epoch"></div>
|
|
<p>
|
|
<button data-index="0">Domain From Data Extent</button>
|
|
<button data-index="1">[0, π]</button>
|
|
</p>
|
|
</div>
|
|
<script>
|
|
$(function() {
|
|
var domains = [
|
|
null,
|
|
[0, Math.PI]
|
|
];
|
|
|
|
var chart = $('#test-5 .epoch').epoch({
|
|
type: 'line',
|
|
data: data().add(function(x) { return 1 - Math.sin(x) }).get([0, 2*Math.PI], Math.PI/25)
|
|
});
|
|
|
|
$('#test-5 button').click(function(e) {
|
|
var index = parseInt($(e.target).attr('data-index'));
|
|
chart.option('domain', domains[index])
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
<!-- Test 6 -->
|
|
<div id="test-6" class="test">
|
|
<h2>7. Option: range</h2>
|
|
<div class="epoch"></div>
|
|
<p>
|
|
<button data-index="0">Range From Data Extent</button>
|
|
<button data-index="1">[0, 1.5]</button>
|
|
</p>
|
|
</div>
|
|
<script>
|
|
$(function() {
|
|
var ranges = [
|
|
null,
|
|
[0, 1.5]
|
|
];
|
|
|
|
var chart = $('#test-6 .epoch').epoch({
|
|
type: 'area',
|
|
data: data().add(function(x) { return 1 - Math.cos(x) }).get([0, 2*Math.PI], Math.PI/25)
|
|
});
|
|
|
|
$('#test-6 button').click(function(e) {
|
|
var index = parseInt($(e.target).attr('data-index'));
|
|
console.log(ranges[index]);
|
|
chart.option('range', ranges[index])
|
|
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |