<div id="fps"></div>
<div id="plot" style="width: 700px; height: 300px;"></div>

let xmax = 1250;
let numTraces = 8;
let traces = [];
let x = [];

for (let i = 0; i < numTraces; i++) {
  x[i] = [];
  for(let j = 0; j < xmax; j++) {
    x[i].push(j);
  }
  traces.push({
    x: x[i],
    type: "bar"
  });
}

var fps_display = document.querySelector("#fps");
setInterval(function() { 
  let amp = 10*Math.random() + 1;
  for (let i = 0; i < numTraces; i++) {
    let y = [];
    for (let j = 0; j < traces[i].x.length - 1; j++) {
      y[j] = amp*Math.random();
    }
    traces[i].y = y;
    traces[i].name = (1000000*Math.random()).toString();
  }
  var layout = {
  xaxis: { title: "X axis", range: [0, xmax] },
  yaxis: { title: "Y axis",range: [0, 11] },
  barmode: "relative",
  bargap: 0,
  showlegend: false,
  hovermode: false,
  title: "Relative Barmode"
};
  Plotly.react('plot', traces, layout);
  fps_display.update(numTraces * xmax);
}, 1);




External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js
  2. https://ni-kismet.github.io/webcharts-drive-test/performance/fps_display.js
  3. https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.49.5/plotly.min.js