Trends and signals
<smart-strip-chart>StripChart is a real-time chart for continuously acquired samples: the newest sample is drawn at the right and the oldest leaves at the left.
Samples are pushed into a ring buffer and drawing is batched per animation frame, so the chart can accept samples at high rates. It is intended for data acquisition from a WebSocket, an OPC UA subscription or a DAQ callback. For historian data at low rates, use the Trend component.
<smart-strip-chart>smart-industrial/source/modules/smart.stripchart.jsStripChartModule from smart-industrial/angular/stripchartStripChart from smart-industrial/react/stripchart<StripChart> in Smart.Blazor.Industrial
Install the package, load the two stylesheets and the component's module, and put the element on the page. The element below is the first one of the demo. Put the script after the module, in a <script type="module">, so that it runs once the component is defined.
npm install smart-industrial
<link rel="stylesheet" href="node_modules/smart-industrial/source/styles/smart.default.css" /> <link rel="stylesheet" href="node_modules/smart-industrial/source/styles/smart.industrial-elements.css" /> <script type="module" src="node_modules/smart-industrial/source/modules/smart.stripchart.js"></script> <smart-strip-chart id="acquisition"></smart-strip-chart>
const stripChart = document.getElementById('acquisition');
// raised when a pen is shown or hidden, whether from the legend or from togglePen
stripChart.addEventListener('penVisibilityChange', (event) => {
const { index, field, visible } = event.detail;
// ...
});
// example values
stripChart.autoScale = 'perPen';
stripChart.gridColumns = 8;
stripChart.gridRows = 5;
The getting started guide covers the bundle, the ISA-101 themes and the license key; the connectivity guide covers feeding the properties from plant tags.
The properties the demo sets, then the next ones; the API page lists all 18 with their types and defaults.
| Name | Type, default | Description |
|---|---|---|
autoScale | string | Sets or retrieves how the vertical range is chosen. |
historyLength | number | Sets or retrieves the number of samples the ring buffer holds, from 2 to 1 000 000. A larger value (Infinity included) holds 1 000 000; NaN or a negative value is ignored with a console warning and the buffer is kept. Changing it to another size creates a new buffer and discards the samples held. |
max | number | Sets or retrieves the top of the vertical range, for pens that do not set their own. Ignored unless autoScale is none. |
min | number | Sets or retrieves the bottom of the vertical range, for pens that do not set their own. Ignored unless autoScale is none. |
mode | string | Sets or retrieves how new samples move across the display. |
paused | boolean | Sets or retrieves whether the chart is frozen. A paused chart keeps what it holds and drops anything pushed at it, and push returns false so the application knows the sample was not taken. |
pens | array | Sets or retrieves the channels to draw as [{ field, label, unit, color, min, max, visible }]. field is the key under which each sample carries the value; the other members are presentation. With autoScale none, min and max are the pen's scale: a reading beyond them is kept as it is in the digital display, flagged OVER or UNDER beside it and in the chart's accessible name, and its trace is pinned to the edge it left by. An item that is not an object (null, for example) is skipped with a console warning. Assign a new array to update the component; an array modified in place is deep-equal to the current one and does not trigger a redraw. |
precisionDigits | number | Sets or retrieves how many decimal places the digital readout shows, from 0 to 20; a value outside that is clamped, and one that is not a number shows 2. |
showDigitalDisplay | boolean | Sets or retrieves whether the latest value of each pen is shown as a number above the legend. A sample with no reading for a pen - a missing, null, empty, non-numeric or infinite value - shows "--" (said as "no reading"), never 0; a reading off a fixed scale shows its real value with an OVER or UNDER flag. |
showScales | boolean | Sets or retrieves whether the scales are drawn: a y scale down the left of the plot with a label at every grid row, read on the first pen's range (the shared range, or min and max; with perPen scaling among several pens the labels take the first pen's colour), and an x scale along the bottom with a label at every grid column - seconds before now on a time axis, sample numbers otherwise. A classic waveform chart has both; the plot gives up the margins they take and is clipped to them. |
showLegend | boolean | Sets or retrieves whether the pen legend is shown. The legend is a composite widget: it is one tab stop for the whole group, arrowed between, with Enter or Space showing and hiding a pen. |
timeSpan | number | Sets or retrieves how much time the width covers, in milliseconds, when xAxisMode is time. A value that is not a positive number draws 60 000. |
xAxisMode | string | Sets or retrieves what the horizontal axis represents: the sample index or the sample time. |
The events carry their data in event.detail. pointsAppended and overflow report samples the strip chart has already stored, and samples pushed while paused is true are dropped and raise nothing. penVisibilityChange follows a pen the chart has already shown or hidden in pens.
| Event | Description and detail |
|---|---|
overflow | This event is triggered once per overflow episode: when the ring buffer is full and the first samples are overwritten. It is raised again only after the buffer has been emptied - by clear() or a historyLength change - and has filled again, not on every push while the buffer stays full.dropped number How many samples the push that started the episode overwrote.capacity number The buffer's size. |
penVisibilityChange | This event is triggered when a pen is shown or hidden, whether from the legend or from togglePen.index number The pen's position in the pens array.field string The pen's field.visible boolean Whether the pen is now drawn. |
pointsAppended | This event is triggered when samples are appended.appended number How many samples were taken.length number How many the buffer now holds.written number How many have been written since the buffer was created, which keeps counting past the buffer's capacity. |
| Method | Description |
|---|---|
clear() | Empties the buffer and redraws. The next time the buffer fills, overflow is raised again. |
invalidate() | Marks the chart as needing a redraw and redraws it on the next animation frame, so that many pushes between two frames cost one draw. The method is called by push, so an application rarely needs to call it. |
push(sample) | Appends one sample and schedules a redraw. A pen whose field is missing, null, empty, non-numeric or infinite has no reading at that sample: its trace has a gap there and the digital display shows "--", never 0. Returns false if the chart is paused, or the sample is not an object, and the sample was dropped. |
pushMany(samples) | Appends a batch of samples with one redraw for the whole batch, so a block read from a DAQ card costs the same as one sample. Items that are not objects (null, for example) are skipped. Returns false when the chart is paused, or no item was a sample, and the batch was dropped. |
snapshot() | Returns the samples in the buffer, oldest first, as a new array. The array is a copy, so it can be passed to an exporter or kept without being changed by later pushes. |
togglePen(index, visible?) | Shows or hides one pen. |
The same element with its wrapper. Each page has the installation steps and the full demo in that framework.
import { StripChartModule } from 'smart-industrial/angular/stripchart';
// Angular 14 and later; an NgModule application lists StripChartModule in its imports
@Component({
standalone: true,
imports: [StripChartModule],
template: `<smart-strip-chart
(onPenVisibilityChange)="onPenVisibilityChange($event)">
</smart-strip-chart>`
})
import { StripChart } from 'smart-industrial/react/stripchart';
<StripChart
onPenVisibilityChange={(event: CustomEvent) => onPenVisibilityChange(event.detail)} />
import 'smart-industrial/source/modules/smart.stripchart.js';
<smart-strip-chart
@penVisibilityChange="onPenVisibilityChange"></smart-strip-chart>
@using Smart.Blazor.Industrial
@rendermode InteractiveServer
<StripChart
OnPenVisibilityChange="OnPenVisibilityChange" />
The StripChart is drawn on a canvas, which is not accessible to a screen reader. The component names what it is trending, and its pen legend is a composite widget with one tab stop and arrow key navigation, so pens can be shown and hidden from the keyboard.
| Key | Action |
|---|---|
| Tab | Moves into the legend, landing on the pen that holds the tab stop, and out again. The legend is one stop however many pens there are. |
| Arrow Left/Right | Moves between the pens. Reversed when rightToLeft is set. |
| Home / End | Moves to the first / last pen. |
| Enter or Space | Shows or hides the focused pen, raising penVisibilityChange. |
The accessibility page has every attribute, key and announcement; the WCAG 2.2 conformance report covers the whole library.
The component follows the theme on the page: the default theme, or the ISA-101 light and dark themes that ship with the package. It declares 5 CSS variables of its own, among them --smart-strip-chart-height, --smart-strip-plot-background, --smart-strip-grid-color, --smart-strip-cursor-color. The CSS page lists them; the themes guide covers the tokens every component shares.
Comparison Chart Control Chart Scope Spectrum Trend