Basic Usage

SigPlot is fairly simple to instantiate and use. First, create a placeholder for the plot:

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

Then ensure that it has a non-zero size by using CSS:

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

Instantiate the plot:

plot = new sigplot.Plot(document.getElementById('plot'), {});

Then add layers:


SigPlot also directly supports the specialized BLUEFILE format:


By default, raster plots do not smooth so that each individual data element can be clearly seen. This is typically done when you want to clearly see individual FFTbins. If you prefer smoothing you can change the rasterSmoothing setting.

plot.change_settings({rasterSmoothing: true});

Asyncronous overlay_href

The overlay_href method is asyncronous, because the underlying HTTP request is handle asyncronously. If you want to take an action when the layer has been downloaded, use the onload callback.

plot.overlay_href('../dat/sin.tmp', function(hdr, layer_n) {
  console.log("Finished overlay")
If you make two overlay_href calls, the order of the layers will be arbitrary.
plot.overlay_href('../dat/square.tmp'); // If square.tmp downloads first, if will be the first layer
You can avoid this with the following pattern:
		// Use Immediately invoked function to create a closure
		// so we can load files remotely, but keep the order
		(function(p, files) {
			var do_next_overlay = function() {
				var f = files.shift();
				if (f) {
					p.overlay_href(f, do_next_overlay);
				} else {
                                        // We are done loading layers
			do_next_overlay(); // Kick things off
		})(plot, ["../dat/pulse.tmp", "../dat/sin.tmp"]);

Mouse Actions

To zoom, press and drag the left mouse (LM) over the region of interest and release.
To unzoom, press the (RM).
To zoom, press and drag the left mouse (LM) while holding CTRL over the region of interest and release.
Press the middle mouse (MM) button to bring up the menu.

Mousewheel Orientation

SigPlot defaults to an wheel scroll orientation, where scrolling the wheel forward will pan down while rolling backwards will pan up. You can change this setting if desired.

plot.change_settings({wheelscroll_mode_natural: false});

Keyboard Actions

Display help
Toggle display x,y readouts: (absc) -> (index) -> (1/absc) -> (time).
Toggle Left Mouse Drag Mode: (box) -> (horizontal) -> (vertical).
Toggle controls.
Toggle legend.
Show menu.
Toggle display specs (x/y readout).
Toggle display specs and axes.
Popup box with timecode value at mouse.
Popup box with X value at mouse.
Popup box with Y value at mouse.
Toggle fullscreen for plot.
Invert colors


SigPlot provides scrollbars along each axis to allow panning of the plot. Zoom in to a region of the above plot and try out the following features:

Single stepping

Arrows are provided at the end of each scrollbar for stepping through a plot in either direction. Single-clicking one of these arrows will pan the plot by one step.

Single paging

To pan a plot one page at a time, click anywhere in the trough between a panbar and one of the arrows at either end of a scrollbar.

Continuous stepping or paging

SigPlot allows you to continuously pan a plot. To do this, keep your left mouse button held down while stepping or paging.

Panbar dragging

Dragging a panbar along an axis will allow you to quickly move from viewing one part of a plot to another.


SigPlot allows you to re-center your plot to a specific value along an axis. To do this, click on one of the numerical labels along an axis.

Range control

SigPlot allows you to expand or shrink the range of values visible within the plot area along an axis. To use this feature, middle-click with your mouse on a scrollbar and choose one of the options from the menu that pops up.

Wheel scrolling

SigPlot also allows you to pan a plot by scrolling your mousewheel up or down while hovering your mouse over a scrollbar.

By default the scroll orientation is inverted/natural, meaning that when you scroll the wheel forward the plot will pan down (away from you) and when you scroll the wheel backwards the plot will pan up (towards you). You can change to a "normal" orientation using SigPlot's menu.