/** * ----------------------------------------------------------------------------- * @package smartVISU * @author Martin Gleiß * @copyright 2012 - 2015 * @license GPL [http://www.gnu.de] * ----------------------------------------------------------------------------- */ {% extends "widget_plot.html" %} {% block example %}
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
{% filter trim|escape|nl2br %}{% verbatim %} {{ 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']) }} {% endverbatim %}{% endfilter %}

a simple plot

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

a plot of 3 series

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

a zoomable plot with unit

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

a minmaxavg plot

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

a plot with two y-axes

{{ plot.period('', ['env.system.load','env.core.memory'], 'avg', '1d', '', '', '', '', ['system load', 'memory'], ['#a00','#070'], '', ['Time', 'CPU', 'Memory'], '', [1,2], [0,1], ['#f00','#0a0']) }}
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.
{% filter trim|escape|nl2br %}{% verbatim %} {{ 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) }} {% endverbatim %}{% endfilter %}

a plot of 3 stacked area series

{{ plot.period('', ['bath_plot1', 'bath_plot2', 'bath_plot3'], 'avg', '1h', 'now', 0, '', '', '', '', ['areastack', 'areastack', 'areastack'],'','','','','','','','','percent', '', 1) }}

a plot of 2 stacked and a single column series

{{ 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) }}
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'.
{% filter trim|escape|nl2br %}{% verbatim %} // 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'}}) }} {% endverbatim %}{% endfilter %}

a plot with secondary switch axis and additional chart options

{{ 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 } }) }}

a plot with advanced zooming

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


More information on Highcharts: https://www.highcharts.com/
{% endblock %}