import Plot from 'newton-lib/src/elements/Plot.js'

public class | source

Plot

Extends:

WorldElement → Plot

The Plot class can be used to draw a line plot or a histogram on an axis. It is also possible to add markers on top of a line plot with information about the -x and -y values.

Constructor Summary

Public Constructor
public	constructor(opts: object)

Member Summary

Public Members
public	binWidth: number When the plot is configured in histogram mode, the binWidth is the width of the bars in pixels.
public	displayUntil: number Sets the maximum index to display.
public	drawInvisiblePoints: boolean Flag for drawing all points in the plot regardless if the point is outside the visible range of the plot.
public	label: string Sets the label for the plot.
public	limit: number Sets the maximum amount of points the plot can have at a single time.
public	lineWidth: number Sets the linewidth of the plot in pixels.
public	markerRadius: number Sets the radius of the markers.
public	markers: object[] Array for storing the markers.
public	points: object[] Array for storing the points.
public	shade: boolean Sets a flag for shading the area under the curve.
public	shadeColor: string Sets the color of the shade.
public	style: string Sets the type of plot.

Method Summary

Public Methods
public	addMarker(x: number, y: number, args: object) Adds a marker to the plot.
public	addPoint(x: number, y: number) Adds a point to the plot.
public	clear() Deletes all points and markers.
public	getPoints(): any Returns the points array until the max Idx.
public	maxIdx(): number Calculates the amount of points that can be displayed, starting from 0.
public	setLabel(label: string) Sets a label for the plot.

Private Methods
private	draw() Main draw function for the Plot called by the World automatically.
private	drawMarkers() Draw the markers.
private	drawPlot(p: array) Draw the plot.
private	drawShade(p: array) Shade the area under the curve.

Inherited Summary

From class WorldElement
public	color: string Sets the color in HEX format of the element.
public	cursor: string Sets the cursor style when the mouse is over the element.
public	display: boolean Flag for enabling or diabling this element.
public	dragging: boolean Flag set when the element is being dragged around.
public	font: Font Sets the font of the element.
public	height: number Sets the current height of the element.
public	isDraggable: boolean Flag for allowing the element to be dragged around.
public	mouseMoveStyle: string Sets the move style of the element.
public	mouseOver: boolean Flag set when the mouse is over the element.
public	onMouseMove: function Sets a callback function for when the element is dragged around.
public	position: object Sets the position of the element.
public	renderer: Renderer Sets the renderer used for the element.
public	rotation: number Sets the rotation of the element.
public	savedZIndex: number A copy of the z-index value is stored here.
public	scale: number Sets the drawing scale of the element.
public	topmostOnDrag: boolean Flag for determining if the element will be a top-most element when dragged around.
public	valid: boolean Flag used to determine if an object is a child of WorldElement.
public	width: number Sets the current width of the element.
public	world: World Sets the world where this element is found.
public	zIndex: number Sets the z-index of the element.
public	addPosition(x: number, y: number) Adds the provided coordinates to the position.
public	draggable(s: boolean) Sets if the element is draggable.
public	isMouseOver(): boolean Function called when the mouse moves to check if the pointer is over the element.
public	setColor(c: string) Sets the color in HEX format of the element.
public	setPosition(x: number, y: number) Sets the position of the element.
public	setScale(s: number) Sets the scale of the element.
public	setZ(z: number) Sets the z-index of the element.
private	resize() Function called when the canvas gets resized.
private	setWorld(world: World) Sets the world object where element will be drawn.
private	topmost(state: boolean) Sets the element as a topmost element.

Public Constructors

public constructor(opts: object) source

Override:

WorldElement#constructor

Params:

Name	Type	Attribute	Description
opts	object	optional	Object that contains valid Plot properties with values. Their values will be assigned at the end of the constructor. If an invalid property is passed then the value will be ignored.

Public Members

public binWidth: number source

When the plot is configured in histogram mode, the binWidth is the width of the bars in pixels. Default value is 3.

public displayUntil: number source

Sets the maximum index to display.

public drawInvisiblePoints: boolean source

Flag for drawing all points in the plot regardless if the point is outside the visible range of the plot. Default value is false.

public label: string source

Sets the label for the plot. Only used when the plot is added to a Graph object. Default value is "".

public limit: number source

Sets the maximum amount of points the plot can have at a single time. Once the array of points fills up, the earliest points will be removed. This is done for memory purposes. Default value is 300.

public lineWidth: number source

Sets the linewidth of the plot in pixels. Default value is 2.

public markerRadius: number source

Sets the radius of the markers. Default value is 4.

public markers: object[] source

Array for storing the markers.

public points: object[] source

Array for storing the points.

public shade: boolean source

Sets a flag for shading the area under the curve.

public shadeColor: string source

Sets the color of the shade.

public style: string source

Sets the type of plot. Any other value than "line" will result in a histogram plot. Default value is "line".

Public Methods

public addMarker(x: number, y: number, args: object) source

Adds a marker to the plot.

Params:

Name	Type	Attribute	Description
x	number		x coordinate of the marker to add.
y	number		y coordinate of the marker to add.
args	object		Object with other properties that a marker can have.
args.label	string		Top label of the marker.
args.lower_label	string		Bottom label of the marker.
args.color	string		HEX color of the marker. Default value is the color of the plot.
args.top	boolean		Flag for choosing if the labels will be drawn over the marker or below the marker. Default value is true.

public addPoint(x: number, y: number) source

Adds a point to the plot.

Params:

Name	Type	Attribute	Description
x	number		x coordinate of the point to add.
y	number		y coordinate of the point to add.

public clear() source

Deletes all points and markers.

public getPoints(): any source

Returns the points array until the max Idx. Also converts every point to pixels and determines if the point is visible.

Return:

any	Array of points.

public maxIdx(): number source

Calculates the amount of points that can be displayed, starting from 0.

Return:

number

The index of the last point.

public setLabel(label: string) source

Sets a label for the plot. Only used when the plot is added to a Graph object.

Params:

Name	Type	Attribute	Description
label	string		Label for the plot.

Private Methods

private draw() source

Main draw function for the Plot called by the World automatically.

private drawMarkers() source

Draw the markers.

private drawPlot(p: array) source

Draw the plot.

Params:

Name	Type	Attribute	Description
p	array		Array of precalculated points.

private drawShade(p: array) source

Shade the area under the curve.

Params:

Name	Type	Attribute	Description
p	array		Array of precalculated points.