Shapes define coordinate points to use as vertex for polygons, which are assigned styles.
The shapes node contains definitions of polygons and styles to be rendered on a per-period basis over the charts.

A plotter recursively renders graphics for each period or candle. This means that a definition of what shapes need to be drawn for a single period is required. The plotter does the same thing for every period or candle that is visible on the screen at any point in time, for any time frame, as long as the corresponding data is available.

Shapes-01-show-off

In general terms, the process of defining what is going to be rendered on the screen consist of the following four steps:

  1. Identifying points defined by [x,y] coordinates
  2. Defining polygons
  3. Defining default styles
  4. Defining conditional styles

Click to learn more about shapes

Adding a Shapes Node

To add a shapes node, select Add Shapes on the plotter module menu.


Shapes

Chart Points

Point

Point Formula

Polygon

Polygon Vertex

Polygon Border

Style

Style Condition

Style

Polygon Body

Style

Style Condition

Style

Chart Points

A chart points groups definitions of coordinate points used to define polygons.

The definition of a point consists of the name of the point and the corresponding values for the x and y coordinates. To create such definitions, point and point formulas are used.

Click to learn more about chart points

Adding a Chart Points Node

To add a chart points node, select Add Chart Points on the shapes menu.

Point

A point is a definition of an [x,y] coordinate. The value [x] usually represents a datetime. The value [y] may refer to a price or some other concept.

These coordinate points are used to define polygons. Values for [x,y]coordinates are entered with a point formula.

Click to learn more about points

Adding a Point Node

To add a point, select Add Point on the chart points node menu.

Point Formula
A point formula is a node used to input the [x,y] coordinates of a point.

To represent some form of variation of the price or a price derivative over time, a typical point formula consists of the following two coordinates: x = datetime and y = rate.

For example:

Point SMA 20 Begin

x = record.begin
y = record.previous.sma20

The example above shows the definition of the first of two points necessary to draw the segment of the 20-periods SMA curve for any particular period or candle. In this case, x = record.begin is the starting datetime of the period and y = record.previous.sma20 is the rate of the 20-periods SMA of the previous period.

To complete the line segment corresponding to a single period, the closing datetime of the period and the closing rate for the 20-periods SMA are required:

Point SMA 20 End

x = record.end
y = record.sma20

The above system works very well for plotting all sorts of information over the candles, on the charts.

An oscillator like RSI too needs the definition of the starting and ending datetime of the period as the value for the x-axis. However, the value for axis y fits a different scale.

Anyway, the points definition is just as straight forward, for example:

Point RSI Begin

x = record.begin
y = record.previous.value

Point RSI End

x = record.end
y = record.value

Points do not necessarily need to refer to values on the dataset produced by the corresponding data product. For example, absolute values for the y-axis may be used to describe fixed graphical elements, for instance, a horizontal line, or a box.

Point Begin 20

x = record.begin
y = 20

Point End 20

x = record.end
y = 20

Point Begin 30

x = record.begin
y = 30

Point End 30

x = record.end
y = 30

The above four points are used to paint the background of the 20 to 30 value range of the RSI chart. The first two points are also used to draw the dotted line signaling the 20-value mark, and the last two are used for the dotted line indicating the 30-value mark.

Click to learn more about point formulas

Adding a Point Formula Node

To add a point formula, select Add Point Formula on the point node menu.

Polygon

A polygon features definitions that makeup shapes and their styles.

Polygons are defined by two or more vertices, which map points in a charts point. The graphic representation of polygons originates in styles applied to either or both polygon bodies and polygon borders.

Click to learn more about polygons

Adding a Polygon Node

To add a polygon, select Add Polygon on the shapes node menu.

Polygon Vertex

A polygon vertex is a reference to a point defined in the chart points, constituting a specific coordinate to be used as a vertex of a shape.

Vertices are the main element defining polygons. Once created, each vertex must establish a reference to the corresponding point in the charts point.

Vertex-01-add-and-link

Drawing curves requires two vertices. Painting areas, such as the background of a chart, likely requires four vertices. Note that vertices are not capable of featuring a style. Instead, styles are applied to polygon borders and polygon bodies.

Click to learn more about polygon vertexs

Adding a Polygon Vertex Node

To add a polygon vertex, select Add Polygon Vertex on the polygon node menu.

Polygon Border

A polygon border is a shape defined by at least two vertices used to draw lines or to apply a style to the stroke of a closed shape.

A polygon border needs at least two vertices to be defined. A border serves to create a stroke for the outlines of any sort of polygon, either closed or open, by giving it a style.

Click to learn more about polygon borders

Adding a Polygon Border Node

To add a polygon border, select Add Polygon Border on the polygon node menu.

Style
A style is a definition of color and opacity in case of a polygon body, and color, opacity and line thickness in case of polygon borders.

A style applied to a polygon body or a polygon border node acts as the default style.

Click to learn more about styles

Adding a Style Node

To add a style, select Add Style on a polygon border or polygon body node menu.

Configuring the Style

Select Configure Style on the menu to access the configuration.

A typical definition for a polygon body style looks like this:

{
    "default": {
        "opacity": 0.2,
        "paletteColor": "UI_COLOR.DARK_TURQUOISE"
    },
    "atMousePosition": {
        "opacity": 0.3,
        "paletteColor": "UI_COLOR.DARK_TURQUOISE"
    }
}

A typical definition for a polygon border style has a couple more properties:

{
    "default": {
        "opacity": 0.2,
        "lineWidth": 1,
        "lineDash": [0,0],
        "paletteColor": "UI_COLOR.DARK_TURQUOISE"
    },
    "atMousePosition": {
        "opacity": 0.3,
        "lineWidth": 2,
        "lineDash": [0,0],
        "paletteColor": "UI_COLOR.RUSTED_RED"
    }
}

The first section of the definition refers, as explicitly stated, to the default state of the style.

The second section refers to the style assigned to the column or period on which the mouse pointer is located. This is very useful for highlighting the specific zone of interest as the user browses the charts.

  • opacity is probably self-explanatory: it may range from 0 for a fully transparent object to 1 for a solid object.

  • paletteColor sets the color for the fill or stroke in cases of polygon bodies and polygon borders respectively. Use the variable UI_COLOR followed by a . and any of the properties in the following list for a selection of currently available colors:

Variable Value RGB Value Color Sample
DARK 48, 48, 54  
LIGHT 234, 226, 222  
GREY 150, 150, 150  
LIGHT_GREY 247, 247, 247  
WHITE 255, 255, 255  
BLACK 0, 0, 0  
GOLDEN_ORANGE 240, 162, 2  
RUSTED_RED 204, 88, 53  
GREEN 188, 214, 67  
RED 223, 70, 60  
PATINATED_TURQUOISE 27, 153, 139  
TITANIUM_YELLOW 244, 228, 9  
MANGANESE_PURPLE 91,80, 122  
TURQUOISE 74, 207, 217  
DARK_TURQUOISE 2, 149, 170  
  • lineWidth is the width of the border line, which should be greater than 0.

  • lineDash is used to turn the border into a dashed-line; the first value corresponds to the length of the dash while the second value defines the length of the space.

Style Condition
A style condition is a rule that allows applying an alternative style in cases where the rule validates true.

Style conditions offer a way to introduce additional intelligence on the visual representation of data by using styles that respond to certain conditions.

For example, the Percentage Bandwidth plotter module assigns a different color to the Moving Average line when it’s going up or down.

To do that, a style condition features it’s own style so that, when the condition validates true, the new style is applied.

Style conditions me be created in a sequence so that the style may continue changing upon the validation of a series of style conditions. The system evaluates all style conditions in a sequential order determined by their position in the rotational symmetry around the parent node. Each condition that is met may modify or add up to the resulting style that is rendered on screen. That is, the final style is the result of the sequential application of the styles defined for each condition that is met, on top of the default style.

Click to learn more about style conditions

Adding a Style Condition Node

To add a style condition, select Add Style Condition on a polygon border or polygon body node menu.

Editing a Style Condition

Select Edit Condition on the menu to access the configuration.

Style conditions work pretty much like conditions used on trading systems. The main difference is that the variables available are solely those provided by the bot product definition that reference the corresponding plotter module.

To continue the example of the Percentage Bandwidth plotter, the following is the condition that determines the newly added styles:

record.previous.movingAverage > record.movingAverage

As hinted earlier, when the condition is met, the default style is modified by a second style that may be created on the menu of the style condition node.

The definition of secondary styles is slightly different from that of the default style, as—in such cases—the atMousePosition property may no longer be defined:

{
    "opacity": 0.55,
    "lineWidth": 1,
    "lineDash": [0,0],
    "paletteColor": "UI_COLOR.RED"
}

Polygon Body

A polygon body is the fill of a shape made out of at least three vertices.

A polygon body needs at least three vertices to be defined. A body serves to create a fill for the outlines of any sort of polygon, either closed or open, by giving it a style.

Click to learn more about polygon bodies

Adding a Polygon Body Node

To add a polygon body, select Add Polygon Body on the polygon node menu.