Plot-Widgets
plot.comfortchart plot.gauge plot.heatingcurve plot.period plot.pie plot.rtr plot.temproseplot.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) }}
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)
tmax
the maximum time (x-axis): '', '1h', '2h'... (duration-format, default: now)
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 serie; multiples in array form (optional)
color
color for each serie; multiples in array form (optional, default: suitable for design)
exposure
type of each serie: 'line', 'stair', 'spline', 'area', 'areastair', 'areaspline', 'column'; 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' (optional, duration-format)
By passing 'advanced' a seaparate range selector is shown and data grouping for large amount of data is enabled
By passing 'advanced' a seaparate range selector is shown and data grouping for large amount of data is enabled
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
either a unit of the language file, an individual format string (PHP sprintf like) or a simple string as suffix. (optional)
chartoptions
object with additional options for Highcharts, see https://api.highcharts.com/ (optional)
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.
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
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 y-axis and places the legend below the graph.
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'.
{{ plot.period('', ['bath_plot_value','bath_plot_switch'], 'max', '1d', '', [20,'Off'], [24,'On'], '', ['Temperature','Heating'], '', ['line','stair'], '', '', [1,2], [0,1], '', ['linear', 'boolean'], ['°'], { yAxis: [ { tickInterval: 0.5 } ], 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/
