Datalogger
The Datalogger object displays statistical data collected by HSYCO dataloggers.
It groups data over time so that trends can be visualized in charts for the current day, previous day, month, and year.
It can also display data with minute resolution, although this requires more disk space.
In addition, it can log every processed value to a CSV file.
With the dual toolbar, you can explore a selected period or range in more detail. From live mode, this opens the selection in browser mode. In browser mode, it narrows the displayed time range. A finer resolution is used when available. The Zoom Mode attribute controls wheel and pinch scaling of the chart axes.
On touch devices, tap to inspect a point or drag to select a range in either mode. Tap the button in the tooltip to open the selection. The tooltip and selection disappear after four seconds without interaction. Tap with two fingers to go back, like right-clicking with a mouse.
With a mouse, dragging shows the inspected point followed by the selected range and its summary. Release to open the range, or right-click or press Escape while dragging to cancel. Range summaries show totals for counters and averages for measurement series.
Data logger setup and visualization
Attributes
Common
ID
Sets the object's ID.
The ID identifies the object and is used to reference it in UISet actions, allowing to change its attributes dynamically.
The ID is not unique, it can be shared among multiple objects to quickly change a common attribute.
IDs can't be changed with a UISet action, but they can have a Value Binding assigned to them. Value Bindings on IDs allow an object to be dinamically attached to a set of attribute values.
E.g. the following Value Binding switches the ID of the object between mybutton1 and mybutton2 based on the value of the UISet button.address:
Value binding:
="mybutton" + ui('button', 'address')
UISet:
UISet('button', 'address', '1') switches the ID to mybutton1
UISet('button', 'address', '2') switches the ID to mybutton2
Position and Size
Position
Sets the object's position.
Attribute Values
| Value | Description | Example |
|---|---|---|
| x<left>y<top> | Specify left/top coordinates in pixels. | x10y20 |
This attribute is available when parent's layout is neither "flex" nor "grid".
When parent's layout is neither "flex" nor "grid", this attribute defaults to x0y0.
Flex Grow
Specifies if the objects should grow to fill the available space.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Objects do not grow to fill the available space. |
| true | Objects expand to fill the available space. |
This attribute is available when parent's layout is "flex".
The default value is: false.
Flex Shrink
Specifies if the objects should shrink to fit the available space.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Objects do not shrink to fit the available space. |
| true | Objects shrink to fit the available space. |
This attribute is available when parent's layout is "flex".
The default value is: false.
Column
Specifies the starting column of the object inside a grid container.
Minimum value is 1.
Attribute Values
| Value | Description |
|---|---|
| <int> | Column index starting from 1. |
This attribute is available when parent's layout is "grid".
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Column Span
Specifies how many grid columns the object spans.
Minimum value is 1.
Attribute Values
| Value | Description |
|---|---|
| <int> | Column span starting from 1. |
This attribute is available when parent's layout is "grid".
When parent's layout is "grid", this attribute defaults to 1.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Row
Specifies the starting row of the object inside a grid container.
Minimum value is 1.
Attribute Values
| Value | Description |
|---|---|
| [empty] | Auto placement by the grid. |
| <int> | Row index starting from 1. |
This attribute is available when parent's layout is "grid".
When parent's layout is "grid", this attribute defaults to auto.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Row Span
Specifies how many grid rows the object spans.
Minimum value is 1.
Attribute Values
| Value | Description |
|---|---|
| <int> | Row span starting from 1. |
This attribute is available when parent's layout is "grid".
When parent's layout is "grid", this attribute defaults to 1.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Width
Sets the object's width in pixels.
Minimum value is 312.
Height
Sets the object's height in pixels.
Minimum value is 200.
Datalogger
Dataloggers
Specifies the datalogger options.
Attribute Values
| Value | Description | Example |
|---|---|---|
| <JSON array> | Array of datalogger configuration objects. | [{"name":"energy_today","label":"Energy Today","unit":"kWh"}] |
Mode
Selects live mode or browser mode.
Attribute Values
| Value | Description |
|---|---|
| live | Default value. Live mode. |
| browser | Browser mode. |
| liveonly | Locks the interface in live mode. It will hide the browser/live button on the UI. |
| browseronly | Locks the interface in browser mode. It will hide the browser/live button on the UI. |
The default value is: live.
Selection
List of datalogger names to display.
Attribute Values
| Value | Description |
|---|---|
| <comma-separated list> | List of datalogger names. |
List
List of datalogger names used to define the available logger ids and their order. Deprecated, use the Dataloggers attribute instead.
Attribute Values
| Value | Description |
|---|---|
| <comma-separated list> | Legacy datalogger names. |
This attribute has been deprecated since ver. 4.0
Names
List of display labels matched positionally to List, or to Dataloggers when List is empty. Deprecated, use the Dataloggers attribute instead.
Attribute Values
| Value | Description |
|---|---|
| <comma-separated list> | Legacy datalogger labels. |
This attribute has been deprecated since ver. 4.0
Slot
Shows a specific slot, from 0 to the number of slots-1.
Attribute Values
| Value | Description |
|---|---|
| <number> | Slot index, from 0 to the number of slots-1. |
Group
Name of a group. Datalogger objects with the same group are synchronized (controlling one affects the others).
Attribute Values
| Value | Description |
|---|---|
| <string> | Name of a group. |
Controls
Toolbar
Specifies the object's controls.
Attribute Values
| Value | Description |
|---|---|
| none | Default value. Don't show any controls. |
| dual | Show a dual-mode toolbar (dashboard/browser toggle with fields). |
| tabs | Show tabs on live mode for resolution and slots. |
The default value is: none.
History Buttons
Shows or hides the browser history buttons in the toolbar.
Attribute Values
| Value | Description |
|---|---|
| true | Default value. Show history buttons. |
| false | Hide history buttons. |
This attribute is available when toolbar is "dual".
When toolbar is "dual", this attribute defaults to true.
Fullscreen
Enables or disables fullscreen mode.
Attribute Values
| Value | Description |
|---|---|
| false | Disables fullscreen mode. |
| true | Enables fullscreen mode. |
This attribute is live. It can't be set from the Project Editor, it needs to be set dynamically with a UISet.
Time
Resolutions
Specifies the available resolutions. Use "auto" to derive from the datalogger resolution. Resolutions are displayed only if they are available on the datalogger.
Attribute Values
| Value | Description |
|---|---|
| [empty] | Auto (all supported). |
| month | Monthly resolution. |
| day | Daily resolution. |
| hour | Hourly resolution. |
| minute | Minute resolution. |
The default value is: auto.
Browser Resolutions
Specifies the available resolutions in browser mode. When empty, the Resolutions attribute is used.
Attribute Values
| Value | Description |
|---|---|
| year | Yearly resolution. |
| month | Monthly resolution. |
| day | Daily resolution. |
| hour | Hourly resolution. |
| minute | Minute resolution. |
By default, this attribute uses the resolutions attribute.
Resolution
Specifies the resolution of the data to display.
Attribute Values
| Value | Description |
|---|---|
| month | Set the live resolution to month. |
| day | Set the live resolution to day. |
| hour | Set the live resolution to hour. |
| minute | Set the live resolution to minute. |
The default value is: auto.
Browser Date
Sets the browser's date and time, and updates the resolution based on the precision you provide. Format: YYYY[MM[DD[HH]]],YYYY[MM[DD[HH]]]. Use a single value for a single period, or a comma to define a range: from,to. Either side can be empty to keep the current from/to.
Attribute Values
| Value | Description |
|---|---|
| yyyy | Specify a year. |
| yyyymm | Specify year and month. |
| yyyymmdd | Specify year, month and day. |
| yyyymmddhh | Specify year, month, day and hour. |
| yyyymmdd,yyyymmdd | Specify a range (from,to). |
| ,yyyymmdd | Open-ended range (keep current from). |
| yyyymmdd, | Open-ended range (keep current to). |
Browser Resolution
Sets the browser's resolution, if in browser mode.
When toggling between browser and live mode, the initial browser resolution is the same as the live resolution.
Attribute Values
| Value | Description |
|---|---|
| year | Default value. Set the browser resolution to year. |
| month | Set the browser resolution to month. |
| day | Set the browser resolution to day. |
| hour | Set the browser resolution to hour. |
| minute | Set the browser resolution to minute. |
The default value is: year.
This attribute is live. It can't be set from the Project Editor, it needs to be set dynamically with a UISet.
Browser Data Limit
Specifies the maximum number of values per chart series in browser mode (0 disables the limit).
Minimum value is 120.
Attribute Values
| Value | Description |
|---|---|
| 0 | Default value. No limit. |
| <number> | Max values per series. |
The default value is: 0.
Charts
Type
Specifies the chart type.
Attribute Values
| Value | Description |
|---|---|
| bar | Default value. Draw bars. |
| point | Draws points. |
| line | Draws a line connecting the values. |
| spline | Draws a spline connecting the values. |
| pie | Draws a pie chart, each slice representing a datalogger (if multiple dataloggers are visible), or past/present values. Percentage is shown in the legend. |
The default value is: bar.
Range Values
Specifies which values to display for range dataloggers (min, avg, max). Leave empty to show all.
Attribute Values
| Value | Description |
|---|---|
| min | Show minimum values. |
| avg | Show average values. |
| max | Show maximum values. |
The default value is: min,avg,max.
Dashboard Mode
Controls whether the component renders a single chart or one chart per available resolution.
Attribute Values
| Value | Description |
|---|---|
| single | Default value. Render a single chart (default). |
| multi | Render one chart for each visible resolution. |
The default value is: single.
Dashboard Resolutions
Specifies which resolutions are rendered when Dashboard Mode is set to multi. The order is enforced from month to minute.
Attribute Values
| Value | Description |
|---|---|
| month | Show the monthly chart. |
| day | Show the daily chart. |
| hour | Show the hourly chart. |
| minute | Show the minute chart. |
Multi Range
For multiple datalogger ids only. Show multiple ranges for each datalogger id: each chart has multiple value axes.
Attribute Values
| Value | Description |
|---|---|
| true | Show multiple ranges for each datalogger id. |
| false | Default value. Single range for each datalogger. |
The default value is: false.
Draw Axis
Displays or hides the axes (also notches and labels).
Attribute Values
| Value | Description |
|---|---|
| [empty] | Default. The axes are visible (also notches and labels). |
| false | The axes are not visible (also notches and labels). |
The default value is: true.
Point Size
Specifies the point size.
Attribute Values
| Value | Description |
|---|---|
| <number of pixels> | Point size. |
Stroke
Specifies the pixel size of the stroke that applies to line and spline chart types.
Attribute Values
| Value | Description |
|---|---|
| <number of pixels> | Stroke size. |
Notches
Specifies the number of notches on the y-axis.
Attribute Values
| Value | Description |
|---|---|
| <value> | Number of notches on the y-axis. |
The default value is: false.
Thresholds
Specifies a list of values at which to display a line (threshold). Not supported with multiple dataloggers with different scales/units.
Attribute Values
| Value | Description |
|---|---|
| <comma-separated list> | List of values at which to display a line (threshold). |
Value Label Type
Specifies the type of value label to be shown.
Attribute Values
| Value | Description |
|---|---|
| popup | Default value. Value labels are shown on mouseover, or on touch (if on a touch-enabled device). |
| start | Value labels are shown at the start of the value. |
| center | Value labels are shown at the center of the value. |
| end | Value labels are shown at the end of the value. |
| hidden | Hide value labels. |
The default value is: popup.
Zoom Mode
Specifies the zoom mode for wheel/pinch gestures.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Disable zooming. |
| value | Zoom the value axis only. |
| category | Zoom the category axis only. |
| both | Zoom both axes. |
This attribute is available when type is neither "pie" nor "doughnut".
When type is neither "pie" nor "doughnut", this attribute defaults to false.
Category Axis Title
Specifies the category axis title (x if vertical, y if horizontal).
Attribute Values
| Value | Description |
|---|---|
| <string> | Category axis title. |
This attribute is available when type is neither "pie" nor "doughnut".
Value Axis Title
Specifies the value axis title (y if vertical, x if horizontal).
Attribute Values
| Value | Description |
|---|---|
| <string> | Value axis title. |
This attribute is available when type is neither "pie" nor "doughnut".
Category Axis Grid
Specifies whether to show the grid on the category axis.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Do not show the grid on the category axis. |
| true | Show the grid on the category axis. |
This attribute is available when type is neither "pie" nor "doughnut".
When type is neither "pie" nor "doughnut", this attribute defaults to false.
Value Axis Border
Specifies whether to show the border on the value axis.
Attribute Values
| Value | Description |
|---|---|
| false | Do not show the border on the value axis. |
| true | Default value. Show the border on the value axis. |
This attribute is available when type is neither "pie" nor "doughnut".
When type is neither "pie" nor "doughnut", this attribute defaults to true.
Value Axis Grid
Specifies whether to show the grid on the value axis.
Attribute Values
| Value | Description |
|---|---|
| false | Do not show the grid on the value axis. |
| true | Default value. Show the grid on the value axis. |
This attribute is available when type is neither "pie" nor "doughnut".
When type is neither "pie" nor "doughnut", this attribute defaults to true.
Value Label Format
Formats the value axis tick labels (y if vertical, x if horizontal).
Uses the shared format item (same options as the Text object's Format).
This attribute is available when type is neither "pie" nor "doughnut".
Colors
Axis Color
Specifies the axis color.
Attribute Values
| Value | Description |
|---|---|
| <CSS color> | Axis color. |
Label Color
Specifies the color of the axis and bars labels.
Attribute Values
| Value | Description |
|---|---|
| <CSS color> | Color of the axis and bars labels. |
Notch Color
Specifies the color of the axis notches.
Attribute Values
| Value | Description |
|---|---|
| <CSS color> | Color of the axis notches. |
Threshold Colors
Specifies a list of colors for thresholds, one value per line. Not supported with multiple dataloggers with different scales/units.
Attribute Values
| Value | Description |
|---|---|
| <comma-separated list of CSS colors> | List of colors of threshold lines. |
Layout
Panel
Shows a panel that frames the object. Its style can be modified.
Attribute Values
| Value | Description |
|---|---|
| true | Default value. Shows the panel. |
| false | Hides the panel. |
The default value is: true.
Panel Color
Specifies the panel color.
Attribute Values
| Value | Description |
|---|---|
| default | Default value. Default color. |
| primary | Primary color, used to highlight important areas. |
| warning | Warning color, used to highlight warning areas. |
| success | Success color, used to highlight success areas. |
| error | Error color, used to highlight error areas. |
| red,blue,yellow,green,yellow,purple,orange,green | Palette colors. |
| custom | Custom color, defined in the "Custom Color" attribute. |
This attribute is available when panel is "true".
The default value is: default.
Panel Custom Color
Specifies the panel custom color.
Attribute Values
| Value | Description | Example |
|---|---|---|
| <html color> | Color in any html accepted format. | #ff0000 |
This attribute is available when panelstyle is "custom" or panelstyle is "glass" or panelcolor is "custom".
Past Period
Specifies if the past period is visible (not available for multiple datalogger ids).
Attribute Values
| Value | Description |
|---|---|
| true | Default value. Show past period. |
| false | Hide past period. |
The default value is: true.
Pie Legend Position
Specifies the pie chart legend position. Applies only to "pie" type.
Attribute Values
| Value | Description |
|---|---|
| top | Default value. Show the legend on the top of the pie chart. |
| right | Show the legend on the right of the pie chart. |
The default value is: top.
Legend
Specifies how the legend is displayed.
Attribute Values
| Value | Description |
|---|---|
| true | Default value. Show all legends. |
| false | Hide legends. |
The default value is: true.
Totals
Specifies if the totals are displayed.
Attribute Values
| Value | Description |
|---|---|
| true | Default value. Show totals. |
| false | Hide totals. |
The default value is: true.
Other
Download
Displays a button in browser mode that downloads a CSV file with the currently displayed data.
Attribute Values
| Value | Description |
|---|---|
| true | Display the download button in browser mode. |
| false | Default value. Hide the download icon. |
The default value is: false.
CSV Separator
Specifies a character used to separate columns in the generated CSV file. Rows are always separated with the newline character.
Attribute Values
| Value | Description |
|---|---|
| <character> | Character used to separate columns in the generated CSV file. |
Refresh Interval
Specifies the live refresh interval in milliseconds.
Attribute Values
| Value | Description |
|---|---|
| <number> | Live refresh interval in milliseconds. |
The default value is: 5000.
View
Visible
Sets the object's visibility.
Attribute Values
| Value | Description |
|---|---|
| true | Default value. Visible. |
| false | Hidden. |
The default value is: true.
Enabled
Specifies if the object is enabled or disabled. A disabled object appears as grayed out and can't be interacted with.
Attribute Values
| Value | Description |
|---|---|
| true | Default value. Enabled. |
| false | Disabled. |
The default value is: true.
Blink
Blinks the object at the specified speed.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Not blinking. |
| slow | Blinks slowly. |
| fast | Blinks fast. |
The default value is: false.
Transition
Specifies the transition effect when the object is shown or hidden.
Attribute Values
| Value | Description |
|---|---|
| none | Default value. No transition. |
| fade | Fade in/out. |
| fade-left | Slide from left and fade in/out. |
| fade-right | Slide from right and fade in/out. |
| fade-up | Slide from top and fade in/out. |
| fade-down | Slide from bottom and fade in/out. |
| slide-left | Slide from left. |
| slide-right | Slide from right. |
| slide-up | Slide from top. |
| slide-down | Slide from bottom. |
| zoom-in | Zoom in. |
| zoom-out | Zoom out. |
| 3d-flip-left | 3D flip from left. |
| 3d-flip-right | 3D flip from right. |
The default value is: none.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Transition Duration
Specifies the transition duration in milliseconds.
Attribute Values
| Value | Description |
|---|---|
| <integer> | Duration in milliseconds. |
This attribute is available when transition is not "none".
When transition is not "none", this attribute defaults to 300.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Transition Delay
Specifies the transition delay in milliseconds.
Attribute Values
| Value | Description |
|---|---|
| <integer> | Delay in milliseconds. |
This attribute is available when transition is not "none".
When transition is not "none", this attribute defaults to 0.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Opacity
Sets the object's opacity. Opacity is the degree to which content behind an object is hidden.
Attribute Values
| Value | Description |
|---|---|
| 0 | The object is fully transparent. |
| >0.0, <1.0 | The object is translucent (content behind the element can be seen). |
| 1.0 | Default value. The object is fully opaque. |
The default value is: 1.0.
Rotation
Specifies the degrees by which the object is rotated. A positive number rotates it clockwise, while a negative value rotates it counter-clockwise.
The default value is: 0.
CSS Class
Specifies a CSS Class that applies to the object, useful to customize its appearance. Custom CSS Classes are specified within the custom.css file.
Margin
Specifies the margin of the object. The margin is the space outside the object's border.
Attribute Values
| Value | Description | Example |
|---|---|---|
| <int> | Specify the margin in pixels for all sides of the object. | |
| <top> <right> <bottom> <left> | Specify the margin in pixels for each side of the object. | 10 20 30 40 |
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
View Scale
Specifies the scale of the object. The scale is the ratio between the object's size and the size of the view it is contained in.
Attribute Values
| Value | Description |
|---|---|
| <float> | Specify the scale for both width and height of the object. |
The default value is: 1.0.
This attribute is experimental. It might not work properly and it might be modified or removed in a future release.
Meta
Comment
Specifies a comment, visible only in the Project Editor. It can be used to add a note or a tag to the object. The filter in the object's SELECT panel applies to the comment as well.
This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.
Exclude
Excludes the object from the UI. Useful to temporarily hide an object without deleting it. Different from the "Visible" attribute, which hides the object in the UI but keeps it in the project, allowing it to be shown again with a UISet.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Object is included in the UI. |
| true | Object is excluded from the UI. |
The default value is: false.
This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.