widget: multi y plot

[2ndsky]

Da hast du natürlich recht. Ich dachte auch eher an eine Art Expertenfunktion.

Bei so vielen Widgets sollte man sich früher oder später mal Gedanken über die intelligente Auswahl der verwendeten Widgets machen. Über 3G durch einen VPN Tunnel will ich nicht unbedingt zig JavaScript Code von Widgets laden, die ich gar nicht verwende.

[Apollo]

Das stimmt natürlcih auch, aber ich denke da ist noch genug platz nach oben, denn jedes widget ist ja grad mal 1-2kb und es wird nur einmal für die ganze VISU geladen...

Gruss

Ja der Expertenmodus könnte ja genau so wie oben beschrieben programmiert werden.

[Apollo]

Für welchen Anwendungszweck genau werden die 2 Achsen benötigt?

Gruss

[2ndsky]

Das stimmt natürlcih auch, aber ich denke da ist noch genug platz nach oben, denn jedes widget ist ja grad mal 1-2kb und es wird nur einmal für die ganze VISU geladen...

Aber i.d.R. wenn ich von unterwegs rein gehe, will ich nur schnell etwas ganz spezifisches ablesen oder schalten und logge mich danach gleich wieder aus. Da bringt es mir also nichts wenn es einmal für die ganze Visu geladen wird.

Für welchen Anwendungszweck genau werden die 2 Achsen benötigt?

Anzeigen von Stellwert in Prozent + Soll- und Isttemperatur in einem Diagramm.

[Robert]

Hi!

Anbei ein "Beispiel für die Nutzung. Oder eben bei einer PV-Anlage würde ich demnächst Einspeiseleistung AC und für jeden String DC Leistung, Strom, Spannung darstellen wollen. Da sind natürlich unterschiedliche Skalierungen zwingend notwendig bzw. sinnvoll, wenn man nicht den Strom (0-8A) in mA angeben will nur um mit den Watt (0-6000W) halbwegs gleiche Größen zu bekommen. Von der Spannung (0-400V) ganz zu schweigen.

Das ist sinnvoll, um z.B. mal die Arbeit des MPP-Trackers nachzuvollziehen. Denn Strom und Spannung steigen da nicht gleichermaßen.

Anbei noch ein Screenshot: Ich krieg die zweite Achse nicht auf die rechte Seite. Momentan überlappt die Achse auf die linke Seite und wird zudem schwarz gezeichnet? "marginRight" in der night.js (und night.min.js - passiert das nicht automatisch) habe ich auf 50 gesetzt und entsprechend ist auch der Abstand rechts größer geworden. Aber der Platz wird nicht genutzt?

Grüße
Robert

[2ndsky]

Bei der zweiten Achse muss man "opposite" angeben, damit sie rechts gerendert wird.

[Robert]

Merci!

Ich habe noch ein paar Feinjustierungen vorgenommen:

• Anzahl der Achsen kann nun ungleich Anzahl der Datensätze sein
• graue Beschriftung der Achsen
• Vertauschung wirkt nur auf Zuordnung, nicht auf die Reihenfolge

Ergebnis wie angehängt.

// ----- 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)
            }
        }
        for (var i = 0; i < ymin.length; i++) {
            yaxes[i] = {
                min: ymin[i],
                max: ymax[i],
                title: {text: axis[i+1]},
                opposite: (i > 0)
            }
        }

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

[henfri]

Hallo,

genau, was ich brauche.
Das ist aber noch nicht im aktuelen pre-release/develop, oder?


Gruß,
Hendrik

[callidomus]

Hallo Hendrik,

EDIT: sorry falscher Thread.

Bis bald

Marcus

[Apollo]

...
Das ist aber noch nicht im aktuelen pre-release/develop, oder?
...

Nein. Mir bitte zusenden, dann mach ich es rein.

Gruss

[henfri]

widget: multi y plot

Was meinst du?
Steht doch oben?!

[Apollo]

Da fehlt zumindest das macro (ab besten mit docu).

Gruss

[Apollo]

Und?

Kann mir jemand die kompletten (widget/macro/docu) Dateien senden? Dann würd ichs noch reintun.

Gruss

[henfri]

Hallo,

im ersten Beitrag ist das Macro doch:

{% 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 %}

Gruß,
Hendrik

[Robert]

Widget

// ----- 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)
            }
        }
        for (var i = 0; i < ymin.length; i++) {
            yaxes[i] = {
                min: ymin[i],
                max: ymax[i],
                title: {text: axis[i+1]},
                opposite: (i > 0)
            }
        }

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

Macro

{% 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 %}

Doku: ?
- GAD ist Liste von Items
- Mode, tmin, tmax: bekannt
- ymin: Liste mit ymin pro Achse, also [-10 0] für linke Achse ab -10, rechte ab 0
-ymax: analog ymin
- step: bekannt
- label: wie zuvor, aber als Liste mit je einen EIntrag pro GAD
- color, exposure: analog label
- axes: wie zuvor, jedoch ein eintrag mehr für zweite Achse
- axesassign: Liste mit Zuweisungen der GADs zu den Axes, also [1, 2, 2] weiß das erste GAD der linken Achse zu, die beiden weiteren GADs der rechten Achse.

GRüße
Robert