Visualize it!

Ein Bild sagt mehr als tausend Worte: Der Satz ist im Zeitalter von digitalen Daten und Big Data wichtiger den je. Jeder von uns hat die Erfahrung in dem einen oder anderen Präsentationstermin bereits gemacht - eine endlose Aneinanderreihung von Stichpunktlisten und/oder Tabellen ohne eine knackige, visuell leicht verständliche Darstellung der eigentlichen Kernaussage. Welche Möglichkeiten bietet uns SharePoint 2013 (On Premise bzw. Online) an dieser Stelle? Mit der Version SharePoint 2010 wurde das sogenannte Chart Web Part zu diesem Zweck eingeführt - welches aber in der aktuellen Version bzw. in SharePoint Online leider nicht mehr zur Verfügung steht. Stattdessen empfiehlt Microsoft hier den Einsatz der Excel Services. Alternativ könnte man auch versuchen die Visio Services zu verwenden, die sich aber für die Diagrammdarstellung eher weniger eignen. Glücklicherweise gibt es aber im Netz eine Vielzahl an JavaScript basierten Bibliotheken, die die Diagrammerstellung clientseitig ermöglichen, wobei das ganze Spektrum von rudimentär und kostenlos (u.a. jqPlot), kostenpflichtig mit Assistentenunterstützung (z.B. Kendo UI) bis hin zu mächtig und trotzdem kostenfrei (z.B. D3) abgedeckt wird. Diese erlauben es, unter Verwendung von Konfigurationsparameter und Datenarrays eine Vielzahl unterschiedlichster Diagrammtypen zu erstellen. In diesem ersten Beitrag widmen wir uns einer beispielhaften Umsetzung auf Basis von Chart.js. Dabei wollen wir ein Polar-Area Diagramm erstellen, welches die erwarteten Umsätze einer Region bezogen auf das Marktvolumen für ein Quartal darstellt. Als Datenquelle dient uns eine SharePoint Liste in unserer SharePoint Online Website. Die Liste namens "Umsatzerwartungen" enthält Daten der zu erwarteten Umsätzen (Spalte "ErwarteterUmsatz") pro Region (Spalte "Title") pro Quartal (Spalte "Quartal") und Jahr (Spalte "Jahr"). Das Polardiagramm soll nun die aufsummierten Werte pro Region für ein Jahr anzeigen.  Abbildung 1: Beispieldaten  Für die Darstellung benötigen wir zuerst ein paar wenige Stylesheet Klassen. Anschliessend erfolgt der Skriptverweis auf jQuery (es wird die aktuelle Version 2.1.4 verwendet) und Charts.js.Nun erfolgt der eigentliche Erstellungsprozess. Anfangs definieren wir einige globale Objekte: var jsonItems = {};var dataArray = [];var options = {    segmentStrokeColor: "#0000FF",};var chartColorConfig = {    "EMEA" : {        color:"#F7464A",        highlight: "#FF5A5E"    },    "NA" : {        color: "#46BFBD",        highlight: "#5AD3D1"    },    "APAC" : {        color: "#FDB45C",        highlight: "#FFC870"    }};Das Laden und Erzeugen des Diagramms erfolgt in einer Funktion, welche (nach Best Practices) über die Standardfunktionalität _spBodyOnLoadFunctionNames beim Seitenaufruf ausgeführt wird. Die Daten werden der Einfachheit halber über die REST Schnittstelle geladen - es ist aber auch möglich das Client Object Model zu verwenden. Nach dem erfolgreichen Laden müssen die Daten dann noch verarbeitet werden, um ein für das Diagramm passendes Array der Datenwerte zu erhalten. Zudem implementiert die REST Schnittstelle von SharePoint leider keine Aggregationsfunktionen, weshalb die Aufsummierung auch "per Hand" erfolgen muss. Beim Anlegen der Datenobjekte werden schließlich auch die Anzeigeoptionen (Farbe, Hervorstellungsfarbe) aus dem globalen Objekt zugewiesen. function CreateBlogPolarChart() {    jQuery.ajax({        url: "/_api/web/lists/GetByTitle('Umsatzerwartungen')/items",        type: "GET",        headers: {            "accept": "application/json;odata=verbose",        },        success: function(data){            jQuery.each(data.d.results, function(index, item){                if (null == jsonItems[item.Title]) {                    var newJSONObject = {};                    newJSONObject["value"] = item.ErwarteterUmsatz;                    newJSONObject["color"] = chartColorConfig[item.Title].color;                    newJSONObject["highlight"] = chartColorConfig[item.Title].highlight;                    newJSONObject["label"] = item.Title;                    jsonItems[item.Title] = newJSONObject;                }                else {                    jsonItems[item.Title].value += item.ErwarteterUmsatz;                }            });            $.each(jsonItems, function (key, elem) {                dataArray.push(jsonItems[key]);            });            var ctx = jQuery("#blogPolarChart").get(0).getContext("2d");            var myPolarChart = new Chart(ctx).PolarArea(dataArray, options);                jQuery("#chartcontainer").append(myPolarChart.generateLegend());        },        error: function(error){            alert(JSON.stringify(error));        }    });}_spBodyOnLoadFunctionNames.push("CreateBlogPolarChart");Nun fehlen nur noch die HTML Elemente auf denen das Diagramm dann eingebunden wird. <div id="chartcontainer" class="labeled-chart-container">    <div class="canvas-holder">        <canvas id="blogPolarChart" width="400" height="400"></canvas>    </div></div> Alle diese Komponenten können nun in einer Textdatei gespeichert werden, welche dann von einem Content Editor Web Part als Quelle referenziert wird. Für das Deployment laden wir die JavaScript Datei von Chart.js und jQuery sowie die JavaScript / HTML Textdatei des Diagramms in die Site Assets Dokumentenablage hoch. Hinweis:Falls Sie kein Content Editor Web Part finden / hinzufügen können - die Ursache ist ein Sicherheitsupdate in SharePoint Online anfangs des Jahres. Dadurch wurden per Standardeinstellung alle Skripting-fähigen Web Parts deaktiviert. Um diese wieder zu erhalten müssen Sie dies erst in SharePoint Online im Admin Center konfigurieren - dieser Beitrag zeigt wie es geht. Das Ergebnis könnte wie folgt aussehen: Sie werden sich nun fragen: schön und gut, aber ist das Alles? Die Antwort darauf lautet: Jein. Je nach verwendeter Bibliothek ist die Erstellung / Konfiguration eines Charts relativ wenig aufwändig - der Knackpunkt ist zumeist die Datenquelle. Ein interessanter Aspekt an dieser Stelle sind die Möglichkeiten, sich die Daten nicht nur aus einer SharePoint Liste zusammenzustellen, sondern sich die Inhalte von anderen Orten wie Webdiensten, RSS-Feeds bis hin zu per Browser zugreifbaren Dateien zu laden. Ein gangbarer Weg wäre zum Beispiel, sich die aktuellen Infrastrukturkennzahlen wie Leistungsindikatoren oder Verfügbarkeiten etc. über ein Powershell Skript erfassen zu lassen, diese dann im JSON Format als Datei zu erzeugen und diese dann in einer SharePoint Dokumentbibliothek abzulegen und sie dann als Datenquelle für das Chart zu verwenden - mit 5 minütiger Aktualisierung der Datei per Upload durch den Task Scheduler. Diese und weitere Anwendungsfälle, die immer größere Anzahl an stabilen, browserunabhängigen und flexiblen Charting Komponenten sowie die Unabhängigkeit von serverseitigem Programmcode schaffen viele Möglichkeiten - deshalb werden wir uns in einem der nächsten Beiträge noch weiteren JavaScript-Bibliotheken zur Diagrammerstellung widmen werden.

SharePoint auf Touren bringen

Ja, Microsoft SharePoint ist ein schnelles System, auch wenn sich manche Aktionen anfühlen, als ob sie viel zu lange dauern.

Als Entwickler kann man bei der Erstellung von Applikationen für SharePoint einiges falsch machen. Vielleicht ist das System während der Entwicklungszeit noch schnell und „kein Thema“, aber mit produktiven Daten wird alles plötzlich unglaublich langsam, denn wer hat schon mit 10.000 oder 1 Million Datensätzen getestet? [Mehr]