- √ - Neues Widget: zoomable Plot

[2ndsky]

Neues Widget: zoomable Plot

Nur um deinen Browser auszuschließen, die highcharts Demos gehen bei dir?

[henfri]

@henfri
du hast es ja bei Temprose und nicht bei plot.period probiert... vielleicht kann man da nicht zoomen.

Doch, ich hatte es auch mit plot.period probiert.
Aber ich hatte eine { falsch.

Allerdings funktioniert es weiterhin nicht. Ich probiere mal deine Version.

Gruß,
Hendrik

[2ndsky]

Neues Widget: zoomable Plot

Hab gerade noch gesehen maxZoom ist deprecated seit Version 2.2 der highcharts (welche verwendet die sV?). Wurde in minRange umbenannt.

@henfri
du hast es ja bei Temprose und nicht bei plot.period probiert... vielleicht kann man da nicht zoomen.

[callidomus]

Hi Niko,

coole Sache.

Momentan liefert das Backend 'nur' 100 Werte zurück. Nach den Parameter 'end' kann noch 'count' angefordert werden.
Das müsste ich im visu Plugin allerdings noch freigeben. Ist aber nur eine Kleinigkeit.

Bis bald

Marcus

[henfri]

Neues Widget: zoomable Plot

Das hab ich doch so versucht...
Da muss ich mal sehen, was ich doch anders gemacht hab...

Danke jedenfalls !

[2ndsky]

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.

/**
* 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 %}

Und der dazugehörige JavaScript Teil:

// ----- 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();
                        }
                }
        }
});

Viel Spass damit!