Gemäß Martins Bitte poste ich das hier in einem neuen Thread. Hier eine Erweiterung des plot.period Widgets um die Möglichkeit entlang der X-Achse zu zoomen.
Und der dazugehörige JavaScript Teil:
Viel Spass damit!
Code:
/**
* A simple widget for plotting zoomable 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 the step between two time-points (optional, only for 'offline'-driver)
* @param label/s for each series (optional)
* @param color/s for each series e. g. '#f00' for red (optional, default: sutiable for desig
n)
* @param type/s for each series: 'line', 'stair', 'spline', 'area', 'areaspline', 'column' (
optional, default 'line')
* @param title/s for the x-axis and y-axis
* @param maximum zoom for the x-axis in milliseconds (optional, default one hour)
*
* @see misc/fundamentals#Array-Form
* @see misc/fundamentals#Duration-Format
*/
{% macro period_zoom(id, gad, mode, tmin, tmax, ymin, ymax, step, label, color, exposure, axes, ma
xzoom) %}
<div id="{{ uid(page, id) }}" data-widget="plot.period_zoom" data-item="{{ implode(gad, [m
ode|default('avg'), tmin|default('1h'), tmax|default('0')]) }}"
{% if ymin is not empty %} data-ymin="{{ ymin }}" {% endif %} {% if ymax is not em
pty %} data-ymax="{{ ymax }}" {% endif %}
data-step="{{ step|default(20) }}" data-label="{{ implode(label) }}"
data-color="{{ implode(color) }}" data-exposure="{{ implode(exposure) }}" data-axi
s="{{ implode(axes) }}"
data-maxzoom="{{ maxzoom|default(3600000) }}" class="plot"></div>
{% endmacro %}
Code:
// ----- plot.period_zoom ------------------------------------------------------
$(document).delegate('div[data-widget="plot.period_zoom"]', {
'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 maxZoom = $(this).attr('data-maxzoom');
var series = Array();
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],
color: (color[i] ? color[i] : null)
}
}
// draw the plot
$('#' + this.id).highcharts({
chart: { zoomType: 'x' },
series: series,
xAxis: { type: 'datetime', title: { text: axis[0] }, maxZoom: maxZoom },
yAxis: { min: $(this).attr('data-ymin'), max: $(this).attr('data-ymax'), title: { text: axis[1] } }
});
},
'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();
}
}
}
});
. Schick mir mal deinen Google-Login.
Kommentar