Spectric Labs engineers were the original authors of the SigPlot plotting library and we are happy to continue supporting the open-source SigPlot package. We like helping out with bug fixes, feature requests, and discussions on Slack.
Recently a question came up about how to use the Boxes plugin to create the ability to draw boxes dynamically on the plot. First you create the Boxes plugin.
boxes = new sigplot_plugins.BoxesPlugin();
Then you add it to the plot.
plot.add_plugin(boxes);
At this point...nothing happens. To actually draw a box on the plot, you need to call the add_box() function.
boxes.add_box({
x: 200,
y: 2,
w: 50,
h: 0.5,
});
By default, the coordinates for the box are in 'plot axes coordinates'. If you want the box to be placed at absolute pixel coordinates, then you can add the 'absolute_placement' flag when creating the box.
To provide the ability to draw a box, attach a listener to the "mtag" event.
plot.addListener("mtag", function(event) {
if (event.h && event.w) {
boxes.add_box({
x: event.x,
y: event.y,
w: event.w,
h: event.h,
text: box_cnt
})
}
});
The "mtag" event is emitted on mouse clicks and box-selections. You can distinguish between the two by checking to see if width (i.e. "w") and height (i.e. "h") are provided in the event.
By default drawing a box on the plot causes a zoom; however, if the CTRL button is held down while drawing a box the "mtag" box-selection is performed instead. This alternate mode is indicated by the box being filled in transparent white (shown below).
Once the mouse button is released, the "mtag" even is emitted and a box is added to the plot.
See the entire code on this jsFiddle.