Class GraphLine

Collects data from a VarsList, storing it as a HistoryList composed of GraphPoints. The variables that this GraphLine is tracking are selected via the methods setXVariable and setYVariable. A GraphLine is typically shown by a DisplayGraph.

It is during the memorize method that the new data is stored into the HistoryList. For the memorize method to be called automatically, the GraphLine can be registered with it's SimView by calling SimView.addMemo, for example:

simView.addMemo(graphLine);

Graph Styles

The color, line thickness, and drawing mode (dots or line) can be changed via methods setColor, setLineWidth, and setDrawingMode.

The style used for drawing the graph can be changed at any time, without altering the style used for points previously memorized. Changes to style affect only how the next memorized points are displayed.

If you do want to change the style for the entire line, call resetStyle which will forget about all styles except the current style and apply that to the entire line.

Note: line dash is not a supported feature because the graph is drawn incrementally as thousands of short line segments and the line dash starts over for each segment. It might be possible to use the HTML CanvasRenderingContext2D.lineDashOffset property to deal with this.

Axes Names

To update the names of the axes shown in a DisplayAxes, set up a GenericObserver to watch for changes to the variables tracked by the GraphLine, as in this example:

new GenericObserver(graphLine, evt => {
  axes.setHorizName(graphLine.getXVarName());
  axes.setVerticalName(graphLine.getYVarName());
});

Polar or Logarithmic Graph

It is possible to create a polar or logarithmic type of graph by specifying transform functions. For example, a polar graph could be created with

graphLine.xTransform = function(x,y) { return y*Math.cos(x); };
graphLine.yTransform = function(x,y) { return y*Math.sin(x); };

That transformation regards the X value as the angle and the Y value as the radius.

The transformation is done while memorizing points from the VarsList. The HistoryList contains transformed points something like this:

new GraphPoint(xTransform(x, y), yTransform(x, y));

Note that the transform functions do not affect how the graph axes are shown.

Parameters Created

  • ParameterNumber named X_VARIABLE, see setXVariable. Has an extra NONE choice, which causes the GraphLine to have an empty HistoryList.

  • ParameterNumber named Y_VARIABLE, see setYVariable. Has an extra NONE choice, which causes the GraphLine to have an empty HistoryList.

  • ParameterNumber named LINE_WIDTH, see setLineWidth.

  • ParameterString named DRAWING_MODE, see setDrawingMode.

  • ParameterString named GRAPH_COLOR, see setColor.

Events Broadcast

All the Parameters are broadcast when their values change. In addition:

  • GenericEvent named RESET, see reset.

Hierarchy (view full)

Implements

Constructors

constructor

Properties

dataPoints_ drawColor_ drawMode_ hotSpotColor_ lineWidth_ styles_ varsList_ xTransform xVarParam_ xVar_ yTransform yVarParam_ yVar_ RESET

Methods

addGraphStyle addObserver addParameter broadcast broadcastParameter buildMenu getBroadcast getChanged getClassName getColor getDrawingMode getGraphPoints getGraphStyle getHotSpotColor getLineWidth getName getObservers getParameter getParameterBoolean getParameterNumber getParameterString getParameters getVarsList getXVarName getXVariable getYVarName getYVariable memorize observe removeObserver removeParameter reset resetStyle setBroadcast setColor setDrawingMode setHotSpotColor setLineWidth setXVariable setYVariable toString toStringShort

Constructors

constructor

Properties

Private dataPoints_

dataPoints_: CircularList<GraphPoint>

Holds the most recent data points drawn, to enable redrawing when needed.

Private drawColor_

drawColor_: string = 'lime'

The color to draw the graph with, a CSS3 color string.

Private drawMode_

drawMode_: DrawingMode = DrawingMode.LINES

whether to draw the graph with lines or dots

Private hotSpotColor_

hotSpotColor_: string = 'red'

The color to draw the hot spot (most recent point) with, a CSS3 color string.

Private lineWidth_

lineWidth_: number = 1.0

Thickness to use when drawing the line, in screen coordinates, so a unit is a screen pixel.

Private styles_

styles_: GraphStyle[] = []

GraphStyle's for display, ordered by index in dataPoints list. There can be multiple GraphStyle entries for the same index, the latest one in the list takes precedence. We ensure there is always at least one GraphStyle in the list.

Private varsList_

varsList_: VarsList

The VarsList whose data this graph is displaying

xTransform

xTransform: ((x, y) => number) = ...

Function that gives the transformed the X value.

Type declaration

    • (x, y): number

    • Function that gives the transformed the X value.

      Parameters

      • x: number
      • y: number

      Returns number

Private xVarParam_

xVarParam_: ParameterNumber

Parameter that represents which variable is shown on X-axis, and the available choices of variables.

Private xVar_

xVar_: number = -1

index of horizontal variable in simulation's variables, or -1 to not collect any X variable data

yTransform

yTransform: ((x, y) => number) = ...

Function that gives the transformed the Y value.

Type declaration

    • (x, y): number

    • Function that gives the transformed the Y value.

      Parameters

      • x: number
      • y: number

      Returns number

Private yVarParam_

yVarParam_: ParameterNumber

Parameter that represents which variable is shown on Y-axis, and the available choices of variables.

Private yVar_

yVar_: number = -1

index of vertical variable in simulation's variables, or -1 to not collect any X variable data

Static RESET

RESET: "RESET" = ...

Event broadcast when reset is called.

Methods

Private addGraphStyle

  • addGraphStyle(): void

  • Adds a GraphStyle with the current color, draw mode, and line width, corresponding to the current end point of the HistoryList.

    Returns void

addObserver

addParameter

broadcast

broadcastParameter

Private buildMenu

  • buildMenu(): void

  • Modify the choices in the X and Y variable Parameters to match those of the VarsList, plus add the NONE choice.

    Returns void

Protected getBroadcast

getChanged

  • getChanged(): boolean

  • Returns whether this SimObject has changed, and sets the state to "unchanged".

    Returns boolean

    whether this SimObject has changed

getClassName

getColor

  • getColor(): string

  • Returns the color used when drawing the graph.

    Returns string

    the color used when drawing the graph

getDrawingMode

getGraphPoints

getGraphStyle

  • getGraphStyle(index): GraphStyle

  • Returns the GraphStyle corresponding to the position in the list of GraphPoints.

    Parameters

    • index: number

      the index number in list of GraphPoints

    Returns GraphStyle

    the GraphStyle for that position

getHotSpotColor

  • getHotSpotColor(): string

  • Returns the color used when drawing the hot spot (most recent point).

    Returns string

    the color used when drawing the hot spot (most recent point)

getLineWidth

  • getLineWidth(): number

  • Returns thickness to use when drawing the line, in screen coordinates, so a unit is a screen pixel.

    Returns number

    thickness of line in screen coordinates

getName

getObservers

getParameter

getParameterBoolean

getParameterNumber

getParameterString

getParameters

getVarsList

getXVarName

  • getXVarName(): string

  • Returns localized X variable name.

    Returns string

    variable name or empty string in case index is -1

getXVariable

  • getXVariable(): number

  • Returns the index in the VarsList of the X variable being collected.

    Returns number

    the index of X variable in the VarsList, or -1 if no X variable is being collected.

getYVarName

  • getYVarName(): string

  • Returns localized Y variable name.

    Returns string

    variable name or empty string in case index is -1

getYVariable

  • getYVariable(): number

  • Returns the index in the VarsList of the Y variable being collected.

    Returns number

    the index of Y variable in the VarsList, or -1 if no Y variable is being collected.

memorize

  • memorize(): void

  • Memorize the current simulation data, or do some other function that should happen regularly after each simulation time step.

    Returns void

observe

  • observe(event): void

  • Notifies this Observer that a change has occurred in the Subject.

    Parameters

    • event: SubjectEvent

      contains information about what has changed in the Subject: typically either a one-time GenericEvent, or a change to the value of a Parameter

    Returns void

removeObserver

removeParameter

reset

  • reset(): void

  • Forgets any memorized data and styles, starts from scratch. However, it also calls memorize to memorize the current data point, if any.

    Returns void

resetStyle

  • resetStyle(): void

  • Forgets any memorized styles, records the current color, draw mode, and line width as the single starting style. Note that you may need to call DisplayGraph.reset to see this change take effect.

    Returns void

Protected setBroadcast

  • setBroadcast(value): boolean

  • Sets whether this Subject will broadcast events, typically used to temporarily disable broadcasting. Intended to be used in situations where a subclass overrides a method that broadcasts an event. This allows the subclass to prevent the superclass broadcasting that event, so that the subclass can broadcast the event when the method is completed.

    Parameters

    • value: boolean

      whether this Subject should broadcast events

    Returns boolean

    the previous value

setColor

  • setColor(color): void

  • Sets the color to use when drawing the graph. Applies only to portions of graph memorized after this time.

    Parameters

    • color: string

      the color to use when drawing the graph, a CSS3 color string.

    Returns void

setDrawingMode

  • setDrawingMode(value): void

  • Sets whether to draw the graph with dots or lines. Applies only to portions of graph memorized after this time.

    Parameters

    • value: DrawingMode

      the DrawingMode (dots or lines) to draw this graph with.

    Returns void

    Throws

    if the value does not represent a valid DrawingMode

setHotSpotColor

  • setHotSpotColor(color): void

  • Sets the color to use when drawing the hot spot (most recent point). Set this to empty string to not draw the hot spot.

    Parameters

    • color: string

      the color to use when drawing the hot spot (most recent point)

    Returns void

setLineWidth

  • setLineWidth(value): void

  • Sets thickness to use when drawing the line, in screen coordinates, so a unit is a screen pixel. Applies only to portions of graph memorized after this time.

    Parameters

    • value: number

      thickness of line in screen coordinates

    Returns void

setXVariable

  • setXVariable(xVar): void

  • Sets the variable from which to collect data for the X value of the graph. Starts over with a new HistoryList. Broadcasts the ParameterNumber named GraphLine.i18n.X_VARIABLE.

    Parameters

    • xVar: string | number

      the name or index of X variable in the VarsList, or -1 to not collect any X variable data and have an empty HistoryList. The name can be the English or language independent version of the name

    Returns void

    Throws

    if the index is out of range, or the variable name doesn't exist

setYVariable

  • setYVariable(yVar): void

  • Sets the variable from which to collect data for the Y value of the graph. Starts over with a new HistoryList. Broadcasts the ParameterNumber named GraphLine.i18n.Y_VARIABLE.

    Parameters

    • yVar: string | number

      the name or index of Y variable in the VarsList, or -1 to not collect any Y variable data and have an empty HistoryList. The name can be the English or language independent version of the name

    Returns void

    Throws

    if the index is out of range, or the variable name doesn't exist

toString

toStringShort

  • toStringShort(): string

  • Returns a minimal string representation of this object, usually giving just identity information like the class name and name of the object.

    For an object whose main purpose is to represent another Printable object, it is recommended to include the result of calling toStringShort on that other object. For example, calling toStringShort() on a DisplayShape might return something like this:

    DisplayShape{polygon:Polygon{'chain3'}}

    Returns string

    a minimal string representation of this object.

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc