anbei mein widget für plots mit mehreren y Achsen.
Uhrzeit = y Achse, danach jeweils die X Achsen
Zuweisung der Daten zu den Achsen
Code:
// ----- plot.multi_period -----------------------------------------------------------
$(document).delegate('div[data-widget="plot.multi_period"]', {
'update': function (event, response) {
// response is: [ [ [t1, y1], [t2, y2] ... ], [ [t1, y1], [t2, y2] ... ], ... ]
var label = $(this).attr('data-label').explode();
var color = $(this).attr('data-color').explode();
var exposure = $(this).attr('data-exposure').explode();
var axis = $(this).attr('data-axis').explode();
var series = Array();
var yaxes = Array();
var ymin = $(this).attr('data-ymin').explode();
var ymax = $(this).attr('data-ymax').explode();
var axesassign = $(this).attr('data-axesassign').explode();
for (var i = 0; i < response.length; i++) {
series[i] = {
type: (exposure[i] != 'stair' ? exposure[i] : 'line'),
step: (exposure[i] == 'stair' ? 'left' : false),
name: label[i],
data: response[i],
yAxis: axesassign[i]-1,
color: (color[i] ? color[i] : null)
}
yaxes[i]={min: ymin[axesassign[i]-1], max: ymax[axesassign[i]-1],title: {text: axis[i+1],style: {color:(color[i] ? color[i] : null)}}}
}
// draw the plot
$('#' + this.id).highcharts({
series: series,
xAxis: { type: 'datetime', title: { text: axis[0] } },
yAxis: yaxes
});
},
'point': function (event, response) {
for (var i = 0; i < response.length; i++) {
if (response[i]) {
var chart = $('#' + this.id).highcharts();
// more points?
for (var j = 0; j < response[i].length; j++) {
chart.series[i].addPoint(response[i][j], false, (chart.series[i].data.length >= 100));
}
chart.redraw();
}
}
}
});
Code:
{% macro multi_period(id, gad, mode, tmin, tmax, ymin, ymax, step, label, color, exposure, axes, axesassign) %}
<div id="{{ uid(page, id) }}" data-widget="plot.multi_period" data-item="{{ implode(gad, [mode|default('avg'), tmin|default('1h'), tmax|default('0')]) }}"
{% if ymin is not empty %} data-ymin="{{ implode(ymin) }}" {% endif %} {% if ymax is not empty %} data-ymax="{{ implode(ymax) }}" {% endif %}
data-step="{{ step|default(20) }}" data-label="{{ implode(label) }}"
data-color="{{ implode(color) }}" data-exposure="{{ implode(exposure) }}" data-axis="{{ implode(axes) }}" data-axesassign="{{ implode(axesassign) }}"
class="plot"></div>
{% endmacro %}
Code:
{{ own.multi_period('VerlaufTempAllgOwn', ['allgemein.wetterstation.temperaturNord','allgemein.wetterstation.Windgeschwindigkeit','allgemein.wetterstation.temperaturWS'],'avg','24h','',['-10','0'],['40','10'],'',['Nordwand','Windgeschwindigkeit'],'',['line','stair','line'],['Uhrzeit','°C','Test 2'],['1','2','1']) }}
Code:
['Uhrzeit','°C','Test 2']
Code:
['1','2']
Kommentar