DBJ FLOT SAMPLE

How fast is a modern browser javascript combination ? GPLV3 (c) 2019 by dbj.org

by dbjdbj

HTML

<script src="http://people.iola.dk/olau/flot/jquery.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<div id="dbj_body">
  <h3 id="counter"></h3>
  <div id="placeholder"></div>
</div>

CSS

#dbj_body {
  margin: 1%;
  border: 1px solid;
  width: 100%;
  height: 110%;
  padding: 1%;
  font: 14px/1.1 monospace;
}

#placeholder {
  width: 100%;
  height: 400px;
  border: 1px solid;
  margin: 1%;
}

JavaScript

/* 
*/

$(function() {
  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 = 1000,
    $counter = $("#counter"),
    tid = setInterval(function() {
      if (0 > maxi--) {
        clearInterval(tid);
        return;
      }
      $counter.html("" + maxi);
      flot = $.plot($("#placeholder"), new_dataset());
      flot.draw();
    }, 1);
});