many.html

---
layout: default
---

<p>20 charts, each with 4 timeseries and 30 points updating every 5ms. Axes are intentionally not shown because D3 is prohibitively slow at updating the axes at this speed.</p>

<div id="root"></div>

<script>
$(document).ready(function() {
  var charts = [];
  var colors = d3.scale.category10();
  console.time("many charts");
  for(var x = 0; x < 20; x++) {

    var div = document.createElement('div');
    div.id = 'chart' + x;
    div.style.display = "inline-block";
    div.style.margin = "5px";
    div.style.position = "relative";
    document.getElementById('root').appendChild(div);

    var c = new CLACK.Chart(
      document.getElementById('chart' + x)
    );

    var context = c.getContext('default');
    context.showRangeAxis = false;
    context.showRangeGrid = false;
    context.showDomainAxis = false;
    context.showDomainGrid = false;

    var series = 4;
    var points = 30;

    var currentDate = new Date();

    for(var j = 0; j <= series; j++) {
      var exes = [];
      var whys = [];
      for(var i = 0; i <= points; i++) {
        exes.push(i);
        whys.push((j + 1) * Math.sin(2 * Math.PI * j + i + currentDate.getSeconds()));
      }
      c.addSeries('default', {
        x: exes,
        y: whys,
        label: 'foobar ' + j,
        color: colors(j)
      });
    }

    c.draw();
    charts.push(c);
  }
  console.timeEnd('many charts');

  var x = 31;
  var addAPoint = function() {
    for(var i = 0; i < charts.length; i++) {
      var c = charts[i];
      for(var j = 0; j <= series; j++) {
        var y = Math.floor(Math.random() * 50);
        // console.time('redraw');
        c.addToSeries('default', j, [x], [(j + 1) * Math.sin(2 * Math.PI * j + x)], true);

        c.draw();
        // console.timeEnd('redraw');
        x += 1;
      }
    }
    setTimeout(addAPoint,5);
  }
  setTimeout(addAPoint,5);
});
</script>