Plot-Widgets
plot.comfortchart plot.gauge plot.heatingcurve plot.period plot.pie plot.rtr plot.temprose plot.xyplotplot.period
Plots a chart of time series data
Parameters
{{ 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) }}
id
unique id for this widget (optional)
item
series of item(s); multiple items in array form: [ item1 , item2 ]
mode
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.
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.
tmin
the minimum time (x-axis): '1h', '2h'... (duration-format) Value is enterpreted as timestamp if no unit is given (e.g. 1629109298731).
tmax
the maximum time (x-axis): '', '1h', '2h'... (duration-format, default: now). Value is enterpreted as timestamp if no unit is given (e.g. 1629109298731).
ymin
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')
If the axis type is boolean the passed value will be the label of the low state (e.g. 'Off')
ymax
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')
If the axis type is boolean the passed value will be the label of the high state (e.g. 'On')
count
the number of datapoints in the series (optional, default 100)
May be a single value or an array of separate counts per item.
May be a single value or an array of separate counts per item.
label
label for each series; multiples in array form (optional)
color
color for each series; multiples in array form (optional, default: suitable for design)
exposure
type of each serie: 'line', 'linestack', 'stair', 'spline', 'area', 'areastair', 'areaspline', 'areastacked','column', 'columnstacked'; multiples in array form (optional, default 'line')
axis
title for the x-axis and y-axes in array form: [title_x-axis, title_y-axis1, title_y-axis2, ...] (optional)
zoom
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').
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').
assign
assignment of the series to the y-axes; multiples in array form (optional)
opposite
y-axes setup for left '0' and right '1' hand in array form (optional)
ycolor
y-axes color; multiples in array form (optional)
ytype
y-axes type, one of 'linear', 'logarithmic' or 'boolean'; multiples in array form (optional, default 'linear')
unit
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)
chartoptions
object with additional options for Highcharts, see https://api.highcharts.com/ (optional)
stacking
stacking of series for each stack (array for multiple stacks in ascending order): 'normal', 'percent' (optional, default=normal).
stacks
assign stacked series to different stacks: '0', '1, '2'... or ''. Sequence must be same as item sequence (optional, default='')
export
control for the export of plot data: 0 = none, 1 = images, 2 = images and data (e.g.csv) (optional)
source
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 ]].
Examples
{{ 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.
Stacking
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: https://www.highcharts.com/
