Class CartesianCanvasPlot

Simple plotting of cartesian values.

// Create the data set
const ds = new Plot.DataSet();

// Create plotter, providing a CANVAS element and the dataset
const p = new Plot.CartesianCanvasPlot(`#plot`, ds);

// Add data
ds.add({ x:1, y:1 });

// Request it to draw the current data
p.draw();

Series

// Add a value to the `alpha` series
ds.add({x:1,y:1}, `alpha`);

Series can have metadata associated with it in the DataSet

// Use 'pink' by default for the series 'alpha'
ds.setMeta(`alpha`, { colour: `pink` });

Constructors

constructor

Properties

actualDataRange axisRounder helper margin overlayLines renderArea show visibleRange whiskerLength

Methods

computeRenderArea draw drawLine getCurrentRange getDataRange getDefaultMeta positionAt screenToValue setMeta valueRectToScreen valueToScreen valueToViewport

Constructors

constructor

Properties

actualDataRange

actualDataRange: RectPositioned = Rects.EmptyPositioned

axisRounder

axisRounder: ((v: number) => number) = ...

helper

helper: CanvasHelper

margin

margin: number

overlayLines

overlayLines: (Line & LineStyle)[] = []

List of lines to draw after drawing everything else. Lines are given in value-coordinate space

renderArea

renderArea: Point & Rect & {
    dimensionMin: number;
} = ...

show

show: ShowOptions

visibleRange

visibleRange: RectPositioned = Rects.PlaceholderPositioned

whiskerLength

whiskerLength: number

Methods

computeRenderArea

  • computeRenderArea(): Point & Rect & {
        dimensionMin: number;
    }

  • Returns Point & Rect & {
        dimensionMin: number;
    }

draw

  • draw(): void

  • Returns void

drawLine

  • drawLine(line, colour, width): void

  • Draws a line in value-coordinate space

    Parameters

    • line: Line
    • colour: string
    • width: number

    Returns void

getCurrentRange

getDataRange

  • getDataRange(): PointMinMax

  • When range is auto, returns the range of the data Otherwise returns the user-provided range.

    Returns PointMinMax

getDefaultMeta

positionAt

  • positionAt(data, elOrQuery, by?, relativeToQuery): void

  • Positions an element at the viewport location of data point. Ensure the element has position:absolute set.

    Parameters

    • data: Point
    • elOrQuery: string | HTMLElement
    • by: "middle" | "top-left" = ...
    • relativeToQuery: string | HTMLElement

    Returns void

screenToValue

  • screenToValue(a): Point

  • Converts a point in pixel coordinates to a value. Useful for converting from user input coordinates.

    Parameters

    Returns Point

setMeta

  • setMeta(series, meta): void

  • Parameters

    Returns void

valueRectToScreen

valueToScreen

  • valueToScreen(a): {
        x: number;
        y: number;
    }

  • Parameters

    Returns {
        x: number;
        y: number;
    }

    • x: number
    • y: number

valueToViewport

  • valueToViewport(pt): Point

  • Converts a point in data space to viewport space

    Parameters

    Returns Point

Settings

Member Visibility

On This Page

Constructors
Properties
Methods