diff --git a/widgets/plot.html b/widgets/plot.html index 0b17901d9..e1826d325 100644 --- a/widgets/plot.html +++ b/widgets/plot.html @@ -7,7 +7,6 @@ * ----------------------------------------------------------------------------- */ - /** * The diagram showing curves of relative humidity and effective temperature superimposed upon rectangular coordinates. The comfort-zones indicate when humans feel good. * @@ -48,6 +47,27 @@ {% endmacro %} +/** +* Displays a heating curve (outside temperature compared to heating flow temperature) with current datapoint +* +* @param {id=} unique id for this widget (optional) +* @param {item[](list)} an item containing the pairs of temperatures +* Sorted array in format: [[outside1, heating_temp], [outside2, heating_temp] ...] +* @param {item(num)} an item for the current outside temperature +* @param {item(num)} an item for the current heating flow temperature +* @param {unchecked[?]=} object with additional options for Highcharts, see https://api.highcharts.com/ (optional) +*/ +{% macro heatingcurve(id, item_datapoints, item_current_outsidetemp, item_current_flowtemp, chartoptions) %} + +
+
+ +{% endmacro %} + + /** * Plots a chart of time series data * diff --git a/widgets/plot.js b/widgets/plot.js index 0d9c24001..adb22197b 100644 --- a/widgets/plot.js +++ b/widgets/plot.js @@ -86,6 +86,84 @@ $.widget("sv.plot_comfortchart", $.sv.widget, { }); +// ----- plot.heatingcurve ---------------------------------------------------- +$.widget("sv.plot_heatingcurve", $.sv.widget, { + + initSelector: 'div[data-widget="plot.heatingcurve"]', + + options: { + chartOptions: null + }, + + _create: function() { + this._super(); + + var plots = Array(); + var userOptions = this.options.chartOptions; + + plots[0] = { + type: 'spline', + name: 'Vorlauftemperatur', + lineWidth: 1 + }; + + plots[1] = { + name: 'point', + marker: { enabled: true, radius: 10, symbol: 'diamond', fillColor: 'rgb(255,255,0)', lineColor: 'rgb(255,255,0)' }, + showInLegend: false + }; + + var allOptions = { + series: plots, + chart: { className: 'heatingcurve' }, + title: { text: 'Heizkurve', y: 70 }, + xAxis: { min: -30, max: 20, minTickInterval: 5, title: { text: 'AT', align: 'high', margin: -2, x: -5, y: -40 } }, + yAxis: { min: 22, max: 33, minTickInterval: 5, title: { text: 'VL', align: 'high', rotation: 00, x: 60, y: 20 } }, + legend: { + align: 'center', + verticalAlign: 'top', + floating: true, + y: 70 + }, + plotOptions: { + area: { enableMouseTracking: false }, + }, + tooltip: { + formatter: function () { + return this.x.transUnit('temp') + ' / ' + this.y.transUnit('temp'); + } + } + }; + + $.extend(true, allOptions, userOptions); + this.element.highcharts(allOptions); + + }, + + _update: function(response) { + + var chart = this.element.highcharts(); + + chart.series[0].setData(JSON.parse(response[0])); + + var point = chart.series[1].data[0]; + if (!response[1] && point) { + response[1] = point.x; + } + if (!response[2] && point) { + response[2] = point.y; + } + if(point) + point.update([response[1] * 1.0, response[2] * 1.0], true); + else + chart.series[1].addPoint([response[1] * 1.0, response[2] * 1.0], true); + + // chart.redraw(); + } + +}); + + // ----- plot.period ---------------------------------------------------------- $.widget("sv.plot_period", $.sv.widget, {