diff options
Diffstat (limited to 'debian/missing-sources/epoch/tests/render/real-time')
7 files changed, 2800 insertions, 0 deletions
diff --git a/debian/missing-sources/epoch/tests/render/real-time/area.html b/debian/missing-sources/epoch/tests/render/real-time/area.html new file mode 100644 index 0000000..b66ab7d --- /dev/null +++ b/debian/missing-sources/epoch/tests/render/real-time/area.html @@ -0,0 +1,494 @@ +<!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> + <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 Area Plot Test</h1> + <p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> » Real-time Area</p> + <ol> + <li><a href="#test-1">Single Series</a></li> + <li><a href="#test-2">Single Series Single Transition</a></li> + <li><a href="#test-3">Single Seires Stream</a></li> + <li><a href="#test-4">Multi Series</a></li> + <li><a href="#test-5">Multi Series Single Transition</a></li> + <li><a href="#test-6">Multi Seires Stream</a></li> + <li><a href="#test-7">Color Override</a></li> + <li><a href="#test-8">Categorical Colors</a></li> + <li><a href="#test-9">Show/Hide Layers</a></li> + </ol> + + <!-- Test 1 --> + <div id="test-1" class="test"> + <h2>1. Single Series</h2> + <p> + Correctly render a single series plot of <code>y = cos(x) + 1</code> over the range <code>[0, 2π]</code>. + </p> + <div class="epoch"></div> + </div> + + <script> + $(function() { + var data = [{ label: 'A', values: [] }], + length = 40; + + for (var i = 0; i < length; i++) { + var x = i * 2 * Math.PI / length, + y = Math.cos(x) + 1, + time = nextTime(); + data[0].values.push({time: time, y: y}); + } + + $('#test-1 .epoch').epoch({ type: 'time.area', data: data }); + }); + </script> + + <!-- Test 2 --> + <div id="test-2" class="test"> + <h2>2. Single Series Single Transition</h2> + <p> + Correctly render a single series plot of <code>y = sin(x) + 1</code>. When the button is pressed push a new data point to the chart and correctly animate/render the transiton. + </p> + <div class="epoch"></div> + <p><button>Next</button></p> + </div> + + <script> + $(function() { + var data = [{ label: 'A', values: [] }], + length = 40, + nextIndex = length; + + for (var i = 0; i < length; i++) { + var x = i * 2 * Math.PI / length, + y = Math.sin(x) + 1, + time = nextTime(); + data[0].values.push({time: time, y: y}); + } + + var chart = $('#test-2 .epoch').epoch({ + type: 'time.area', + data: data + }); + + $('#test-2 button').on('click', function(e) { + var x = nextIndex * 2 * Math.PI / length, + y = Math.sin(x) + 1, + time = nextTime(); + nextIndex++; + chart.push([{ time: time, y: y }]); + }); + }); + </script> + + + <!-- Test 3 --> + <div id="test-3" class="test"> + <h2>3. Single Seires Stream</h2> + <p>Correctly play / pause a single series stream of values from the plot <code>y = cos(x) + 1</code>.</p> + <div class="epoch"></div> + <p><button>Play</button></p> + </div> + + <script> + $(function() { + var data = [{ label: 'A', values: [] }], + length = 40, + nextIndex = length, + playing = false, + interval = null; + + for (var i = 0; i < length; i++) { + var x = i * 2 * Math.PI / length, + y = Math.cos(x) + 1, + time = nextTime(); + data[0].values.push({time: time, y: y}); + } + + var chart = $('#test-3 .epoch').epoch({ + type: 'time.area', + data: data + }); + + var pushPoint = function() { + var x = nextIndex * 2 * Math.PI / length, + y = Math.cos(x) + 1, + time = nextTime(); + chart.push([{ time: time, y: y}]); + nextIndex++; + }; + + $('#test-3 button').on('click', function(e) { + if (playing) { + $(e.target).text('Play'); + clearInterval(interval); + } + else { + $(e.target).text('Pause'); + pushPoint(); + interval = setInterval(pushPoint, 1000); + } + playing = !playing; + }); + }); + </script> + + <!-- Test 4 --> + <div id="test-4" class="test"> + <h2>4. Multi Series</h2> + <p>Correctly render a multi series plot of the following functions:</p> + <ul> + <li><code>y = log(x+1)</code></li> + <li><code>y = 2*log(x+1)</code></li> + <li><code>y = 3*log(x+1)</code></li> + </ul> + <div class="epoch"></div> + </div> + + <script> + $(function() { + var data = [ + {label: 'A', values: []}, + {label: 'B', values: []}, + {label: 'C', values: []} + ], + length = 40; + + for (var i = 0; i < length; i++) { + var x = i + 1, + time = nextTime(); + for (var j = 0; j < data.length; j++) { + data[j].values.push({time: time, y: (j+1) * Math.log(x)}); + } + } + + $('#test-4 .epoch').epoch({ + type: 'time.area', + data: data, + axes: ['left', 'right', 'bottom'] + }); + }); + </script> + + + <!-- Test 5 --> + <div id="test-5" class="test"> + <h2>5. Multi Series Single Transition</h2> + <p> + Correctly render a multi series plot of the following functions: + <ul> + <li><code>y = x</code></li> + <li><code>y = x<sup>1.25</sup></code></li> + <li><code>y = x<sup>1.5</sup></code></li> + </ul> + and correctly render/animate the transiton after pressing the "Next" button. + </p> + <div class="epoch"></div> + <p> + <button>Next</button> + </p> + </div> + + <script> + $(function() { + var data = [ + {label: 'A', values: []}, + {label: 'B', values: []}, + {label: 'C', values: []} + ], + length = 40, + scale = 0.1, + nextIndex = length; + + for (var i = 0; i < length; i++) { + var x = i * scale, + time = nextTime(); + data[0].values.push({time: time, y: x}); + data[1].values.push({time: time, y: Math.pow(x, 1.25)}); + data[2].values.push({time: time, y: Math.pow(x, 1.5)}); + } + + var chart = $('#test-5 .epoch').epoch({ + type: 'time.area', + data: data, + axes: ['left', 'right', 'bottom'] + }); + + $('#test-5 button').on('click', function(e) { + var x = nextIndex * scale, + time = nextTime(); + nextIndex++; + chart.push([ + {time: time, y: x}, + {time: time, y: Math.pow(x, 1.25)}, + {time: time, y: Math.pow(x, 1.5)} + ]); + }); + }); + </script> + + <!-- Test 6 --> + <div id="test-6" class="test"> + <h2>6. Multi Seires Stream</h2> + <p> + Correctly play / pause a multi series stream of values over the following plots: + <ul> + <li><code>x</code></li> + <li><code>x * log(x)</code></li> + <li><code>x * log<sup>2</sup>(x)</code></li> + </ul> + </p> + <div class="epoch"></div> + <p><button>Play</button></p> + </div> + + <script> + $(function() { + var data = [ + {label: 'A', values: []}, + {label: 'B', values: []}, + {label: 'C', values: []} + ], + length = 40, + nextIndex = length, + scale = 0.1, + playing = false, + interval = null; + + for (var i = 0; i < length; i++) { + var x = (i+1) * scale, + time = nextTime(); + data[0].values.push({time: time, y: x}); + data[1].values.push({time: time, y: x * Math.log(x)}); + data[2].values.push({time: time, y: x * Math.pow(Math.log(x), 2)}); + } + + var chart = $('#test-6 .epoch').epoch({ + type: 'time.area', + data: data, + axes: ['right', 'bottom'] + }); + + var pushPoint = function() { + var x = (nextIndex +1) * scale, + time = nextTime(); + chart.push([ + { time: time, y: x}, + { time: time, y: x * Math.log(x)}, + { time: time, y: x * Math.pow(Math.log(x), 2)} + ]); + nextIndex++; + }; + + $('#test-6 button').on('click', function(e) { + if (playing) { + $(e.target).text('Play'); + clearInterval(interval); + } + else { + $(e.target).text('Pause'); + interval = setInterval(pushPoint, 1000); + pushPoint(); + } + playing = !playing; + }); + }); + </script> + + <!-- Test 7 --> + <div id="test-7" class="test"> + <h2>7. Color Override</h2> + <p>The first layer should pink, the second green, and the third blue.</p> + <div id="test-7-plot" class="epoch"></div> + </div> + + <style> + #test-7-plot .a .area { fill: pink; } + #test-7-plot .b .area { fill: green; } + #test-7-plot .c .area { fill: blue; } + </style> + + <script> + $(function() { + var data = [ + {label: 'A', values: []}, + {label: 'B', values: []}, + {label: 'C', values: []} + ], + length = 40; + + for (var i = 0; i < length; i++) { + var x = i + 1, + time = nextTime(); + for (var j = 0; j < data.length; j++) { + data[j].values.push({time: time, y: (j+1) * Math.log(x)}); + } + } + + $('#test-7 .epoch').epoch({ + type: 'time.area', + data: data + }); + }); + </script> + + <!-- Test 8 --> + <div id="test-8" class="test"> + <h2>8. Categorical Colors</h2> + <p>Correctly render and switch between different categorical colors. Unlike with the basic charts this doesn't occur just by switching the class name on the containing element. The CSS query engine must be purge and the plot must be manually redrawn, like so:<code><pre> +Epoch.QueryCSS.purge(); +chart.draw(); +</pre></code> + </p> + + <div class="epoch category10"></div> + + <p> + <button data-class="category10">category10</button> + <button data-class="category20">category20</button> + <button data-class="category20b">category20b</button> + <button data-class="category20c">category20c</button> + </p> + </div> + + <script> + $(function() { + var data = [], + length = 41, + className = "category10", + layers = 8, + time = nextTime(); + + for (var i = 0; i < layers; i++) { + var layer = { label: String.fromCharCode(i+65), values: [] }; + for (var j = 0; j < length; j++) { + var x = j + 1, + y = Math.pow(x, 1 + 0.3 * Math.log(Math.log(Math.log(x+1) + 1) + 1)); + layer.values.push({ time: time + j, y: y }); + } + data.push(layer); + } + + var chart = $('#test-8 .epoch').epoch({ type: 'time.area', data: data }); + + $('#test-8 button').on('click', function(e) { + $('#test-8 .epoch').removeClass(className); + className = $(e.target).attr('data-class'); + $('#test-8 .epoch').addClass(className); + Epoch.QueryCSS.purge(); + chart.draw(); + }); + }); + </script> + + <!-- Test 9 --> + <div id="test-9" class="test"> + <h2>9. Show/Hide Layers</h2> + <div class="epoch"></div> + <p> + <button class="toggle" data-index="0">Toggle A</button> + <button class="toggle" data-index="1">Toggle B</button> + <button class="toggle" data-index="2">Toggle C</button> | + <button class="playback">Play</button> + </p> + </div> + <script> + $(function() { + var data = [ + {label: 'A', values: []}, + {label: 'B', values: []}, + {label: 'C', values: []} + ], + length = 40, + nextIndex = length, + scale = 0.1, + playing = false, + interval = null; + + for (var i = 0; i < length; i++) { + var x = (i+1) * scale, + time = nextTime(); + data[0].values.push({time: time, y: x}); + data[1].values.push({time: time, y: 1.5*x}); + data[2].values.push({time: time, y: 2*x}); + } + + var chart = $('#test-9 .epoch').epoch({ + type: 'time.area', + data: data, + axes: ['right', 'bottom'] + }); + + var pushPoint = function() { + var x = (nextIndex +1) * scale, + time = nextTime(); + chart.push([ + { time: time, y: x}, + { time: time, y: 1.5*x}, + { time: time, y: 2*x} + ]); + nextIndex++; + }; + + $('#test-9 button.toggle').click(function(e) { + var index = parseInt($(e.target).attr('data-index')); + chart.toggleLayer(index); + }); + + $('#test-9 button.playback').on('click', function(e) { + if (playing) { + $(e.target).text('Play'); + clearInterval(interval); + } + else { + $(e.target).text('Pause'); + interval = setInterval(pushPoint, 1000); + pushPoint(); + } + playing = !playing; + }); + }); + </script> + + <!-- Test 10 --> + <div id="test-10" class="test"> + <h2>10. Fixed Range</h2> + <p> + Render a single series plot of <code>y = cos(x)</code>. Instead of automatically setting the range to <code>[-1, 1]</code>, the range is manually set to <code>[-2, 5]</code>. + </p> + <div class="epoch"></div> + </div> + + <script> + $(function() { + var data = [{ label: 'A', values: [] }], + length = 40; + + for (var i = 0; i < length; i++) { + var x = i * 2 * Math.PI / length, + y = Math.cos(x), + time = nextTime(); + data[0].values.push({time: time, y: y}); + } + + $('#test-10 .epoch').epoch({ + type: 'time.area', + axes: ['right', 'bottom'], + data: data, + range: [-2, 5] + }); + }); + </script> + </body> +</html>
\ No newline at end of file diff --git a/debian/missing-sources/epoch/tests/render/real-time/bar.html b/debian/missing-sources/epoch/tests/render/real-time/bar.html new file mode 100644 index 0000000..952119c --- /dev/null +++ b/debian/missing-sources/epoch/tests/render/real-time/bar.html @@ -0,0 +1,484 @@ +<!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> + <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 Bar Test</h1> + <p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> » Real-time Bar</p> + <ol> + <li><a href="#test-1">Single Series</a></li> + <li><a href="#test-2">Single Series Single Transition</a></li> + <li><a href="#test-3">Single Seires Stream</a></li> + <li><a href="#test-4">Multi Series</a></li> + <li><a href="#test-5">Multi Series Single Transition</a></li> + <li><a href="#test-6">Multi Seires Stream</a></li> + <li><a href="#test-7">Color Override</a></li> + <li><a href="#test-8">Categorical Colors</a></li> + <li><a href="#test-9">Show/Hide Layers</a></li> + </ol> + + <!-- Test 1 --> + <div id="test-1" class="test"> + <h2>1. Single Series</h2> + <p> + Correctly render a single series plot of <code>y = cos(x) + 1</code> over the range <code>[0, 2π]</code>. + </p> + <div class="epoch"></div> + </div> + + <script> + $(function() { + var data = [{ label: 'A', values: [] }], + length = 40; + + for (var i = 0; i < length; i++) { + var x = i * 2 * Math.PI / length, + y = Math.cos(x) + 1, + time = nextTime(); + data[0].values.push({time: time, y: y}); + } + + $('#test-1 .epoch').epoch({ type: 'time.bar', data: data }); + }); + </script> + + <!-- Test 2 --> + <div id="test-2" class="test"> + <h2>2. Single Series Single Transition</h2> + <p> + Correctly render a single series plot of <code>y = sin(x) + 1</code>. When the button is pressed push a new data point to the chart and correctly animate/render the transiton. + </p> + <div class="epoch"></div> + <p><button>Next</button></p> + </div> + + <script> + $(function() { + var data = [{ label: 'A', values: [] }], + length = 40, + nextIndex = length; + + for (var i = 0; i < length; i++) { + var x = i * 2 * Math.PI / length, + y = Math.sin(x) + 1, + time = nextTime(); + data[0].values.push({time: time, y: y}); + } + + var chart = $('#test-2 .epoch').epoch({ + type: 'time.bar', + data: data + }); + + $('#test-2 button').on('click', function(e) { + var x = nextIndex * 2 * Math.PI / length, + y = Math.sin(x) + 1, + time = nextTime(); + nextIndex++; + chart.push([{ time: time, y: y }]); + }); + }); + </script> + + + <!-- Test 3 --> + <div id="test-3" class="test"> + <h2>3. Single Seires Stream</h2> + <p>Correctly play / pause a single series stream of values from the plot <code>y = cos(x) + 1</code>.</p> + <div class="epoch"></div> + <p><button>Play</button></p> + </div> + + <script> + $(function() { + var data = [{ label: 'A', values: [] }], + length = 40, + nextIndex = length, + playing = false, + interval = null; + + for (var i = 0; i < length; i++) { + var x = i * 2 * Math.PI / length, + y = Math.cos(x) + 1, + time = nextTime(); + data[0].values.push({time: time, y: y}); + } + + var chart = $('#test-3 .epoch').epoch({ + type: 'time.bar', + data: data + }); + + var pushPoint = function() { + var x = nextIndex * 2 * Math.PI / length, + y = Math.cos(x) + 1, + time = nextTime(); + chart.push([{ time: time, y: y}]); + nextIndex++; + }; + + $('#test-3 button').on('click', function(e) { + if (playing) { + $(e.target).text('Play'); + clearInterval(interval); + } + else { + $(e.target).text('Pause'); + pushPoint(); + interval = setInterval(pushPoint, 1000); + } + playing = !playing; + }); + }); + </script> + + <!-- Test 4 --> + <div id="test-4" class="test"> + <h2>4. Multi Series</h2> + <p>Correctly render a multi series plot of the following functions:</p> + <ul> + <li><code>y = log(x+1)</code></li> + <li><code>y = 2*log(x+1)</code></li> + <li><code>y = 3*log(x+1)</code></li> + </ul> + <div class="epoch"></div> + </div> + + <script> + $(function() { + var data = [ + {label: 'A', values: []}, + {label: 'B', values: []}, + {label: 'C', values: []} + ], + length = 40; + + for (var i = 0; i < length; i++) { + var x = i + 1, + time = nextTime(); + for (var j = 0; j < data.length; j++) { + data[j].values.push({time: time, y: (j+1) * Math.log(x)}); + } + } + + $('#test-4 .epoch').epoch({ + type: 'time.bar', + data: data, + axes: ['left', 'right', 'bottom'] + }); + }); + </script> + + + <!-- Test 5 --> + <div id="test-5" class="test"> + <h2>5. Multi Series Single Transition</h2> + <p> + Correctly render a multi series plot of the following functions: + <ul> + <li><code>y = x</code></li> + <li><code>y = x<sup>1.25</sup></code></li> + <li><code>y = x<sup>1.5</sup></code></li> + </ul> + and correctly render/animate the transiton after pressing the "Next" button. + </p> + <div class="epoch"></div> + <p> + <button>Next</button> + </p> + </div> + + <script> + $(function() { + var data = [ + {label: 'A', values: []}, + {label: 'B', values: []}, + {label: 'C', values: []} + ], + length = 40, + scale = 0.1, + nextIndex = length; + + for (var i = 0; i < length; i++) { + var x = i * scale, + time = nextTime(); + data[0].values.push({time: time, y: x}); + data[1].values.push({time: time, y: Math.pow(x, 1.25)}); + data[2].values.push({time: time, y: Math.pow(x, 1.5)}); + } + + var chart = $('#test-5 .epoch').epoch({ + type: 'time.bar', + data: data, + axes: ['left', 'right', 'bottom'] + }); + + $('#test-5 button').on('click', function(e) { + var x = nextIndex * scale, + time = nextTime(); + nextIndex++; + chart.push([ + {time: time, y: x}, + {time: time, y: Math.pow(x, 1.25)}, + {time: time, y: Math.pow(x, 1.5)} + ]); + }); + }); + </script> + + <!-- Test 6 --> + <div id="test-6" class="test"> + <h2>6. Multi Seires Stream</h2> + <p> + Correctly play / pause a multi series stream of values over the following plots: + <ul> + <li><code>x</code></li> + <li><code>x * log(x)</code></li> + <li><code>x * log<sup>2</sup>(x)</code></li> + </ul> + </p> + <div class="epoch"></div> + <p><button>Play</button></p> + </div> + + <script> + $(function() { + var data = [ + {label: 'A', values: []}, + {label: 'B', values: []}, + {label: 'C', values: []} + ], + length = 40, + nextIndex = length, + scale = 0.1, + playing = false, + interval = null; + + for (var i = 0; i < length; i++) { + var x = (i+1) * scale, + time = nextTime(); + data[0].values.push({time: time, y: x}); + data[1].values.push({time: time, y: x * Math.log(x)}); + data[2].values.push({time: time, y: x * Math.pow(Math.log(x), 2)}); + } + + var chart = $('#test-6 .epoch').epoch({ + type: 'time.bar', + data: data, + axes: ['right', 'bottom'] + }); + + var pushPoint = function() { + var x = (nextIndex +1) * scale, + time = nextTime(); + chart.push([ + { time: time, y: x}, + { time: time, y: x * Math.log(x)}, + { time: time, y: x * Math.pow(Math.log(x), 2)} + ]); + nextIndex++; + }; + + $('#test-6 button').on('click', function(e) { + if (playing) { + $(e.target).text('Play'); + clearInterval(interval); + } + else { + $(e.target).text('Pause'); + interval = setInterval(pushPoint, 1000); + pushPoint(); + } + playing = !playing; + }); + }); + </script> + + <!-- Test 7 --> + <div id="test-7" class="test"> + <h2>7. Color Override</h2> + <p>The first layer should pink, the second green, and the third blue.</p> + <div id="test-7-plot" class="epoch"></div> + </div> + + <style> + #test-7-plot .bar.a { fill: pink; } + #test-7-plot .bar.b { fill: green; } + #test-7-plot .bar.c { fill: blue; } + </style> + + <script> + $(function() { + var data = [ + {label: 'A', values: []}, + {label: 'B', values: []}, + {label: 'C', values: []} + ], + length = 40; + + for (var i = 0; i < length; i++) { + var x = i + 1, + time = nextTime(); + for (var j = 0; j < data.length; j++) { + data[j].values.push({time: time, y: (j+1) * Math.log(x)}); + } + } + + $('#test-7 .epoch').epoch({ + type: 'time.bar', + data: data + }); + }); + </script> + + <!-- Test 8 --> + <div id="test-8" class="test"> + <h2>8. Categorical Colors</h2> + <p>Correctly render and switch between different categorical colors. Unlike with the basic charts this doesn't occur just by switching the class name on the containing element. The CSS query engine must be purge and the plot must be manually redrawn, like so:<code><pre> +Epoch.QueryCSS.purge(); +chart.draw(); +</pre></code> + </p> + + <div class="epoch category10"></div> + + <p> + <button data-class="category10">category10</button> + <button data-class="category20">category20</button> + <button data-class="category20b">category20b</button> + <button data-class="category20c">category20c</button> + </p> + </div> + + <script> + $(function() { + var data = [], + length = 41, + className = "category10", + layers = 8, + time = nextTime(); + + for (var i = 0; i < layers; i++) { + var layer = { label: String.fromCharCode(i+65), values: [] }; + for (var j = 0; j < length; j++) { + var x = j + 1, + y = Math.pow(x, 1 + 0.3 * Math.log(Math.log(Math.log(x+1) + 1) + 1)); + layer.values.push({ time: time + j, y: y }); + } + data.push(layer); + } + + var chart = $('#test-8 .epoch').epoch({ type: 'time.bar', data: data }); + + $('#test-8 button').on('click', function(e) { + $('#test-8 .epoch').removeClass(className); + className = $(e.target).attr('data-class'); + $('#test-8 .epoch').addClass(className); + Epoch.QueryCSS.purge(); + chart.draw(); + }); + }); + </script> + + <!-- Test 9 --> + <div id="test-9" class="test"> + <h2>9. Show/Hide Layers</h2> + <div class="epoch"></div> + <p> + <button class="toggle" data-index="0">Toggle A</button> + <button class="toggle" data-index="1">Toggle B</button> + <button class="toggle" data-index="2">Toggle C</button> | + <button class="playback">Play</button> + </p> + </div> + <script> + $(function() { + var data = [ + { label: 'A', values: [] }, + { label: 'B', values: [] }, + { label: 'C', values: [] } + ], + time = nextTime(), + j = 0, + interval = null; + + for (var i = 0; i < data.length; i++) { + for (j = 0; j < 60; j++) { + data[i].values.push({time: time+j, y: 0.25*(i+4)*j }) + } + } + + function nextPoint() { + var entry = [] + for (var i = 0; i < data.length; i++) { + entry.push({time: time+j, y: 0.25*(i+4)*j }); + } + chart.push(entry); + j++; + } + + var chart = $('#test-9 .epoch').epoch({ type: 'time.bar', data: data }); + + $('#test-9 .toggle').click(function(e) { + var index = parseInt($(e.target).attr('data-index')); + chart.toggleLayer(index); + }); + + $('#test-9 .playback').click(function(e) { + if (interval == null) { + interval = setInterval(nextPoint, 1000); + nextPoint(); + $(e.target).text('Pause'); + } + else { + clearInterval(interval); + interval = null; + $(e.target).text('Play'); + } + }); + }); + </script> + + <!-- Test 10 --> + <div id="test-10" class="test"> + <h2>10. Fixed Range</h2> + <p> + Render a single series plot of <code>y = cos(x) + 1</code>. Instead of automatically setting the range to <code>[0, 2]</code>, the range is manually set to <code>[0, 5]</code>. + </p> + <div class="epoch"></div> + </div> + + <script> + $(function() { + var data = [{ label: 'A', values: [] }], + length = 40; + + for (var i = 0; i < length; i++) { + var x = i * 2 * Math.PI / length, + y = Math.cos(x) + 1, + time = nextTime(); + data[0].values.push({time: time, y: y}); + } + + $('#test-10 .epoch').epoch({ + type: 'time.bar', + axes: ['right', 'bottom'], + data: data, + range: [0, 5] + }); + }); + </script> + </body> +</html>
\ No newline at end of file diff --git a/debian/missing-sources/epoch/tests/render/real-time/gauge.html b/debian/missing-sources/epoch/tests/render/real-time/gauge.html new file mode 100644 index 0000000..614334d --- /dev/null +++ b/debian/missing-sources/epoch/tests/render/real-time/gauge.html @@ -0,0 +1,283 @@ +<!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> + <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> diff --git a/debian/missing-sources/epoch/tests/render/real-time/heatmap.html b/debian/missing-sources/epoch/tests/render/real-time/heatmap.html new file mode 100644 index 0000000..ddabe2e --- /dev/null +++ b/debian/missing-sources/epoch/tests/render/real-time/heatmap.html @@ -0,0 +1,559 @@ +<!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"> + </head> + <body> + <h1>Real-time Heatmap Plot Test</h1> + <p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> » Real-time Heatmap</p> + <ol> + <li><a href="#test-1">Single Series - Normal</a></li> + <li><a href="#test-2">Single Series - Beta</a></li> + <li><a href="#test-3">Single Series - Normal, Single Update</a></li> + <li><a href="#test-4">Single Series - Beta, Stream Update</a></li> + <li><a href="#test-5">Single Series - Color Override</a></li> + <li><a href="#test-6">Multi Series - Normal + Beta</a></li> + <li><a href="#test-7">Multi Series Color Override</a></li> + <li><a href="#test-8">Range Independent Bucketing</a></li> + <li><a href="#test-9">Option: buckets</a></li> + <li><a href="#test-10">Option: bucketRange</a></li> + <li><a href="#test-11">Option: bucketPadding</a></li> + <li><a href="#test-12">Option: cutOutliers</a></li> + <li><a href="#test-13">Option: opacity</a></li> + <li><a href="#test-14">Show/Hide Layer</a></li> + </ol> + + <!-- Test 1 --> + <div id="test-1" class="test"> + <h2>1. Single Series - Normal</h2> + <p>Select random values from the normal distribution and display them with the heatmap.</p> + <div class="epoch"></div> + </div> + <script> + $(function() { + var data = new NormalData(1); + $('#test-1 .epoch').epoch({ + type: 'time.heatmap', + data: data.history(120), + windowSize: 120, + buckets: 20 + }); + }); + </script> + + <!-- Test 2 --> + <div id="test-2" class="test"> + <h2>2. Single Series - Beta </h2> + <p>Select random values from the Beta(2, 5) distribution and display them with the heatmap.</p> + <div class="epoch"></div> + </div> + <script> + $(function() { + var data = new BetaData(2, 5, 1); + $('#test-2 .epoch').epoch({ + type: 'time.heatmap', + data: data.history(120), + windowSize: 120, + buckets: 20 + }); + }); + </script> + + <!-- Test 3 --> + <div id="test-3" class="test"> + <h2>3. Single Sieres - Normal, Single Update</h2> + <p> + Plot the normal distribution and transition a new element when the button is pressed. + </p> + <div class="epoch"></div> + <p><button>Next</button></p> + </div> + <script> + $(function() { + var data = new NormalData(1); + var chart = $('#test-3 .epoch').epoch({ + type: 'time.heatmap', + data: data.history(120), + windowSize: 120, + buckets: 20 + }); + $('#test-3 button').on('click', function(e) { + chart.push(data.next()); + }); + }); + </script> + + <!-- Test 4 --> + <div id="test-4" class="test"> + <h2>4. Single Series - Beta, Stream Update</h2> + <p> + Plot the Beta(2, 5) distribution and begin streaming new elements each second once the + button is pressed. + </p> + <div class="epoch"></div> + <button>Play</button> + </div> + + <script> + $(function() { + var data = new BetaData(2, 5, 1), + interval = null; + var chart = $('#test-4 .epoch').epoch({ + type: 'time.heatmap', + data: data.history(120), + windowSize: 120, + buckets: 20 + }); + $('#test-4 button').on('click', function(e) { + if (interval === null) { + chart.push(data.next()); + interval = setInterval(function() { + chart.push(data.next()); + }, 1000); + $(e.target).text('Pause'); + } + else { + clearInterval(interval); + interval = null; + $(e.target).text('Play'); + } + }); + }); + </script> + + <!-- Test 5 --> + <div id="test-5" class="test"> + <h2>5. Single Series - Color Override</h2> + <p>Change the bucket base color to orange and plot the Beta(2, 2) distribution.</p> + <div id="test-5-plot" class="epoch"></div> + </div> + + <style> + #test-5-plot .a rect.bucket { fill: darkorange; } + </style> + + <script> + $(function() { + var data = new BetaData(2, 2, 1); + $('#test-5 .epoch').epoch({ + type: 'time.heatmap', + data: data.history(120), + windowSize: 120, + buckets: 20 + }); + }); + </script> + + <!-- Test 6 --> + <div id="test-6" class="test"> + <h2>6. Multi Series - Normal + Beta</h2> + <p> + Plot the Beta(2,5) and Normal distributions as two layers in a single heatmap. Stream elements to the plot + by pressing the button. The normal distribution layer is in blue and the beta in green. + </p> + <div class="epoch"></div> + <button>Play</button> + </div> + <script> + $(function() { + var normal = new NormalData(1), + normalData = normal.history(120)[0], + beta = new BetaData(2, 5, 1), + betaData = beta.history(120)[0], + data = [normalData, betaData], + interval = null; + + var chart = $('#test-6 .epoch').epoch({ + type: 'time.heatmap', + data: data, + windowSize: 120, + buckets: 20 + }); + + function pushNext() { + chart.push([normal.next()[0], beta.next()[0]]); + } + + $('#test-6 button').on('click', function(e) { + if (interval == null) { + pushNext(); + interval = setInterval(pushNext, 1000); + $(e.target).text('Pause'); + } + else { + clearInterval(interval); + interval = null; + $(e.target).text('Play'); + } + }); + }); + </script> + + <!-- Test 7 --> + <div id="test-7" class="test"> + <h2>7. Multi Series Color Override</h2> + <p> + Plot the normal distribution and the Beta(2, 5) distribution overrding normal to be in red, and beta to + be in purple. + </p> + <div id="test-7-plot" class="epoch"></div> + </div> + + <style> + #test-7-plot .a rect.bucket { fill: red; } + #test-7-plot .b rect.bucket { fill: purple; } + </style> + + <script> + $(function() { + var normal = new NormalData(1), + normalData = normal.history(120)[0], + beta = new BetaData(2, 5, 1), + betaData = beta.history(120)[0], + interval = null; + + normalData.label = 'A'; + betaData.label = 'B'; + + var chart = $('#test-7 .epoch').epoch({ + type: 'time.heatmap', + data: [normalData, betaData], + windowSize: 120, + buckets: 20 + }); + }); + </script> + + <!-- Test 8 --> + <div id="test-8" class="test"> + <h2>8. Range Independent Bucketing (<a href="https://github.com/fastly/epoch/issues/41">Issue #41</a>)</h2> + <p> + Discrete bucketing of sparse histogram values should produce similar looking graphs regardless + of numeric relation between the range of the plot and the number of buckets. + </p> + <h3>Range [0, 100] with 20 buckets</h3> + <div class="chart1 epoch"></div> + + <h3>Range [0, 100] with 45 buckets</h3> + <div class="chart2 epoch"></div> + </div> + <script> + $(function() { + var normal = new NormalData(1), + data = normal.history(120); + + console.log(data); + + $('#test-8 .chart1').epoch({ + type: 'time.heatmap', + data: data, + windowSize: 120, + buckets: 20 + }); + $('#test-8 .chart2').epoch({ + type: 'time.heatmap', + data: data, + windowSize: 120, + buckets: 45 + }); + }); + </script> + + <!-- Test 9 --> + <div id="test-9" class="test"> + <h2>9. Option: buckets</h2> + <div class="epoch"></div> + <p> + <button class="playback">Play</button> | + <button class="buckets" data-buckets="10">10 Buckets</button> + <button class="buckets" data-buckets="20">20 Buckets</button> + <button class="buckets" data-buckets="40">40 Buckets</button> + </p> + </div> + <script> + $(function() { + var beta = new BetaData(2, 5, 1), + data = beta.history(120); + + var chart = $('#test-9 .epoch').epoch({ + type: 'time.heatmap', + data: data, + buckets: 10 + }); + + var interval = null, + pushPoint = function () { chart.push(beta.next()); }; + + $('#test-9 .playback').click(function(e) { + if (interval == null) { + $(e.target).text('Pause'); + pushPoint(); + interval = setInterval(pushPoint, 1000); + } + else { + $(e.target).text('Play'); + clearInterval(interval); + interval = null; + } + }); + + $('#test-9 .buckets').click(function(e) { + var buckets = parseInt($(e.target).attr('data-buckets')); + chart.option('buckets', buckets); + }); + }); + </script> + + <!-- Test 10 --> + <div id="test-10" class="test"> + <h2>10. Option: bucketRange</h2> + <div class="epoch"></div> + <p> + <button class="playback">Play</button> | + <button class="bucketRange" data-bucket-range="0,100">[0, 100]</button> + <button class="bucketRange" data-bucket-range="0,75">[0, 75]</button> + <button class="bucketRange" data-bucket-range="0,50">[0, 50]</button> + <button class="bucketRange" data-bucket-range="0,25">[0, 25]</button> + <button class="bucketRange" data-bucket-range="10,75">[10,75]</button> + </p> + </div> + <script> + $(function() { + var beta = window.beta = new BetaData(2, 5, 1), + data = beta.history(120); + + var chart = $('#test-10 .epoch').epoch({ + type: 'time.heatmap', + data: data, + axes: ['left', 'right'], + buckets: 20, + windowSize: 100, + cutOutliers: true + }); + + var interval = null, + pushPoint = function () { chart.push(beta.next()); }; + + $('#test-10 .playback').click(function(e) { + if (interval == null) { + $(e.target).text('Pause'); + pushPoint(); + interval = setInterval(pushPoint, 1000); + } + else { + $(e.target).text('Play'); + clearInterval(interval); + interval = null; + } + }); + + $('#test-10 .bucketRange').click(function(e) { + var bucketRange = $(e.target).attr('data-bucket-range') + .split(',').map(function(d) { return parseInt(d); }); + chart.option('bucketRange', bucketRange); + }); + }); + </script> + + <!-- Test 11 --> + <div id="test-11" class="test"> + <h2>11. Option: bucketPadding</h2> + <div class="epoch"></div> + <p> + <button class="playback">Play</button> | + <button class="bucketPadding" data-bucket-padding="0">Padding: 0</button> + <button class="bucketPadding" data-bucket-padding="2">Padding: 2</button> + <button class="bucketPadding" data-bucket-padding="4">Padding: 4</button> + <button class="bucketPadding" data-bucket-padding="8">Padding: 8</button> + </p> + </div> + <script> + $(function() { + var beta = window.beta = new BetaData(2, 5, 1), + data = beta.history(120); + + var chart = $('#test-11 .epoch').epoch({ + type: 'time.heatmap', + data: data, + axes: [], + buckets: 15, + windowSize: 100 + }); + + var interval = null, + pushPoint = function () { chart.push(beta.next()); }; + + $('#test-11 .playback').click(function(e) { + if (interval == null) { + $(e.target).text('Pause'); + pushPoint(); + interval = setInterval(pushPoint, 1000); + } + else { + $(e.target).text('Play'); + clearInterval(interval); + interval = null; + } + }); + + $('#test-11 .bucketPadding').click(function(e) { + var bucketPadding = parseInt($(e.target).attr('data-bucket-padding')); + console.log(bucketPadding) + chart.option('bucketPadding', bucketPadding); + }); + }); + </script> + + <!-- Test 12 --> + <div id="test-12" class="test"> + <h2>12. Option: cutOutliers</h2> + <div class="epoch"></div> + <p> + <button class="playback">Play</button> | + <button class="cutOutliers" data-value="false">Keep Outliers</button> + <button class="cutOutliers" data-value="true">Cut Outliers</button> + </p> + </div> + <script> + $(function() { + var beta = window.beta = new BetaData(2, 5, 1), + data = beta.history(120); + + var chart = $('#test-12 .epoch').epoch({ + type: 'time.heatmap', + data: data, + axes: ['left', 'right'], + bucketRange: [0, 25], + buckets: 15, + windowSize: 100 + }); + + var interval = null, + pushPoint = function () { chart.push(beta.next()); }; + + $('#test-12 .playback').click(function(e) { + if (interval == null) { + $(e.target).text('Pause'); + pushPoint(); + interval = setInterval(pushPoint, 1000); + } + else { + $(e.target).text('Play'); + clearInterval(interval); + interval = null; + } + }); + + $('#test-12 .cutOutliers').click(function(e) { + var cutOutliers = $(e.target).attr('data-value') == "true" ? true : false; + chart.option('cutOutliers', cutOutliers); + }); + }); + </script> + + <div id="test-13" class="test"> + <h2>13. Option: opacity</h2> + <div class="epoch"></div> + <p> + <button class="playback">Play</button> | + <select class="opacity"> + <option value="root">√n</option> + <option value="linear" selected>n</option> + <option value="quadratic">n<sup>2</sup></option> + <option value="cubic">n<sup>3</sup></option> + <option value="quartic">n<sup>4</sup></option> + <option value="quintic">n<sup>5</sup></option> + </select> + </p> + </div> + <script> + $(function() { + var beta = window.beta = new BetaData(2, 5, 1), + data = beta.history(120); + + var chart = $('#test-13 .epoch').epoch({ + type: 'time.heatmap', + data: data, + axes: [], + buckets: 20, + windowSize: 100 + }); + + var interval = null, + pushPoint = function () { chart.push(beta.next()); }; + + $('#test-13 .playback').click(function(e) { + if (interval == null) { + $(e.target).text('Pause'); + pushPoint(); + interval = setInterval(pushPoint, 1000); + } + else { + $(e.target).text('Play'); + clearInterval(interval); + interval = null; + } + }); + + $('#test-13 select.opacity').on('change', function(e) { + var opacity = $('#test-13 select.opacity').val(); + chart.option('opacity', opacity); + }); + }); + </script> + + <div id="test-14" class="test"> + <h2>14. Show/Hide Layer</h2> + <div class="epoch"></div> + <p> + <button class="toggle" data-index="0">Toggle A</button> + <button class="toggle" data-index="1">Toggle B</button> | + <button class="playback">Play</button> + </p> + </div> + <script> + $(function() { + var normal = new NormalData(1), + normalData = normal.history(120)[0], + beta = new BetaData(2, 5, 1), + betaData = beta.history(120)[0], + data = [normalData, betaData], + interval = null; + + var chart = $('#test-14 .epoch').epoch({ + type: 'time.heatmap', + data: data, + windowSize: 120, + buckets: 20 + }); + + $('#test-14 .toggle').click(function(e) { + var index = parseInt($(e.target).attr('data-index')); + chart.toggleLayer(index); + }); + + function pushNext() { + chart.push([normal.next()[0], beta.next()[0]]); + } + + $('#test-14 .playback').on('click', function(e) { + if (interval == null) { + pushNext(); + interval = setInterval(pushNext, 1000); + $(e.target).text('Pause'); + } + else { + clearInterval(interval); + interval = null; + $(e.target).text('Play'); + } + }); + }); + </script> + </body> +</html> diff --git a/debian/missing-sources/epoch/tests/render/real-time/line.html b/debian/missing-sources/epoch/tests/render/real-time/line.html new file mode 100644 index 0000000..3346c98 --- /dev/null +++ b/debian/missing-sources/epoch/tests/render/real-time/line.html @@ -0,0 +1,596 @@ +<!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.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 Line Plot Test</h1> + <p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> » Real-time Line</p> + <ol> + <li><a href="#test-1">Single Series</a></li> + <li><a href="#test-2">Single Series Single Transition</a></li> + <li><a href="#test-3">Single Seires Stream</a></li> + <li><a href="#test-4">Multi Series</a></li> + <li><a href="#test-5">Multi Series Single Transition</a></li> + <li><a href="#test-6">Multi Seires Stream</a></li> + <li><a href="#test-7">Color Override</a></li> + <li><a href="#test-8">Categorical Colors</a></li> + <li><a href="#test-9">Show/Hide Layers</a></li> + <li><a href="#test-10">Show/Hide Layers</a></li> + <li><a href="#test-11">Multiaxes</a></li> + </ol> + + <!-- Test 1 --> + <div id="test-1" class="test"> + <h2>1. Single Series</h2> + <p> + Correctly render a single series plot of <code>y = cos(x) + 1</code> over the range <code>[0, 2π]</code>. + </p> + <div class="epoch"></div> + </div> + + <script> + $(function() { + var data = [{ label: 'A', values: [] }], + length = 40; + + for (var i = 0; i < length; i++) { + var x = i * 2 * Math.PI / length, + y = Math.cos(x) + 1, + time = nextTime(); + data[0].values.push({time: time, y: y}); + } + + $('#test-1 .epoch').epoch({ type: 'time.line', data: data }); + }); + </script> + + <!-- Test 2 --> + <div id="test-2" class="test"> + <h2>2. Single Series Single Transition</h2> + <p> + Correctly render a single series plot of <code>y = sin(x) + 1</code>. When the button is pressed push a new data point to the chart and correctly animate/render the transiton. + </p> + <div class="epoch"></div> + <p><button>Next</button></p> + </div> + + <script> + $(function() { + var data = [{ label: 'A', values: [] }], + length = 40, + nextIndex = length; + + for (var i = 0; i < length; i++) { + var x = i * 2 * Math.PI / length, + y = Math.sin(x) + 1, + time = nextTime(); + data[0].values.push({time: time, y: y}); + } + + var chart = $('#test-2 .epoch').epoch({ + type: 'time.line', + data: data + }); + + $('#test-2 button').on('click', function(e) { + var x = nextIndex * 2 * Math.PI / length, + y = Math.sin(x) + 1, + time = nextTime(); + nextIndex++; + chart.push([{ time: time, y: y }]); + }); + }); + </script> + + + <!-- Test 3 --> + <div id="test-3" class="test"> + <h2>3. Single Seires Stream</h2> + <p>Correctly play / pause a single series stream of values from the plot <code>y = cos(x) + 1</code>.</p> + <div class="epoch"></div> + <p><button>Play</button></p> + </div> + + <script> + $(function() { + var data = [{ label: 'A', values: [] }], + length = 40, + nextIndex = length, + playing = false, + interval = null; + + for (var i = 0; i < length; i++) { + var x = i * 2 * Math.PI / length, + y = Math.cos(x) + 1, + time = nextTime(); + data[0].values.push({time: time, y: y}); + } + + var chart = $('#test-3 .epoch').epoch({ + type: 'time.line', + data: data + }); + + var pushPoint = function() { + var x = nextIndex * 2 * Math.PI / length, + y = Math.cos(x) + 1, + time = nextTime(); + chart.push([{ time: time, y: y}]); + nextIndex++; + }; + + $('#test-3 button').on('click', function(e) { + if (playing) { + $(e.target).text('Play'); + clearInterval(interval); + } + else { + $(e.target).text('Pause'); + pushPoint(); + interval = setInterval(pushPoint, 1000); + } + playing = !playing; + }); + }); + </script> + + <!-- Test 4 --> + <div id="test-4" class="test"> + <h2>4. Multi Series</h2> + <p>Correctly render a multi series plot of the following functions:</p> + <ul> + <li><code>y = log(x+1)</code></li> + <li><code>y = 2*log(x+1)</code></li> + <li><code>y = 3*log(x+1)</code></li> + </ul> + <div class="epoch"></div> + </div> + + <script> + $(function() { + var data = [ + {label: 'A', values: []}, + {label: 'B', values: []}, + {label: 'C', values: []} + ], + length = 40; + + for (var i = 0; i < length; i++) { + var x = i + 1, + time = nextTime(); + for (var j = 0; j < data.length; j++) { + data[j].values.push({time: time, y: (j+1) * Math.log(x)}); + } + } + + $('#test-4 .epoch').epoch({ + type: 'time.line', + data: data, + axes: ['left', 'right', 'bottom'] + }); + }); + </script> + + + <!-- Test 5 --> + <div id="test-5" class="test"> + <h2>5. Multi Series Single Transition</h2> + <p> + Correctly render a multi series plot of the following functions: + <ul> + <li><code>y = x</code></li> + <li><code>y = x<sup>1.25</sup></code></li> + <li><code>y = x<sup>1.5</sup></code></li> + </ul> + and correctly render/animate the transiton after pressing the "Next" button. + </p> + <div class="epoch"></div> + <p> + <button>Next</button> + </p> + </div> + + <script> + $(function() { + var data = [ + {label: 'A', values: []}, + {label: 'B', values: []}, + {label: 'C', values: []} + ], + length = 40, + scale = 0.1, + nextIndex = length; + + for (var i = 0; i < length; i++) { + var x = i * scale, + time = nextTime(); + data[0].values.push({time: time, y: x}); + data[1].values.push({time: time, y: Math.pow(x, 1.25)}); + data[2].values.push({time: time, y: Math.pow(x, 1.5)}); + } + + var chart = $('#test-5 .epoch').epoch({ + type: 'time.line', + data: data, + axes: ['left', 'right', 'bottom'] + }); + + $('#test-5 button').on('click', function(e) { + var x = nextIndex * scale, + time = nextTime(); + nextIndex++; + chart.push([ + {time: time, y: x}, + {time: time, y: Math.pow(x, 1.25)}, + {time: time, y: Math.pow(x, 1.5)} + ]); + }); + }); + </script> + + <!-- Test 6 --> + <div id="test-6" class="test"> + <h2>6. Multi Seires Stream</h2> + <p> + Correctly play / pause a multi series stream of values over the following plots: + <ul> + <li><code>x</code></li> + <li><code>x * log(x)</code></li> + <li><code>x * log<sup>2</sup>(x)</code></li> + </ul> + </p> + <div class="epoch"></div> + <p><button>Play</button></p> + </div> + + <script> + $(function() { + var data = [ + {label: 'A', values: []}, + {label: 'B', values: []}, + {label: 'C', values: []} + ], + length = 40, + nextIndex = length, + scale = 0.1, + playing = false, + interval = null; + + for (var i = 0; i < length; i++) { + var x = (i+1) * scale, + time = nextTime(); + data[0].values.push({time: time, y: x}); + data[1].values.push({time: time, y: x * Math.log(x)}); + data[2].values.push({time: time, y: x * Math.pow(Math.log(x), 2)}); + } + + var chart = $('#test-6 .epoch').epoch({ + type: 'time.line', + data: data, + axes: ['right', 'bottom'] + }); + + var pushPoint = function() { + var x = (nextIndex +1) * scale, + time = nextTime(); + chart.push([ + { time: time, y: x}, + { time: time, y: x * Math.log(x)}, + { time: time, y: x * Math.pow(Math.log(x), 2)} + ]); + nextIndex++; + }; + + $('#test-6 button').on('click', function(e) { + if (playing) { + $(e.target).text('Play'); + clearInterval(interval); + } + else { + $(e.target).text('Pause'); + interval = setInterval(pushPoint, 1000); + pushPoint(); + } + playing = !playing; + }); + }); + </script> + + <!-- Test 7 --> + <div id="test-7" class="test"> + <h2>7. Color Override</h2> + <p>The first layer should pink, the second green, and the third blue.</p> + <div id="test-7-plot" class="epoch"></div> + </div> + + <style> + #test-7-plot .a .line { stroke: pink; } + #test-7-plot .b .line { stroke: green; } + #test-7-plot .c .line { stroke: blue; } + </style> + + <script> + $(function() { + var data = [ + {label: 'A', values: []}, + {label: 'B', values: []}, + {label: 'C', values: []} + ], + length = 40; + + for (var i = 0; i < length; i++) { + var x = i + 1, + time = nextTime(); + for (var j = 0; j < data.length; j++) { + data[j].values.push({time: time, y: (j+1) * Math.log(x)}); + } + } + + $('#test-7 .epoch').epoch({ + type: 'time.line', + data: data + }); + }); + </script> + + <!-- Test 8 --> + <div id="test-8" class="test"> + <h2>8. Categorical Colors</h2> + <p>Correctly render and switch between different categorical colors. Unlike with the basic charts this doesn't occur just by switching the class name on the containing element. The CSS query engine must be purge and the plot must be manually redrawn, like so:<code><pre> +Epoch.QueryCSS.purge(); +chart.draw(); +</pre></code> + </p> + + <div class="epoch category10"></div> + + <p> + <button data-class="category10">category10</button> + <button data-class="category20">category20</button> + <button data-class="category20b">category20b</button> + <button data-class="category20c">category20c</button> + </p> + </div> + + <script> + $(function() { + var data = [], + length = 41, + className = "category10", + layers = 8, + time = nextTime(); + + for (var i = 0; i < layers; i++) { + var layer = { label: String.fromCharCode(i+65), values: [] }; + for (var j = 0; j < length; j++) { + var x = j + 1, + y = Math.pow(x, i * 0.02); + layer.values.push({ time: time + j, y: y }); + } + data.push(layer); + } + + var chart = $('#test-8 .epoch').epoch({ type: 'time.line', data: data }); + + $('#test-8 button').on('click', function(e) { + $('#test-8 .epoch').removeClass(className); + className = $(e.target).attr('data-class'); + $('#test-8 .epoch').addClass(className); + Epoch.QueryCSS.purge(); + chart.draw(); + }); + }); + </script> + + <!-- Test 9 --> + <div id="test-9" class="test"> + <h2>9. Show/Hide Layers</h2> + <div class="epoch"></div> + <p> + <button class="toggle" data-index="0">Toggle A</button> + <button class="toggle" data-index="1">Toggle B</button> + <button class="toggle" data-index="2">Toggle C</button> | + <button class="playback">Play</button> + </p> + </div> + <script> + $(function() { + var data = [ + {label: 'A', values: []}, + {label: 'B', values: []}, + {label: 'C', values: []} + ], + length = 40, + nextIndex = length, + scale = 0.1, + playing = false, + interval = null; + + for (var i = 0; i < length; i++) { + var x = (i+1) * scale, + time = nextTime(); + data[0].values.push({time: time, y: x}); + data[1].values.push({time: time, y: x * Math.log(x)}); + data[2].values.push({time: time, y: x * Math.pow(Math.log(x), 2)}); + } + + var chart = $('#test-9 .epoch').epoch({ + type: 'time.line', + data: data, + axes: ['right', 'bottom'] + }); + + $('#test-9 .toggle').click(function(e) { + var index = parseInt($(e.target).attr('data-index')); + chart.toggleLayer(index); + }); + + var pushPoint = function() { + var x = (nextIndex +1) * scale, + time = nextTime(); + chart.push([ + { time: time, y: x}, + { time: time, y: x * Math.log(x)}, + { time: time, y: x * Math.pow(Math.log(x), 2)} + ]); + nextIndex++; + }; + + $('#test-9 .playback').on('click', function(e) { + if (playing) { + $(e.target).text('Play'); + clearInterval(interval); + } + else { + $(e.target).text('Pause'); + interval = setInterval(pushPoint, 1000); + pushPoint(); + } + playing = !playing; + }); + }); + </script> + + <!-- Test 10 --> + <div id="test-10" class="test"> + <h2>10. Fixed Range</h2> + <p> + Render a single series plot of <code>y = cos(x)</code>. Instead of automatically setting the range to <code>[-1, 1]</code>, the range is manually set to <code>[-2, 5]</code>. + </p> + <div class="epoch"></div> + </div> + + <script> + $(function() { + var data = [{ label: 'A', values: [] }], + length = 40; + + for (var i = 0; i < length; i++) { + var x = i * 2 * Math.PI / length, + y = Math.cos(x), + time = nextTime(); + data[0].values.push({time: time, y: y}); + } + + $('#test-10 .epoch').epoch({ + type: 'time.line', + axes: ['right', 'bottom'], + data: data, + range: [-2, 5] + }); + }); + </script> + + <!-- Test 11 --> + <div id="test-11" class="test"> + <h2>11. Multi-axes</h2> + <p> + Render a plot that uses independent axes ranges for the left and + right sides. + </p> + <div class="epoch"></div> + </div> + + <script> + $(function() { + var data = [ + { + label: 'A', + values: [], + range: [-5, 5] + }, + { + label: 'B', + values: [], + range: [0, 100] + } + ]; + var length = 40; + + for (var i = 0; i < length; i++) { + var x = i * 2 * Math.PI / length, + y = Math.cos(x) + x / 4, + y2 = i * 100/40, + time = nextTime(); + data[0].values.push({time: time, y: y}); + data[1].values.push({time: time, y: y2}); + } + + $('#test-11 .epoch').epoch({ + type: 'time.line', + axes: ['left', 'right'], + data: data, + range: { + right: [-5, 5], + left: [0, 100] + } + }); + }); + </script> + + <!-- Test 12 --> + <div id="test-12" class="test"> + <h2>12. Multi-axes with Labeled Ranges</h2> + <p> + Render a plot that uses independent axes ranges for the left and + right sides that are associated to labels in the chart data. + </p> + <div class="epoch"></div> + </div> + + <script> + $(function() { + var data = [ + { + label: 'A', + values: [], + range: 'range-one' + }, + { + label: 'B', + values: [], + range: 'range-two' + }, + { + label: 'C', + values: [], + range: 'range-one' + } + ]; + var length = 50; + + for (var i = 0; i < length; i++) { + var y = Math.random() * 100; + var y2 = Math.random() * 2; + var y3 = Math.random() * 50 + 75 + var time = nextTime(); + data[0].values.push({time: time, y: y}); + data[1].values.push({time: time, y: y2}); + data[2].values.push({time: time, y: y3}); + } + + $('#test-12 .epoch').epoch({ + type: 'time.line', + axes: ['left', 'right'], + data: data, + range: { + right: 'range-one', + left: 'range-two' + } + }); + }); + </script> + </body> +</html> diff --git a/debian/missing-sources/epoch/tests/render/real-time/model.html b/debian/missing-sources/epoch/tests/render/real-time/model.html new file mode 100644 index 0000000..6f53963 --- /dev/null +++ b/debian/missing-sources/epoch/tests/render/real-time/model.html @@ -0,0 +1,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>
\ No newline at end of file diff --git a/debian/missing-sources/epoch/tests/render/real-time/options.html b/debian/missing-sources/epoch/tests/render/real-time/options.html new file mode 100644 index 0000000..a2da792 --- /dev/null +++ b/debian/missing-sources/epoch/tests/render/real-time/options.html @@ -0,0 +1,299 @@ +<!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>Real-time Chart Options and Events</h1> + <p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> » Real-time Options and Events</p> + <ol> + <li><a href="#test-1">Resize</a></li> + <li><a href="#test-2">Axes</a></li> + <li><a href="#test-3">Ticks</a></li> + <li><a href="#test-4">Tick Formats</a></li> + <li><a href="#test-5">Margins</a></li> + </ol> + + <!-- Test 1 --> + <div id="test-1" class="test"> + <h2>1. Resize</h2> + <p>Correctly Resize a Real-time Chart.</p> + <div class="epoch"></div> + <p> + <button class="playback">Play</button> | + <button class="size" data-index="0">Size: Small</button> + <button class="size" data-index="1">Size: Medium</button> + <button class="size" data-index="2">Size: Large</button> + </p> + </div> + <script> + $(function() { + var step = Math.PI / 30, + data = time().add(function(x) { return Math.cos(x) + 1; }), + interval = null; + + var sizes = [ + { width: 400, height: 100 }, + { width: 800, height: 150 }, + { width: $('#test-1 .epoch').width(), height: $('#test-1 .epoch').height() } + ]; + + var chart = $('#test-1 .epoch').epoch({ + type: 'time.line', + data: data.get([0, 2*Math.PI], step) + }) + + function pushPoint() { + chart.push(data.next(step)); + } + + $('#test-1 .playback').click(function(e) { + if (!interval) { + interval = setInterval(function() { pushPoint() }, 1000); + pushPoint(); + $('#test-1 .playback').text('Pause'); + } + else { + clearInterval(interval); + interval = null; + $('#test-1 .playback').text('Play'); + } + }); + + $('#test-1 .size').click(function(e) { + var size = sizes[parseInt($(e.target).attr('data-index'))]; + chart.option('width', size.width); + chart.option('height', size.height); + }); + }); + </script> + + <!-- Test 2 --> + <div id="test-2" class="test"> + <h2>2. Axes</h2> + <div class="epoch"></div> + <div class="controls"> + <button class="playback">Play</button> | + <button class="axes" data-index="0">All</button> + <button class="axes" data-index="1">[left, right]</button> + <button class="axes" data-index="2">[top, bottom]</button> + <button class="axes" data-index="3">[left, bottom]</button> + <button class="axes" data-index="4">[top, right]</button> + <button class="axes" data-index="5">None</button> + </div> + </div> + <script> + $(function() { + var step = Math.PI / 30, + data = time().add(function(x) { return Math.sin(x) + 1; }), + interval = null; + + var axes = [ + ['top', 'left', 'bottom', 'right'], + ['left', 'right'], + ['top', 'bottom'], + ['left', 'bottom'], + ['top', 'right'], + [] + ]; + + var chart = $('#test-2 .epoch').epoch({ + type: 'time.line', + data: data.get([0, 2*Math.PI], step) + }) + + function pushPoint() { + chart.push(data.next(step)); + } + + $('#test-2 .playback').click(function(e) { + if (!interval) { + interval = setInterval(function() { pushPoint() }, 1000); + pushPoint(); + $('#test-2 .playback').text('Pause'); + } + else { + clearInterval(interval); + interval = null; + $('#test-2 .playback').text('Play'); + } + }); + + $('#test-2 button.axes').click(function(e) { + chart.option('axes', axes[parseInt($(e.target).attr('data-index'))]); + }); + }); + </script> + + <!-- Test 3 --> + <div id="test-3" class="test"> + <h2>3. Ticks</h2> + <div class="epoch"></div> + <p> + <button class="playback">Play</button> | + <button class="ticks" data-index="0">Normal</button> + <button class="ticks" data-index="1">Many</button> + </p> + </div> + <script> + $(function() { + var step = Math.PI / 30, + data = time().add(function(x) { return Math.sqrt(x) * Math.sin(x) + 1; }), + interval = null; + + var ticks = [ + {time: 15, left: 5, right: 5}, + {time: 5, left: 15, right: 15} + ]; + + var chart = $('#test-3 .epoch').epoch({ + type: 'time.line', + data: data.get([0, 2*Math.PI], step), + axes: ['top', 'left', 'bottom', 'right'] + }) + + function pushPoint() { + chart.push(data.next(step)); + } + + $('#test-3 .playback').click(function(e) { + if (!interval) { + interval = setInterval(function() { pushPoint() }, 1000); + pushPoint(); + $('#test-3 .playback').text('Pause'); + } + else { + clearInterval(interval); + interval = null; + $('#test-3 .playback').text('Play'); + } + }); + + $('#test-3 .ticks').click(function(e) { + chart.option('ticks', ticks[parseInt($(e.target).attr('data-index'))]); + }); + }); + </script> + + <!-- Test 4 --> + <div id="test-4" class="test"> + <h2>4. Tick Formats</h2> + <div class="epoch"></div> + <p> + <button class="playback">Play</button> | + <button class="tickFormats" data-index="0">Normal</button> + <button class="tickFormats" data-index="1">Different</button> + </p> + </div> + <script> + $(function() { + var step = Math.PI / 30, + data = time().add(function(x) { return Math.abs(Math.sin(x)); }), + interval = null; + + var tickFormats = [ + { + top: Epoch.Formats.seconds, + bottom: Epoch.Formats.seconds, + left: Epoch.Formats.si, + right: Epoch.Formats.si + }, + { + top: Epoch.Formats.si, + bottom: Epoch.Formats.si, + left: Epoch.Formats.percent, + right: Epoch.Formats.percent + } + ]; + + var chart = $('#test-4 .epoch').epoch({ + type: 'time.area', + data: data.get([0, 2*Math.PI], step), + axes: ['top', 'left', 'bottom', 'right'] + }) + + function pushPoint() { + chart.push(data.next(step)); + } + + $('#test-4 .playback').click(function(e) { + if (!interval) { + interval = setInterval(function() { pushPoint() }, 1000); + pushPoint(); + $('#test-4 .playback').text('Pause'); + } + else { + clearInterval(interval); + interval = null; + $('#test-4 .playback').text('Play'); + } + }); + + $('#test-4 .tickFormats').click(function(e) { + chart.option('tickFormats', tickFormats[parseInt($(e.target).attr('data-index'))]); + }); + }); + </script> + + <!-- Test 5 --> + <div id="test-5" class="test"> + <h2>5. Margins</h2> + <div class="epoch"></div> + <p> + <button class="playback">Play</button> | + <button class="margins" data-index="0">None</button> + <button class="margins" data-index="1">Small</button> + <button class="margins" data-index="2">Big</button> + </p> + </div> + <script> + $(function() { + var step = Math.PI / 30, + data = time().add(function(x) { return 1 - Math.abs(Math.cos(x)); }), + interval = null; + + var margins = [ + { top: 6, bottom: 6, left: 6, right: 6 }, + { top: 20, bottom: 20, left: 20, right: 20 }, + { top: 100, bottom: 50, left: 50, right: 50 } + ]; + + var chart = $('#test-5 .epoch').epoch({ + type: 'time.area', + data: data.get([0, 2*Math.PI], step), + axes: [] + }) + + function pushPoint() { + chart.push(data.next(step)); + } + + $('#test-5 .playback').click(function(e) { + if (!interval) { + interval = setInterval(function() { pushPoint() }, 1000); + pushPoint(); + $('#test-5 .playback').text('Pause'); + } + else { + clearInterval(interval); + interval = null; + $('#test-5 .playback').text('Play'); + } + }); + + $('#test-5 .margins').click(function(e) { + chart.option('margins', margins[parseInt($(e.target).attr('data-index'))]); + }); + }); + </script> + </body> +</html>
\ No newline at end of file |