.
<div id="{{ uid(page, id) }}" data-widget="plot.stacked" data-item="{{ implode(gad, [mode|default('avg'), tmin|default('1h'), tmax|default('[COLOR=Red]0[/COLOR]'), count|default(100)]) }}"
/**
* A simple widget for plotting stacked charts
*
* @param unique id for this widget
* @param series of item/s. More item/s in array form: [ item1 , item2 ]
* @param the mode: 'avg', 'sum', 'min', 'max'
* @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 label/s for each series (optional)
* @param stacklabel if the aggregated values should be shown, true/false (optional, default true)
* @param color/s for each series e. g. '#f00' for red (optional, default: sutiable for design)
* @param type/s for each series (exposure): 'line', 'stair', 'spline', 'area', 'areaspline', 'column' (optional, default 'line')
* @param count number of data points to load, default 100
* @param correctdate whether to delete last data point (if stats from previous
*
* @see misc/fundamentals#Array-Form
* @see misc/fundamentals#Duration-Format
*/
{% macro stacked(id, gad, mode, tmin, tmax, ymin, ymax, label, stacklabels, color, exposure, count, correctdate) %}
<div id="{{ uid(page, id) }}" data-widget="plot.stacked" data-item="{{ implode(gad, [mode|default('avg'), tmin|default('1h'), tmax|default('now')]) }}"
{% if ymin is not empty %} data-ymin="{{ ymin }}" {% endif %} {% if ymax is not empty %} data-ymax="{{ ymax }}" {% endif %}
data-label="{{ implode(label) }}" data-stacklabels="{{ stacklabels|default(true) }}" data-correctdate="{{ correctdate|default('false') }}"
data-color="{{ implode(color) }}" data-exposure="{{ implode(exposure) }}" data-axis="{{ implode(axes) }}"
{% if count is not empty %} data-count="{{ count }}" {% endif %}
class="plot"></div>
{% endmacro %}
{{ plot.stacked('p3', ['ehz.haus.kosten.gestern', 'ehz.kosten.gestern.weekly_avg'], 'max', '2w', '', '', '', ['Haushalt', 'Wochendurchschnitt'], 'true', '', ['column', 'line'], '', true) }}
{{ plot.stacked('p3', ['zaehler.haushalt.kosten.gestern', 'zaehler.haushalt.kosten.gestern.weekly_avg'], 'max', '2w', '', '', '', ['Haushalt', 'Wochendurchschnitt'], 'true', '', ['column', 'line'], '', true) }}
// ----- plot.stacked ----------------------------------------------------------
$(document).delegate('div[data-widget="plot.stacked"]', {
'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 zoom = $(this).attr('data-zoom');
var showStacklabels = JSON.parse($(this).attr('data-stacklabels'));
var correctdate = JSON.parse($(this).attr('data-correctdate'));
var series = Array();
for (var i = 0; i < response.length; i++) {
// 1) werte werden um Mitternacht für den Vortag generiert, Anzeige von Highcharts auf dem Folgetag, ABzug von 24h in millisekunden
// 2) timestamp is in milliseconds, harmonize last 3 figures to 000
// sollte also hiermit auf 10sec "ungenau" werden => notwendig für gruppierung von highcharts
// 3) remove last value as it is a during the day value
var oneResponse = response[i]; // [[1420526954593,0],[1420554301019,6.21],[1420585202298,6.7],[1420671601499,7.4],[1420671601527,7.12],[1420747423682,7.12]]
for (var k = 0; k < oneResponse.length; k++) {
var timestamp = oneResponse[k][0];
// 1)
if (correctdate) {
timestamp = timestamp - 1000 * 60 * 60 * 24;
}
// 2)
var newTimestamp = timestamp.toString().substring(0, 9).concat('0000');
oneResponse[k][0] = parseInt(newTimestamp);
}
oneResponse.pop(); // 3)
response[i] = oneResponse;
series[i] = {
type: (exposure[i] != 'stair' ? exposure[i] : 'line'),
step: (exposure[i] == 'stair' ? 'left' : false),
name: label[i],
data: response[i],
color: (color[i] ? color[i] : null)
}
}
// draw the plot
$('#' + this.id).highcharts({
chart: { type: 'column' },
series: series,
xAxis: { type: 'datetime', title: { text: axis[0] } },
yAxis: { min: $(this).attr('data-ymin'), max: $(this).attr('data-ymax'), title: { text: axis[1] }, stackLabels: {
enabled: showStacklabels,
style: { color: '#fff', 'font-size': '13px', 'line-height': '14px' } }
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: { enabled: false }
}
}
});
},
'point': function (event, response) {
var count = $(this).attr('data-count');
if (count < 100) {
count = 100;
}
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 >= count));
}
chart.redraw();
}
}
}
});
/**
* A simple widget for plotting stacked charts
*
* @param unique id for this widget
* @param series of item/s. More item/s in array form: [ item1 , item2 ]
* @param the mode: 'avg', 'sum', 'min', 'max'
* @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 label/s for each series (optional)
* @param stacklabel if the aggregated values should be shown, true/false (optional, default true)
* @param color/s for each series e. g. '#f00' for red (optional, default: sutiable for design)
* @param type/s for each series (exposure): 'line', 'stair', 'spline', 'area', 'areaspline', 'column' (optional, default 'line')
* @param count number of data points to load, default 100
* @param correctdate whether to delete last data point (if stats from previous
*
* @see misc/fundamentals#Array-Form
* @see misc/fundamentals#Duration-Format
*/
{% macro stacked(id, gad, mode, tmin, tmax, ymin, ymax, label, stacklabels, color, exposure, count, correctdate) %}
<div id="{{ uid(page, id) }}" data-widget="plot.stacked" data-item="{{ implode(gad, [mode|default('avg'), tmin|default('1h'), tmax|default('now')]) }}"
{% if ymin is not empty %} data-ymin="{{ ymin }}" {% endif %} {% if ymax is not empty %} data-ymax="{{ ymax }}" {% endif %}
data-label="{{ implode(label) }}" data-stacklabels="{{ stacklabels|default(true) }}" data-correctdate="{{ correctdate|default('false') }}"
data-color="{{ implode(color) }}" data-exposure="{{ implode(exposure) }}" data-axis="{{ implode(axes) }}"
{% if count is not empty %} data-count="{{ count }}" {% endif %}
class="plot"></div>
{% endmacro %}
{"series":[[1421091070755,5.32],[1421114600300,5.23],[1421190080085,4.77],[1421260758067,4.5],[1421276480509,4.25],[1421287400396,4.22],[1421362878915,4.05],[1421449279926,3.83],[1421484250092,3.75],[1421535680849,3.55],[1421546599989,3.57],[1421577362385,3.59],[1421609601216,3.73],[1421622079688,3.76],[1421708479927,3.84],[1421794880801,3.82],[1421805920713,3.79],[1421881280244,3.64],[1421954616068,3.66],[1421967679421,3.71],[1421978600767,3.69],[1422140480043,3.69],[1422151401073,3.68],[1422214664368,3.65],[1422237800363,3.7],[1422300670755,3.7]],"cmd":"series","sid":"zaehler.haushalt.kosten.gestern.weekly_avg|max|2w|now"}
{"series":[[1421091070749,5.31],[1421103678902,3.41],[1421114600222,3.42],[1421190080007,2.43],[1421276480461,3.17],[1421287399628,3.18],[1421362878602,2.58],[1421449279880,2.39],[1421535680762,6.02],[1421546599960,6.03],[1421609601219,6.03],[1421622079645,6.88],[1421708479822,3.23],[1421794880719,2.38],[1421805920687,2.39],[1421881280167,2.5],[1421967679333,2.38],[1421978600717,2.39],[1422054080159,2.42],[1422140479976,5.72],[1422151400385,5.73],[1422226879997,6.4],[1422237800308,6.41],[1422300670749,6.41]],"cmd":"series","sid":"zaehler.haushalt.kosten.gestern|max|2w|now"}
// 2) timestamp is in milliseconds, harmonize last 3 figures to 000
var newTimestamp = timestamp.toString().substring(0, 9).concat('0000');
var newTimestamp = timestamp.toString().substring(0, 8).concat('00000');
Kommentar