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, {