SigPlot Basic Example

A simple example of using SigPlot.

HTML

<script src="https://cdn.jsdelivr.net/npm/sigplot/dist/sigplot-debug.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <meta name="description" content="Real-time plot">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>SigPlot JS Fiddle</title>
  </head>

  <body>
    <div id="plot">
    </div>
  </body>

</html>

CSS

#plot {
  height: 400px;
  width: 90%;
  box-shadow: 5px 5px 5px #888888;
  border-style: solid;
  border-width: 1px;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  display: block;
}

JavaScript

var rt_plot = new sigplot.Plot(document.getElementById('plot'), {
  autohide_readout: true, // only show the readout when the mouse is over the plot
  autohide_panbars: true // only show panbars when necessary and the mouse is over the plot
})

var lyr1 = rt_plot.overlay_array([], {
  file_name: "random1"
});
var lyr2 = rt_plot.overlay_array([], {
  file_name: "random2"
});

update_rtplot();
var hdl = window.setInterval(update_rtplot, 500);

function update_rtplot() {
  var random1 = [];
  var random2 = [];
  for (var i = 0; i <= 1000; i += 1) {
    random1.push(Math.random());
    random2.push(Math.random() + 1)
  }

  rt_plot.reload(lyr1, random1);
  rt_plot.reload(lyr2, random2);

}