<div id="dbj_body">
<button id="runner">Run</button>
<button id="cleaner">Clear</button>
<div id="title">DBJ fast Flot ©2019 by DBJ, licence: MIT</div>
<div id="placeholder"></div>
</div>#dbj_body {
margin: 1%;
border: 1px solid;
width: 100%;
height: 110%;
padding: 1%;
font: 14px/1.1 monospace;
}
#placeholder {
clear:both;
width: 90%;
height: 400px;
border: 1px solid;
margin: 1%;
}
button { margin:0.3%; float: left; font-size:large; padding: 1%; }
#title { float: left; font-size: large; margin:1%; padding:1%;}
const rnr = document.getElementById("runner") ;
function runner_flip() {
rnr.disabled = ! rnr.disabled ;
}
var $placeholder = $("#placeholder") ;
$("#cleaner").click(function() {
$placeholder.empty();
});
$("#runner").click(function()
{
runner_flip();
var flot = null,
new_dataset = function(hF_, size_) {
var d1 = [],
d2 = [],
size = size_ || 1400,
hF = hF_ || (20 * Math.random());
for (var i = 0; i < size; i += hF) {
d1.push([i, Math.sin(i)]);
d2.push([i, Math.cos(i)]);
}
return [d1, d2];
},
maxi = 100,
$counter = $("#runner"),
tid = setInterval(function() {
if (1 > maxi--) {
clearInterval(tid);
$counter.html("Run");
runner_flip();
return;
}
$counter.html("" + maxi);
flot = $.plot($("#placeholder"), new_dataset());
flot.draw();
}, 1);
});
External CSS
This Pen doesn't use any external CSS resources.