Kreisdiagramm / Tortendiagram / Segementdiagramm

[Sisamiwe]

Hallo,
gibt es eine Möglichkeit, ein Kreisdiagramm bzw. Tortendiagramm darzustellen?
Ich möchte bzw. die Verwendung des Festplattenspeichers darstellen`.
Danke für die Rückmeldung.

[psilo]

nativ nicht.. musst halt selber ein passendes JS framework integrieren

[bmx]

Highcharts sind vorhanden in der SmartVISU, Du kannst Dir plot. ... als Basis nehmen und dann sowas hier integrieren

[Sisamiwe]

Hallo,
ich werde es mal auf Basis vonhttp://www.chartjs.org/ und https://www.sitepoint.com/introducti...-six-examples/ erarbeiten.
Dazu noch eine Frag: Wie ist die richtige Formatierung der von SHNG Items, um diese in Javascript zu verwenden? Íst es bspw "x.y.z" oder {{ x.y.z() }}

Danke

[smai]

Nur so aus Interesse: Was spricht denn gegen das virhandene Highcharts?

[Sisamiwe]

smai, da spricht wahrscheinlich nichts dagegen. Mir war nur nicht bewußt/bekannt, dass schon sowas implementiert ist.
Gibt es da eine Doku oder ein Beispiel?
Wo kann ich das nachlesen?
DANKE

[smai]

Siehe Beitrag #3 von bmx

[Sisamiwe]

OK, verstanden. Werde ich mal versuchen. Ich probiers erst mal ohne widget und werde es mal direkt einbauen und dann versuchen, es auszulagern.
Daher nochmal de Frage, wie am im Javascript auf Werte der Items zugreifen kann.

[smai]

Wie definierst du Widget? Ein direkter Zugriff auf Items ist nicht so einfach möglich.
Ein Twig Makro ist nicht notwendig, aber ohne Element mit data-item Attribut und Handler für das update Event kriegst du keine Daten.
Oder du liesst sie direkt vom I/O-Driver, das macht aber wenig Sinn, weil du so keine Datenänderungen mitkriegst.

[psilo]

Sisamiwe schau dir halt bspw an, wie ich das mit google maps gemacht habe: https://knx-user-forum.de/forum/supp...t-verkehrslage

[ramann]

Ich habe das Pie-Diagramm für mich mal für mit Highcharts implementiert. Der ganze Code ist für smartVISU 2.9 ausgelegt.

Code für das widget (z.B. als diagram.html speichern):

/**
*
* @param unique id for this widget
* @param series of item/s. More item/s in array form: [ item1 , item2 ]
* @param series of label/s. More label/s in array form: [ label1 , label2 ]
* @param color/s for each series e. g. '#f00' for red. More color/s in array form: ['#f00','#fff'] (optional, default: sutiable for design)
* @param text for headline
* @param set dataview mode: 'label' or 'legend' (optional, default: 'legend')
*/
{% macro pie(id, item, label, color, text, mode) %}

    <div id="{{ uid(page, id) }}" data-widget="plot.pie" data-item="{{ implode(item) }}"
        data-label="{{ implode(label) }}" data-color="{{ implode(color) }}" data-text="{{ text|default('') }}" data-mode="{{ mode|default('legend') }}"
        class="plot"></div>

{% endmacro %}

Javascript-Code (z.B. als diagram.js speichern):

$(document).on('pagecreate', function (bevent, bdata) {
    // ----- plot.pie ----------------------------------------------------------
    $(bevent.target).find('div[data-widget="plot.pie"]').on( {
        'update': function (event, response) {
            event.stopPropagation();

            var isLabel = false;
            var isLegend = false;            
            var labels = [];
            if ($(this).attr('data-label')) {
                labels = $(this).attr('data-label').explode();
                isLabel = true;
            }            
            if ($(this).attr('data-mode') == 'legend') {
                isLegend = true;
                isLabel = false;
            }
            var colors = [];
            if ($(this).attr('data-color')) {
                colors = $(this).attr('data-color').explode();
            }
            var val = 0;
            for (i = 0; i < response.length; i++) {
                val = val + response[i];
            }
            var data = [];
            for (i = 0; i < response.length; i++) {    
                data[i] = {
                    name: labels[i],
                    y: response[i] * 100 / val,
                    color: (colors[i] ? colors[i] : null)
                }

            }

            // design
            var headline = $(this).attr('data-text');
            var position = 'top';
            if ($(this).attr('data-text') == '') {
                position = 'bottom';
            }

            // draw the plot
            $(this).highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'    

                },
                legend: {
                    align: 'center',
                    verticalAlign:  position,
                    x: 0,
                    y: 20
                },
                title: {
                    text: headline
                },
                tooltip: {
                    formatter: function() {
                        return this.point.name + ' <b>' + this.y.transUnit('%') + '</b>';
                    },
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: isLabel,
                            formatter: function() {
                                return this.point.name + ' <b>' + this.y.transUnit('%') + '</b>';
                            },                            
                            style: {
                                color: null
                            }
                        },
                        showInLegend: isLegend
                    }
                },                        
                series: [{
                    name: headline,
                    colorByPoint: true,
                    data: data
                }],
            });    
        },
        'point': function (event, response) {
            event.stopPropagation();

            var val = 0;
            var data = [];
            var items = $(this).attr('data-item').explode();        
            for (i = 0; i < items.length; i++) {
                if (response[i]) {
                    val = val +  +response[i];
                }
                else
                {
                    val = val +  +widget.get(items[i]);
                }
            }
            for (i = 0; i < items.length; i++) {
                if (response[i]) {
                    data[i] = +response[i] * 100 / val;
                }
                else
                {
                    data[i] = +widget.get(items[i]) * 100 / val;
                }
            }

            var chart = $(this).highcharts();
            for (i = 0; i < data.length; i++) {
                chart.series[0].data[i].update(data[i]);                
            }
            chart.redraw();            
        }
    });
});

Aufruf wäre dann z.B. folgender (wenn als diagram.html abgespeichert):

{% import "diagram.html" as plot %}
{{ diagram.pie('PieTest', ['Test_Pie_1','Test_Pie_2','Test_Pie_3'], ['Test1','Test2','Test3'], ['#FF0000','#FFFFFF','#000000'], 'Pie') }}

Das Ergebnis ist ein Pie-Diagramm mit drei Segmenten in rot, weiß und schwarz.

Um den Festplattenspeicher damit sinnvoll darzustellen, muss man mindestens zwei Werte (belegter und freier Speicherplatz) übergeben.
Die Werte müssen nicht zwangsweise in Prozent angegeben werden, da das im Javascript-Code berechnet wird.

Und so schauts aus: pie.JPG

[Sisamiwe]

Hallo,
hat das schon jemand bei sich "nachgebaut"?
Ich habe es nach Beschreibung bei mir implementiert, doch leider erscheint kein Tortendiagramm.
Könnte das jemand mal testen?

[macflei]

so auf die "Schnelle" .....
Ich denke Du bist nicht auf v2.9
Habs mal in v2.8 getestet. Dazu aber die Zeile

$(bevent.target).find('div[data-widget="plot.pie"]').on( {

durch diese erstetzt

$(document).delegate('div[data-widget="plot.pie"]', {

"Eigene" widgets würde ich auch immer in eigene html "auszulagern".

Unbenannt.png

[ramann]

Ich habe den Code aus Post #11 so angepasst, dass es nun als eigenständiges Widget in smartVISU 2.9 nutzbar sein sollte.

[Sisamiwe]

Danke dafür.
Was muss man ändern, damit auch auch unter smartVISU2.8 läuft?