SigPlot Draw Boxes Example

A simple example of using SigPlot.

HTML

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

  <head>
    <title>SigPlot Fiddle</title>
  </head>

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

</html>

CSS

#plot {
  width: 600px;
  height: 400px;
}

JavaScript

var plot_options = {
  autohide_panbars: true,
  hide_note: true
};
var data = [1, 2, 3, 4, 5, 4, 3, 2, 1]; // the series of y-values
var data_header = {
  xunits: "Time",
  xstart: 100, // the start of the x-axis
  xdelta: 50, // the x-axis step between each data point
  yunits: "Power"
};
var layer_options = {
  name: "Sample Data"
};


var plot = new sigplot.Plot(document.getElementById('plot'), plot_options);
plot.overlay_array(data, data_header, layer_options);

boxes = new sigplot_plugins.BoxesPlugin();
plot.add_plugin(boxes);

// Draw a static box
boxes.add_box({
x: 200,
y: 2,
w: 50,
h: 0.5,
});

// allow boxes to be drawn with 'ctrl+mousebox'
var box_cnt = 0;
plot.addListener("mtag", function(event) {
    if (event.w && event.h) {
        box_cnt += 1;
        boxes.add_box({
            x: event.x,
            y: event.y,
            w: event.w,
            h: event.h,
            text: box_cnt
        })
    }
});