mplot.js

addPlot(plotParam)

Add a plot to the graph Plot drawing info is stored in the MPlotGraph.param.plot array. Parameters can be modified in realtime by editing this array directly

let index = plt.addPlot({xData:[1,2,3], yData:[4,5,6], yErrorData=[1,1,2]});

Parameters:

• plotParam (Object) –
  subset of keys from the defaultPlotParam object

Returns:

• int –
  index of the plot added in the MPlotGraph.param.plot array

Defined in resources/mplot.js:1574

barGeometry(plotIndex)

Use matching grouped-bar widths and offsets for rendering and selection.

Defined in resources/mplot.js:1852

baselineY()

Screen y of the baseline that filled areas, histogram bins and bars rise from. A log axis has no zero to anchor to, so the bottom of the frame stands in for it.

Defined in resources/mplot.js:1896

calcMinMax()

Calculate the min/max of each axis

Defined in resources/mplot.js:2078

calcStats()

Calculate the stats to display in the graph These are stored in MPlotGraph.param.stats. See also defaultGraphParam

Defined in resources/mplot.js:2249

constructor(divElement, graphParam)

let graph = MPlotGraph();
graph.addPlot({xData:[1,2,3], yData:[4,5,6]});
graph.draw();

Parameters:

• divElement (Object) –
  HTML div element to place the plot into
• graphParam (Object) –
  JS object with keys a subset of defaultGraphParam, controls plot display style.

Defined in resources/mplot.js:1160

createDownloadSelector()

Make a download selection menu

Defined in resources/mplot.js:1651

deletePlot(label)

Delete an exising plot

plt.deletePlot(0);

Parameters:

• label (int/string) –
  to the plot array [0...n-1] or label name of plot

Defined in resources/mplot.js:1645

download(mode)

Download the figure as an image or data

Parameters:

• mode (string) –
  either "CSV" | "PNG"

Defined in resources/mplot.js:4320

draw()

draw all elements of the graph into the canvas: axes, plots, text, buttons, etc.

Defined in resources/mplot.js:2569

drawCAxis(ctx, x1, y1, width, tick, label, xmin, xmax, category, draw)

Draw the xaxis as "category"

Parameters:

• ctx (CanvasRenderingContext2D) –
  canvas context, for example: canvas.getContext("2d")
• x1 (number) –
  coordinate position of the axis on screen
• y1 (number) –
  coordinate position of the axis on screen
• width (number) –
  width of the axis, likely also the width of the plot
• tick (number) –
  height in pixel of tick markers at labels
• label (number) –
  distance of text from axis
• xmin
• xmax
• category (string) –
  array of category labels to plot
• draw (bool) –
  if false, only return height of labels

Returns:

• float –
  maximum height + 2

Defined in resources/mplot.js:4233

drawMarker(ctx, p, x, y)

Draw a single marker on plot

Parameters:

• ctx (CanvasRenderingContext2D) –
  canvas context, for example: canvas.getContext("2d")
• p (object) –
  param object from MPlotGraph
• x (number) –
  x coord of marker
• y (number) –
  y coord of marker

Defined in resources/mplot.js:2432

drawTAxis(ctx, x1, y1, width, xr, minor, major, text, label, grid, xmin, xmax)

Draw the xaxis as "datetime"

Tick spacing is picked internally from xmin, xmax and width out of a table of calendar-friendly intervals (seconds .. days). The minor, major, text, label and grid arguments only say how far each stroke extends below the axis line. Returns without drawing, after showAlert(), if the limits or the width are unusable.

Parameters:

• ctx (CanvasRenderingContext2D) –
  canvas context, for example: canvas.getContext("2d")
• x1 (number) –
  screen coordinate of the left end of the axis
• y1 (number) –
  screen coordinate of the axis line; ticks and labels go below it
• width (number) –
  width of the axis, likely also the width of the plot
• xr (number) –
  right limit for the label text, which is shifted inwards so it never crosses xr; draw() passes the full canvas width
• minor (number) –
  length of a minor tick mark
• major (number) –
  length of a major tick mark
• text (number) –
  length of a tick mark that carries a label
• label (number) –
  offset of the label text from the axis, 0 to suppress labels
• grid (number) –
  length of the grid lines, 0 to suppress them. Drawn at the labelled and major ticks. draw() passes y2 - y1, a negative length spanning the plot area.
• xmin (number) –
  low limit of the axis, in seconds since the epoch
• xmax (number) –
  high limit of the axis, in seconds since the epoch

Defined in resources/mplot.js:4084

drawTextBox(ctx, text, x, y)

Draw a box encapsulating some text. Width and height are set by the text

Parameters:

• ctx (CanvasRenderingContext2D) –
  canvas context, for example: canvas.getContext("2d")
• text (string) –
  text to include in the box
• x (number) –
  coordinate of box lower left corner
• y (number) –
  coordinate of box lower left corner

Defined in resources/mplot.js:4462

drawXAxis(ctx, x1, y1, width, minor, major, text, label, grid, xmin, xmax, logaxis)

Draw the xaxis as "numeric"

Tick spacing is derived internally from xmin, xmax and width. The minor, major, text, label and grid arguments only say how far each stroke extends from the axis line (positive = downwards on the canvas). Returns without drawing, after showAlert(), if the limits or the width are unusable.

Parameters:

• ctx (CanvasRenderingContext2D) –
  canvas context, for example: canvas.getContext("2d")
• x1 (number) –
  screen coordinate of the left end of the axis
• y1 (number) –
  screen coordinate of the axis line; ticks and labels go below it
• width (number) –
  width of the axis, likely also the width of the plot
• minor (number) –
  length of a minor tick mark
• major (number) –
  length of a major tick mark
• text (number) –
  length of a tick mark that carries a label
• label (number) –
  offset of the label text from the axis, 0 to suppress labels
• grid (number) –
  length of the grid lines, 0 to suppress them. Drawn at the labelled and major ticks, and on a log axis at the minor ticks too. draw() passes y2 - y1, a negative length spanning the plot area.
• xmin (number) –
  low limit of the axis
• xmax (number) –
  high limit of the axis
• logaxis (bool) –
  if true draw axis on a log scale (base 10)

Defined in resources/mplot.js:3591

drawXErrorBar(ctx, p, x, y, x1, x2)

Draw a single horizontal errorbar on the plot

Parameters:

• ctx (CanvasRenderingContext2D) –
  canvas context, for example: canvas.getContext("2d")
• p (object) –
  param object from MPlotGraph
• x (number) –
  x coord of bar center (unused)
• y (number) –
  y coord of bar center
• x1 (number) –
  position of the low side error bar enpoint
• x2 (number) –
  position of the high side error bar enpoint

Defined in resources/mplot.js:2534

drawYAxis(ctx, x1, y1, height, minor, major, text, label, grid, ymin, ymax, logaxis, draw)

Draw the yaxis as "numeric"

Tick spacing is derived internally from ymin, ymax and height. The minor, major, text, label and grid arguments only say how far each stroke extends from the axis line: negative draws them to the left of it, as draw() does for the y axis, positive to the right, as it does for the z axis. Returns without drawing, after showAlert(), if the limits or the height are unusable.

Parameters:

• ctx (CanvasRenderingContext2D) –
  canvas context, for example: canvas.getContext("2d")
• x1 (number) –
  screen coordinate of the axis line; ticks and labels go beside it
• y1 (number) –
  screen coordinate of the bottom end of the axis
• height (number) –
  height of the axis, likely also the height of the plot, extending upwards from y1
• minor (number) –
  length of a minor tick mark
• major (number) –
  length of a major tick mark
• text (number) –
  length of a tick mark that carries a label
• label (number) –
  offset of the label text from the axis, 0 to suppress labels. A negative value right-aligns the text, a positive one left-aligns it.
• grid (number) –
  length of the grid lines, 0 to suppress them. Drawn at the labelled and major ticks, and on a log axis at the minor ticks too. the y axis passes x2 - x1, spanning the plot area.
• ymin (number) –
  low limit of the axis
• ymax (number) –
  high limit of the axis
• logaxis (bool) –
  if true draw axis on a log scale (base 10)
• draw (bool) –
  if true draw the axis, if false only measure the labels

Returns:

• number|undefined –
  width of the widest label in pixels, which draw() uses to place the plot area, or undefined if the limits were rejected

Defined in resources/mplot.js:3829

drawYErrorBar(ctx, p, x, y, y1, y2)

Draw a single vertical errorbar on the plot

Parameters:

• ctx (CanvasRenderingContext2D) –
  canvas context, for example: canvas.getContext("2d")
• p (object) –
  param object from MPlotGraph
• x (number) –
  x coord of bar center
• y (number) –
  y coord of bar center (unused)
• y1 (number) –
  position of the low side error bar enpoint
• y2 (number) –
  position of the high side error bar enpoint

Defined in resources/mplot.js:2555

findPlot(label)

Defined in resources/mplot.js:1597

getMeasurementBox()

Translate the floating measurement dialog to plot coordinates for hit testing.

Defined in resources/mplot.js:4483

invalidateColormap(plot = 0)

Mark a colormap bitmap stale after changing its data in place. Redraw separately.

Defined in resources/mplot.js:1637

keyDown(e)

Handle key events

Parameters:

• e (Object) –
  keydown event with properties key, metaKey, ctrlKey, target, etc

Defined in resources/mplot.js:1711

markerToScreen(point)

Project a saved marker, including its dataset's offset within a bar group.

Defined in resources/mplot.js:1862

modifyPlot(label, plotParam)

Modify an exising plot Plot drawing info is stored in the MPlotGraph.param.plot array. Parameters can be modified in realtime by editing this array directly

plt.modifyPlot(0, {label:"Modified plot", line: {color: "red"}} );

Parameters:

• label (int/string) –
  to the plot array [0...n-1] or label name of plot
• plotParam (Object) –
  subset of keys from the defaultPlotParam object

Defined in resources/mplot.js:1628

mouseEvent(e)

Handle mouse events

Parameters:

• e (Object) –
  mouse event object, specifies type, buttons

Defined in resources/mplot.js:4620

prepareFunctionPlots()

Resolve function domains and calculate their initial Y ranges.

Defined in resources/mplot.js:1973

redraw()

Redraw the graph on the next animation frame. Repeated calls inside one frame collapse into a single draw(). The flag is cleared before draw() runs, so a redraw triggered from the draw path still schedules a following frame.

Defined in resources/mplot.js:1841

resetAxes()

Reset min/max of x and y axes, redraws

Defined in resources/mplot.js:4987

resize()

Resize canvas and redraw

Defined in resources/mplot.js:1831

sampleFunctionPlot(plot, pixelStep = 3)

Sample a function plot approximately once per pixelStep visible pixels.

Defined in resources/mplot.js:2052

screenToX(x)

Convert screen coordinates to data coordinates x axis

Defined in resources/mplot.js:1953

screenToY(y)

Convert screen coordinates to data coordinates y axis

Defined in resources/mplot.js:1963

setData(index, x, y, z)

Set the data for the mplot For new applications please use addPlot

Parameters:

• index (int) –
  Choose which graph to modify 0...n-1. Stored in the MPlotGraph.param.plot array
• x (float[]) –
  X values
• y (float[]) –
  Y values
• z (float[]) –
  Z values

Defined in resources/mplot.js:1738

showAlert(message)

Error message display

Parameters:

• message (String) –
  message to display in popup alert

Defined in resources/mplot.js:4999

traceRuns(ctx, xData, yData, baseline)

Add a series to the current path as one subpath per run of drawable points.

A non-finite point ends the current run, so nothing is dragged across the gap. A value <= 0 on a log axis also ends a fill run, but a stroked line runs through it off the frame. With a baseline, each run is closed down to it, making a fillable polygon; without one, the runs are open polylines for stroking. Points go straight onto the path, so a large plot costs no per-point allocation.

Parameters:

• ctx (CanvasRenderingContext2D) –
  context with a path already begun
• xData (number[]) –
  x values
• yData (number[]) –
  y values
• baseline (number) –
  screen y to close each run down to, for a fill

Defined in resources/mplot.js:1913

updateMarker(e)

Locate a nearby plot point, or use the cursor coordinates when snapping is disabled.

Defined in resources/mplot.js:4493

xToScreen(x)

Convert data coordinates to screen coordinates x axis.

Defined in resources/mplot.js:1872

yToScreen(y)

Convert data coordinates to screen coordinates y axis. See xToScreen for the NaN rule.

Defined in resources/mplot.js:1883