Chart and Datatable

Chart and Datatable are the two animation types that put a whole component in place of an SVG object. Both bind to a rect and fill the area that rectangle occupies.

These types run in frames of their own

While the other bindings on a screen are evaluated together on the server, Chart, Datatable and Slider are rendered in isolated frames of their own and fetch their data themselves. What follows in practice: a chart’s refresh period comes from its own configuration, separately from the screen’s Duration.

Chart

A time-series chart. You add variables as series and show live or historical data.

You do not write code for it

The chart is configured through a form. What you fill in is stored in the element’s props, and the expression that runs is generated from it — you do not write the expression by hand. Changing a series therefore means changing a field on the form, not editing chart code.

Series settings

Each series corresponds to one variable.

Field	Description
Label	The name to display
Axis	Which Y axis to draw on — the chart supports two
Alarm (optional)	An alarm bound to the series; its levels are drawn as lines
Line width	Line thickness
Fill	Whether to fill below the line (an area chart)
Min / Max	The series’ scale limits
Line style	The line’s style
Smoothing	How much the line is smoothed
Points (radius)	The size of the point markers
Fill opacity	The fill’s opacity
Unit	Unit

A new series takes its colour in turn from a palette of eight, so series stay distinguishable without picking colours by hand.

Chart settings

Field	Description
Title	The chart’s title
Theme	Light or dark
Value decimals	Decimal places shown on values
Legend position	Where the legend sits
Grid color	Grid colour
Border · Corner radius	Frame thickness and corner rounding
CSV separator	The separator used on export
PDF title	The title on the PDF output

Axis titles, logarithmic scale, starting at zero and tick counts are set per Y axis; the X axis takes a label format and a tick count of its own.

Live and history modes

The chart works in two modes, and which one it opens in comes from its configuration:

Mode	What it shows
Live	Current values inside a sliding window — the window’s width and the sampling period are both set
History	A fixed range in the past

By default the chart opens live with a window of about 40 seconds; the default history range is one hour.

The operator toolbar

The chart carries a toolbar the operator can use at run time. Which buttons appear is chosen in the configuration:

Button	What it does
Config	Opens the appearance settings to the operator
Filter	Filters which series or range is shown
Reset	Returns the view to where it started
Guide	Shows a usage hint
Export	Exports the data as CSV and the picture as PDF

If you want a screen to stay view-only for operators, turning the toolbar buttons off is the simplest way to fix the chart in place.

Alarm levels and reference lines

When an alarm is bound to a series, that alarm’s HH / H / L / LL levels are drawn as horizontal lines, and each level can be turned on or off separately. Independently of those you can define reference lines of your own — a contractual limit, a target value.

Datatable

Places a table on the screen. You choose where its rows come from.

Data source

Source	What it shows
Variables (live)	The current values of the variables you pick
Setpoint Presets	Stored sets of setpoints (a recipe)
SQL query	The result of a query written against a datasource
Static rows	Fixed rows entered by hand

Editable rows

With the Variables (live) source, each variable can be marked Editable individually. A marked row can be changed by the operator in the table and the value is written to the variable — so the table is not only a display, it can serve as an input surface.

Write permission and confirmation

Writing from an editable row is an ordinary variable write: it is refused if the user lacks the permission, and refused again if the variable carries an Operation Lock. The Write confirm option asks the operator to confirm before the write — worth leaving on for tables used for control.

Appearance and refresh

Title, theme, background (which can be made transparent to blend with the page), font and font size, border, corner radius, padding and the text shown when there is no data are all configurable.

The table refreshes on its own period with Auto refresh, given in seconds. There is also a preview option for seeing the table populated while designing.

What it binds to

Both are offered on a rect alone. In the design you set aside the area the component will occupy by drawing a rectangle, and bind to that rectangle.

Related

• Element Editor — the binding form and the type list
• Animation — building the screen
• Trends — a trend screen in its own right, not bound to an animation