plot.comfortchart plot.gauge plot.heatingcurve plot.period plot.pie plot.rtr plot.temprose plot.xyplot


Plots a chart of time series data

{{ plot.period(id, item, mode, tmin, tmax, ymin, ymax, count, label, color, exposure, axis, zoom, assign, opposite, ycolor, ytype, unit, chartoptions, stacking, stacks, export, source) }}
unique id for this widget (optional)
series of item(s); multiple items in array form: [ item1 , item2 ]
the aggregation mode (optional, default 'avg')
May be a single mode or an array with separate mode per item.
Available modes depend on backend, common ones are 'avg', 'sum', 'min', 'max', 'minmax', 'minmaxavg', 'on', 'raw'. See backend's documentation for further information.
the minimum time (x-axis): '1h', '2h'... (duration-format) Value is enterpreted as timestamp if no unit is given (e.g. 1629109298731).
the maximum time (x-axis): '', '1h', '2h'... (duration-format, default: now). Value is enterpreted as timestamp if no unit is given (e.g. 1629109298731).
the minimum for each y-axis; multiples in array form: [ min_y-axis1, min_y-axis2, ...] (optional)
If the axis type is boolean the passed value will be the label of the low state (e.g. 'Off')
the maximum for each y-axis; multiples in array form: [ max_y-axis1, max_y-axis2, ...] (optional)
If the axis type is boolean the passed value will be the label of the high state (e.g. 'On')
the number of datapoints in the series (optional, default 100)
May be a single value or an array of separate counts per item.
label for each series; multiples in array form (optional)
color for each series; multiples in array form (optional, default: suitable for design)
type of each serie: 'line', 'linestack', 'stair', 'spline', 'area', 'areastair', 'areaspline', 'areastacked','column', 'columnstacked'; multiples in array form (optional, default 'line')
title for the x-axis and y-axes in array form: [title_x-axis, title_y-axis1, title_y-axis2, ...] (optional)
minimal time range while zooming or 'advanced' or 'day' (optional, duration-format)
By passing 'advanced' a seaparate range selector is shown and data grouping for large amount of data is enabled
By passing 'day', the plot is shown from 0:00 until 24:00 on the current day (it makes sense to set tmin to '24h' and tmax to 'now').
assignment of the series to the y-axes; multiples in array form (optional)
y-axes setup for left '0' and right '1' hand in array form (optional)
y-axes color; multiples in array form (optional)
y-axes type, one of 'linear', 'logarithmic' or 'boolean'; multiples in array form (optional, default 'linear')
unit(s) for the y-axis. Either a unit of the language file, an individual format string (PHP sprintf like) or a simple string as suffix. Multiples in array form. (optional)
object with additional options for Highcharts, see (optional)
stacking of series for each stack (array for multiple stacks in ascending order): 'normal', 'percent' (optional, default=normal).
assign stacked series to different stacks: '0', '1, '2'... or ''. Sequence must be same as item sequence (optional, default='')
control for the export of plot data: 0 = none, 1 = images, 2 = images and data (e.g.csv) (optional)
source of the data. If set to 'item', data must be provided in a list item (optional, default=database)
More Information
Please note

This plot uses historical data series. Available modes depend on backends/drivers and not all of them do support series at all.
As from v3.2, the 'source' parameter enables data to be loaded from list items which need to have the structure [[ timestamp, data ], ... , [ timestamp, data ]].

{{ plot.period('', 'bath_plot_value', 'avg', '3h') }}

{{ plot.period('', ['bath_plot1', 'bath_plot2', 'bath_plot3'], 'avg', '1h', 'now', 0, 100, '', '', ['#aa0', '#a00', '#00a'], ['area', 'column', 'line']) }}

{{ plot.period('', 'bath_plot_value', 'avg', '20h', 'now', 0, 100, '', '', '', '', '', '1h', '', '', '', '', '%') }}

{{ plot.period('', 'bath_plot_value', 'minmaxavg', '12h', '', '', '', 25) }}

{{ plot.period('', ['env.system.load','env.core.memory'], 'avg', '1d', '', '', '', '', ['system load', 'memory'], ['#a00','#070'], '', ['Time', 'CPU', 'RAM'], '', [1,2], [0,1], ['#f00','#0a0']) }}

a simple plot

a plot of 3 series

a zoomable plot with unit

a minmaxavg plot

a plot with two y-axes

Data Export

By setting the parameter 'export' to '1', export of graphics can be selected in a context menu. Setting the parameter to '2' enables data export additionally. See the examples below for details.

Line, area and column graphs may be stacked by selecting the stacked 'exposure' type. Stacking mode is 'normal' (stack of actual values) or 'percent' (share of the sum of all values in %). The 'stack' parameter allows grouping in different stacks. If multiple stacks are used, the stacking mode needs to be set for each stack in array form. Note that series will be stacked only if time values on x-axis are synchronized for the stacked series.
{{ plot.period('', ['bath_plot1', 'bath_plot2', 'bath_plot3'], 'avg', '1h', 'now', 0, '', '', '', '', ['areastack', 'areastack', 'areastack'],'','','','','','','','','percent','', 1) }}

{{ plot.period('', ['bath_plot1', 'bath_plot2', 'bath_plot3'], 'avg', '1h', 'now', 0, '', 10, '', ['#aa0', '#a00', '#00a'], ['columnstack', 'columnstack', 'column'],'','','','','','','','',['normal', 'normal'],['0','0','1'], 2) }}

a plot of 3 stacked area series

a plot of 2 stacked and a single column series

Special functions

Not all features of Highcharts are accessible via widget parameters. To make charts even more flexible, the parameter 'chartoptions' is able to write additional options directly to Highcharts. The first example changes the scale on the first y-axis, disables lables on the second y-axis and places the legend below the graph. y-axis can be individually adressed by writing them in array-format.

The second example shows the 'advanced' zoom option and sets the default zoom level via 'chartoptions'. The level correlates with the sequence of the range selector buttons, starting from the left with '0'.
// Array format for e.g. yaxis:
// {yaxis: [{options for axis 0},{options for axis 1}]}

{{ plot.period('', ['bath_plot_value','bath_plot_switch'], 'max', '1d', '', [20,'Off'], [24,'On'], '', ['Temperature','Heating'], '', ['line','stair'], '', '', [1,2], [0,1], '', ['linear', 'boolean'], '°C', { yAxis: [ { tickInterval: 0.5 },{labels: {enabled: false}} ], legend: { verticalAlign: 'bottom', y: -30 } }) }}

{{ plot.period('', 'bath_plot_value', 'avg', '1y', 'now', '', '', 36500, '', '', '', '', 'advanced', '', '', '', '', '', { rangeSelector: {selected: '2'}}) }}

a plot with secondary switch axis and additional chart options

a plot with advanced zooming

More information on Highcharts: