plot.sparkline
Plots a chart of time series data
Parameters
{{ plot.sparkline(id, item, mode, tmin, tmax, ymin, ymax, count, width, height, exposure, unit, source, href, rel) }}
id
unique id for this widget (optional). Will be used as label / curve name in the tooltip, as well.
item
single item to plot
mode
the aggregation mode (optional, default 'avg')
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 interpreted as timestamp if no unit is given (e.g. 1629109298731).
tmax
the maximum time (x-axis): '', '1h', '2h'... (duration-format, default: now). Value is interpreted as timestamp if no unit is given (e.g. 1629109298731).
ymin
the minimum for the y-axis (optional)
ymax
the maximum for the y-axis (optional)
count
the number of datapoints in the series (optional, default 100)
width
width of the chart in px (optional, default = 120 px)
height
height of the chart in px (optional, default = 20 px)
exposure
type of each serie: 'line', 'stair', 'spline', 'area', 'areastair', 'areaspline', 'column' (optional, default 'line')
unit
unit for the y-axis. Either a unit of the language file, an individual format string (PHP sprintf like) or a simple string as suffix. (optional)
source
source of the data. If set to 'item', data must be provided in a list item (optional, default=database)
href
URL to use as link or id of a widget to add a tooltip (optional)
rel
use 'tooltip' in combination with a widget id as href in order to attach a tooltip to that widget. Any other text will interpret href as link to a popup (optional)
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
<table>
<tr style="height: 25px;">
<td style="width: 140px; text-align: left;">PV actual Power</td>
<td style="width: 100px;">27.3 kWh</td>
<td>{{ plot.sparkline('', 'bath_plot_value', 'avg', '3h', 'now', '','',10) }}<td>
</tr>
<tr style="height: 25px;">
<td style="width: 140px; text-align: left;">actual Consumption</td>
<td style="width: 100px;">23.5 kWh</td>
<td>{{ plot.sparkline('', 'bath_plot_value2', 'avg', '3h', 'now', '','', 10) }}<td>
</td>
</table>
a simple table with sparkline chart
PV actual Power |
27.3 kWh |
|
|
actual Consumption |
23.5 kWh |
|
|