Notice

Sorry cURL failed to retreive the page, is the URL correct?.

Diagramm aus Sharepointliste

Mit Hilfe von Sharepointplus & highcharts.js

Photo by William Iven on Unsplash

1. Einführung

In diesem kurzen Guide führe ich euch durch den Source Code eines kleinen Einstieg Projektes zum Thema Diagramm Erstellung auf Basis von Sharepointisten. Die hier besprochene Lösung wurde mit dem Sharepointplus, jQuery und highcharts.js Frameworks realisiert.
Die hier gezeigte Lösung funktioniert (natürlich) nur in Kombination mit einem MS Sharepoint Server. Da mir kein solcher öffentlich zur Verfügung steht muss ich hier leider auf Screenshots zurückgreifen.
  • jQuery
    Das jQuery Framework erleichtert uns die Arbeit...
  • Sharepointplus
    Hiermit können wir die Sharepointliste "fast" wie eine Datenbank behandeln.
  • highcharts.js
    Das highcharts Framework für unser Diagram Canvas.
  • uikit
    uikit wurde für das Frontend Design verwendet

2. Die Liste (Sharepoint)

Unsere Sharepointliste beinhaltet alle relevanten Daten für das Diagramm. Die Spalten definieren die Themen, die Zeilen die Zeitachse (hier Monate). Die folgenden Spalten (Typen) wurden von mir verwendet.

2.1 Demoliste - der Aufbau

Titel

Titelspalte - Standard
beinhaltet in unserem Besipiel den Namen des jeweiligen Monats.

Erstes Thema

Spaltentyp = Zahl
Hier werden wir die Zahlenwerte für das jeweilige Thema im jeweiligen Monat hinterlegen.

Zweites Thema

Spaltentyp = Zahl
Hier werden wir die Zahlenwerte für das jeweilige Thema im jeweiligen Monat hinterlegen.

Drittes Thema

Spaltentyp = Zahl
Hier werden wir die Zahlenwerte für das jeweilige Thema im jeweiligen Monat hinterlegen.

...

Spaltentyp = Zahl
Weitere Spalten für jedes Thema gem. den Beispielen bei Bedarf...

Januar

25

56

45

79


Februar

26

45

65

65


...

...

...

...

...

Rechts seht Ihr einen Screenshot meiner Sharepointliste.
An dieser Stelle noch ein Wichtiger Hinweis:

Anpassung von Titel & Namen

Spaltennamen und Titel bleiben, auch nach einer Änderung im Hintergrund auf dem alten Wert. Wenn Ihr nun also die Spalte Projekt A erstellt und dann merkt das es eigentlich Projekt AB heissen sollte könnt Ihr diese Natürlich umbenennen, im Hintergrund bleibt jedoch der Spaltenname Projekt A aktiv und wir müssen mit diesem arbeiten.

Standard Titel Spalte

Standard Titel Spalte

Inhaltsspalten

Inhaltsspalten Typ: Zahl
  • Standard Titel Spalte

    Standard Titel Spalte
  • Inhaltsspalten

    Inhaltsspalten Typ: Zahl
An dieser stelle noch der folgende Hinweis. Ich habe neben der Standardansicht noch die View "dataview" erstellt. Diese beinhaltet alle Spalten ausser der Titel Spalte. Die Titel werden wir nachher per Array im JS nachreichen.

3. Get into the Code

3.1 getColumntitles

Nun da wir die Liste erstellt und befüllt haben starten wir auch schon durch. Wie schon erwähnt gehen wir nicht zu sehr ins Detail, den kompletten Quelltext könnt Ihr euch hier herunterladen: Link zum HTML Dokument. An dieser Stelle nochmals der Hinweis, das Dokument so ist nicht lauffähig - Die Scripts und Ressopurcen verweisen auf Lokale Quellen eines internen Sharepoint Pfads. Mit Hilfe des Dokumentierten Codes könnt Ihr aber Eure Lösung vielleicht besser umsetzen.
Im ersten Schritt holen wir uns zunächst mit der Funktion "getColumntitles" mit Hilfe von jQuery Deferred die Spaltentitel der Liste "Demoliste" aus der View "dataview".
            function getColumntitles(){
                $.when(
                  (function() {
                    var deferred = jQuery.Deferred();
                    $SP().list("Demoliste").view('dataview',function(data) {
                    var array = [];
                    for(var i=0; i<data.fields.length;i++)array.push(data.fields[i]);
                        //console.log(array);
                    
                        deferred.resolve(array);
                    })
                    return deferred;
                  }())
                ).done(function(spaltentitel) {
                    var columns = [];
                    // Wir schreiben die Spaltentitel Displaykonform in ein neues Array und entfernen Sharepoint Sonderzeichen in der Bezeichnung
                    // Das originale Array bentigen wir jedoch noch fr die sptere Abfrage
                    for(var i = 0; i<spaltentitel.length; i++){
                        var temptitle = "";
                        temptitle = spaltentitel[i].replace(/_x0020_/g," ").replace(/_/g," ");
                        columns.push(temptitle);
                    }
                    getElements(spaltentitel, columns);
                }).fail(function(err) {
                  alert("[ERROR] "+err)
                })
            }

In der Funktion "spaltentitel" innerhalb der .done Kapselung schreiben wir die erhaltenen Spaltentitel noch in eine "FrontEndtaugliche" Version um. Vom Sharepoint erhalten wir nämlich einfach die Spaltenbezeichner als String, hier sind Leerschläge als _x0020_ hinterlegt. Bei meinen Spalten habe ich der einfachheit halber keine Leerschläge für die Spaltentitel sondern Underscores verwendet, auch diese ersetzen wir nun mit Leerschlägen. Anschliessend pushen wir die Spaltentitel (Variable temptitle) in das array columns. Das Array columns sieht dann wie folgt aus:

columns = ["Erstes Thema", "Thema Nummer 2", "Thema Nummer drei", "Viertes Thema"]

Anschliessend rufen wir die Funktion "getElements" auf und liefern die spaltentitel (unverändertes Array) sowie unser columns Array (Frontend Spaltentitel) mit.

3.2 getElements

3.2.1 Ich dreh noch ne Runde...

Auch in der getElements Funktion arbeiten wir wieder mit dem jQuery Deferred Objekt.
Als erstes wird das Array "elementarraytable" erstellt. Darin speichern wir anschliessend den Datensatz dieser Sharepoint Tabelle / Liste. Mittels einer for Schleife gehen wir die Anzahl der spaltentitel durch und erstellen ein neues Objekt im Array. Dieses Objekt beinhaltet den Spaltennamen (Frontend) sowie ein weiteres Array "data" wozu wir gleich kommen werden.

Jetzt wirds etwas komplizierter...

                            for (var i=0; i<data.length; i++){
                                
                                for(var n=0; n<spaltentitel.length; n++){
                                    elementarraytable[n]['data'].push(parseInt(data[i].getAttribute(spaltentitel[n])));    
                                }
                            }

Die äussere for Schleife wandert die ZEILEN der Liste / Tabelle ab.
Die Innere for Schleife jeweils die SPALTEN der Liste / Tabelle.

Jeder Wert wird dann jeweils ins Array "elementarraytable" in das entpsrechende Objekt ins ['data'] Array gepusht.
Das Ergebnis sieht dann wie folgt aus:

elementarraytable[1] = {name:"Thema Nummer 2", data:[56, 45, 78, 98, 32, 54, ...]}

3.2.2 Die komplette Funktion

            function getElements(spaltentitel, columns){
                $.when(
                    (function() {
                        var deferred = jQuery.Deferred();
                        var elementarraytable = [];
                        $SP().list("Demoliste").get(function(data,error) {
                            if (error) { alert(error) }
                            for(var n=0; n<spaltentitel.length; n++){
                                elementarraytable.push({name:columns[n],data:[]});                    // fr jede Themenspalte ein Object im Array erstellen und den Titel leserlich einsetzen
                            }
                            for (var i=0; i<data.length; i++){
                                
                                for(var n=0; n<spaltentitel.length; n++){
                                    elementarraytable[n]['data'].push(parseInt(data[i].getAttribute(spaltentitel[n])));    
                                }
                            }
                        if (error) {
                            deferred.reject(error);
                        } else {
                            deferred.resolve(elementarraytable);
                        }
                    })
                    return deferred;
                  }())
                ).done(function(tablearray) {
                    
                    buildChart(tablearray, columns);
                    
                }).fail(function(err) {
                  alert("[ERROR] "+err)
                })
            }

4. Let's build something nice

4.1 Die buildChart Funktion

Unsere Build-Funktion ist eine einfache Angelegenheit - basierend auf den Informationen / Anleitungen von highcharts kreiieren wir nun das Diagramm. Hierzu rufen wir die Funktion highcharts auf und übergeben unsere Parameter.

Der Chart Type column erstellt uns ein Balken Diagramm. Auf der x-Axis setzen wir ein Array mit Monatsnamen ein. Abschliessend Setzen wir bei den Series unser tablearray

Der Rest ist Beigemüse, Details findet Ihr auf der Offiziellen Webseite von highcharts.

 

            function buildChart(array, columns){
                $(function () {
                    // Das Diagramm wird erstellt
                    $('#demodiagramm').highcharts({
                       chart: {
                            type: 'column'
                        },
                        title: {
                            text: 'Stunden pro Thema'
                        },
                        xAxis: {
                            categories: ['Januar', 'Februar', 'Mrz', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober','November','Dezember']
                        },
                        yAxis: {
                            allowDecimals: false,
                                title: {
                                text: 'Stunden'
                                }
                        },
                        plotOptions: {
                            column: {
                               //stacking: 'normal',
                            }
                        },
                        tooltip: {
                            useHTML: true,
                            pointFormat: '{series.name}: <b>{point.y}</b>',
                            valueSuffix: ' Stunden',
                            shared: false
                        },
                        series: array
                    });
                });

5. Das Diagramm

Und das war es eigentlich auch schon. Dank der Verwendung von Sharepoint Plus konnten wir die Daten relativ intuitiv via jQuery Deferred Objekt aus der Liste laden und für unser Diagramm vorbereiten. Wie Ihr vielleicht im Quellcode entnehmen könnt habe ich zusätzlich das JS / CSS Framework uikit verwendet um mir die arbeit etwas zu erleichtern.

Namen von Spalten und Listen

Denkt daran, wenn Ihr Listen oder Spalten umbenennt werden diese auf Programmier-Ebene ihre originalen Namen behalten!

jQuery & Deferred Objekt

Nutzt in Kombination mit Sharepointplus unbedingt die Deferred Lösung. Der Sharepointserver und der Script arbeiten Asynchron - wenn Deferred nicht verwendet wird kann dies zu ganz komischen Ergebbnissen führen.
Sharepoint Liste
Sharepointliste Diagramm

Kontakt

Marco Rensch
Glashüttenweg 30
8887 Mels
This email address is being protected from spambots. You need JavaScript enabled to view it.

Technik

Webseite basierend auf Joomla!
Template erstellt mit uikit
Symbolbilder von unsplash.com