Nabend zusammen,
heute hatte ich mal die spontane Idee für die Außentemperatur mal was anderes als einen einfachen "period"-Plot auszuprobieren und bin dabei über die Highchart Funktion "columnrange" gestolpert.
Da es hier keine Out-of-the-Box Möglichkeit gab habe ich mal ein wenig gebastelt und eine (für mich) ansprechende Lösung gefunden.
Damit das ganze funktioniert habe ich die in der SmartVISU liegende Version von Highcharts auf die neuste Version (4.1.3) geupdatet. Außerdem arbeite ich auf dem develop Stand von sh.py inkl. Count-Patch.
Nach Anpassung der "widget.js" muss auf Root-Ebene der Smartvisu "php make.php" ausgeführt werden.
Grüße,
Lars
-----------------------------------------------------------------------
Highchart Download: http://code.highcharts.com/zips/Highcharts-4.1.3.zip => der Inhalt des "js" Ordners im Zip muss nach "vendor/plot.highcharts/". (Einfach alles überschreiben)
Count-Patch (Visu und sh.py): https://github.com/aschwith/smarthom...elop/smartvisu
widgets/plot.html
widget.js
Einbau-Beispiel:
heute hatte ich mal die spontane Idee für die Außentemperatur mal was anderes als einen einfachen "period"-Plot auszuprobieren und bin dabei über die Highchart Funktion "columnrange" gestolpert.
Da es hier keine Out-of-the-Box Möglichkeit gab habe ich mal ein wenig gebastelt und eine (für mich) ansprechende Lösung gefunden.
Damit das ganze funktioniert habe ich die in der SmartVISU liegende Version von Highcharts auf die neuste Version (4.1.3) geupdatet. Außerdem arbeite ich auf dem develop Stand von sh.py inkl. Count-Patch.
Nach Anpassung der "widget.js" muss auf Root-Ebene der Smartvisu "php make.php" ausgeführt werden.
Grüße,
Lars
-----------------------------------------------------------------------
Highchart Download: http://code.highcharts.com/zips/Highcharts-4.1.3.zip => der Inhalt des "js" Ordners im Zip muss nach "vendor/plot.highcharts/". (Einfach alles überschreiben)
Count-Patch (Visu und sh.py): https://github.com/aschwith/smarthom...elop/smartvisu
widgets/plot.html
Code:
/**
* A simple widget for plotting item min/max/avg chart
*
* @param unique id for this widget
* @param the item. Only one item supported.
* @param the minimum time (x-axis): '1h', '2h'... (duration-format)
* @param the maximum time (x-axis): '', '1h', '2h'... (duration-format, default: now)
* @param the minimum y-axis (optional)
* @param the maximum y-axis (optional)
* @param a unit, tries to get the format for that unit from the language-file (optional)
* @param title/s for the x-axis and y-axis (optional)
* @param count number of data points to load, default 100
*
* @see misc/fundamentals#Duration-Format
*/
{% macro minmaxavg(id, gad, tmin, tmax, ymin, ymax, unit, axis, count) %}
{% if once('highcharts-more') %}
<script src="vendor/plot.highcharts/highcharts-more.js"></script>
{% endif %}
<div id="{{ uid(page, id) }}" data-widget="plot.minmaxavg" data-unit="{{ unit|default('') }}"
data-item="{{ implode(gad, ['min', tmin|default('1h'), tmax|default('now'), count|default(100)]) }},
{{ implode(gad, ['max', tmin|default('1h'), tmax|default('now'), count|default(100)]) }},
{{ implode(gad, ['avg', tmin|default('1h'), tmax|default('now'), count|default(100)]) }}"
{% if ymin is not empty %} data-ymin="{{ ymin }}" {% endif %} {% if ymax is not empty %} data-ymax="{{ ymax }}" {% endif %}
{% if count is not empty %} data-count="{{ count }}" {% endif %} data-axis="{{ implode(axis) }}"
class="plot"></div>
{% endmacro %}
widget.js
Code:
// ----- plot.minmaxavg ----------------------------------------------------------
$(document).delegate('div[data-widget="plot.minmaxavg"]', {
'update': function (event, response) {
// response is: [[t1 , {{ gad.min }}], [t2 , {{ gad.max }}], [t3 , {{ gad.avg }}]]
var axis = $(this).attr('data-axis').explode();
var unit = $(this).attr('data-unit');
var minValues = response[0];
var maxValues = response[1];
var ranges = [];
for (var i = 0; i < minValues.length; i++) {
ranges[i] = [minValues[i][0], minValues[i][1], maxValues[i][1]];
}
// draw the plot
$('#' + this.id).highcharts({
chart: {
type: 'columnrange',
inverted: false
},
series: [{
data: ranges,
enableMouseTracking: false
}, {
type: 'line',
data: response[2]
}],
xAxis: {
type: 'datetime',
title: { text: axis[0] }
},
yAxis: {
min: $(this).attr('data-ymin'),
max: $(this).attr('data-ymax'),
title: { text: axis[1] }
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
if (unit != '') {
return parseFloat(this.y).transUnit(unit);
} else {
return parseFloat(this.y).transFloat();
}
}
}
}
},
tooltip: {
pointFormatter: function() {
var value = this.y;
if (unit != '') {
value = parseFloat(this.y).transUnit(unit);
} else {
value = parseFloat(this.y).transFloat();
}
return '<span style="color:' + this.color + '">\u00D8</span> <b>' + value + '</b><br/>'
}
},
legend: { enabled: false }
});
},
'point': function (event, response) {
var count = $(this).attr('data-count');
if (count < 1) {
count = 100;
}
var minValues = response[0];
var maxValues = response[1];
for (var i = 0; i < minValues.length; i++) {
var chart = $('#' + this.id).highcharts();
chart.series[0].addPoint([minValues[i][0], minValues[i][1], maxValues[i][1]], false, (chart.series[i].data.length >= count));
chart.series[1].addPoint(response[2][i], false, (chart.series[i].data.length >= count));
chart.redraw();
}
}
});
Einbau-Beispiel:
Code:
{{ plot.minmaxavg('tempOutdoor', 'zentral.wetter.temperatur', '7d', '', '', '', '°', ['', 'Temperatur in °C'], '7') }}
Kommentar