JavaScript-Charts in Yellowfin

Seit Version 7.3 ermöglicht Yellowfin individuelle Charts mit Javascript zu erstellen. Bei Peaks & Pies setzen wir Yellowfin im Bereich Business Intelligence als Frontend-Tool zur Visualisierung von Daten ein, die unsere Kunden sammeln und in einem Data Warehousespeichern.

Javascript-Charts ermöglichen euch schönere, individuelle und zusätzliche Visualisierungen eurer Daten. In unserem Beispiel haben wir eine zusätzliche Art der Visualisierung mittels Sankey-Diagramm geschaffen. Sankey-Diagramme eignen sich sehr gut dazu Anteile einzelner Dimensionen schnell und kompakt darzustellen — erst recht dann, wenn die Anzahl der Dimensionen und Variationen innerhalb der Dimensionen hoch ist. Wir haben folgendes Sankey als Grundlage benutzt:

http://bl.ocks.org/d3noob/5028304

Schritt 1

Stellt zunächst sicher, dass ihr Javascript Charts in eurer Yellowfin Instanz aktiviert habt.

http://wiki.yellowfin.com.au/display/USER73Plus/Enabling+JavaScript+Charts

Ladet euch dann die benötigten Daten aus unserem Git.

git clone https://github.com/peaksandpies/yellowfin-jscharts.git

Kopiert den Inhalt aus dem lib Ordner direkt in euer Yellowfin Verzeichnis, unter /appserver/webapps/ROOT und achtet dabei darauf, dass ihr die Ordner nicht ersetzt, sondern zusammenfügt.

Schritt 2

Erstellt einen neuen Report. Hier geht ihr als erstes in die Datenansicht und bereitet eure Daten vor, die ihr später zeigen wollt. Wichtig: Ordnet zuerst alle Dimensionen als Spalten an und fügt die Metrik als letzte Spalte hinzu. Merkt euch die Bezeichnungen der Dimensionen und der Metrik, sie werden im nächsten Schritt wichtig. Wir haben mit den Beispieldaten von Yellowfin gearbeitet.

Hinweis: Wenn ihr Metriken und Dimensionen einfügt, werden oft automatisch Aggregationen, wie Summe oder Average auf die Metriken und Dimensionen angewendet. Dann heißen diese zwar in der Data-Ansicht “Sum Athletes”, ihr müsst sie aber sicherheitshalber einen eindeutigen Namen vergeben, um sie in der Chart-Ansicht korrekt ansprechen zu können.

In unserem Beispiel haben wir als Dimensionen Athlete Region, Gender und Age Group at Camp gewählt, als Metrik haben wir ROI ausgewählt. Aus diesen Dimensionen und Metriken können wir in Schritt 3 auswählen, um die Daten in dem Sankey Diagramm darzustellen.

Schritt 3

Geht in die Chartsansicht und wählt als Chart Javascript Chart aus und klickt auf den Reiter Javascript. Nun kopiert ihr den Inhalt aus example/sankey.js in den Editor. Hier müsst ihr nun lediglich eure gewünschten Dimensionen- und Metrikenbezeichnungen eintragen, die ihr in Schritt 2 gewählt habt. In unserem Beispiel haben wir als Dimensionen: Athlete Region, Gender und Age Group at Camp und als Metrik athletes.

Dimensionen können beliebig viele gewählt werden, jedoch immer nur eine Metrik. Hinweis: Leerzeichen aus der Data-Ansicht werden mit einem _ ersetzt und alle Buchstaben klein geschrieben.

Ersetzt hierzu einfach folgende Zeilen:

data.dimensions = [“athlete_region”, “gender”, “age_group_at_camp”]; 
data.metric = “athletes”; 

Fertig

Klickt auf Preview, um euch das Ergebnis anzusehen. In unserem Beispiel lässt sich schnell erkennen, dass überwiegend männliche Athleten, aus Europa, im Alter zwischen 35-39 im Camp vertreten sind. Wenn ihr zufrieden seid mit dem Ergebnis, dann klickt einfach wie gewohnt auf Save.

Wenn ihr die Farben ändern wollt, müsst ihr folgende Zeile in lib/js/chartingLibraries/custom/customCharts.js anpassen:

color = d3.scale.ordinal().range([“#9CDBFB”, “#47CCFA”, “#329DE5”, “#C3C3DA”, “#8488B2”, “#072269”, “#3C53B9 ”, “#333333”, “#AAAAAA”, “#E5E5E5”]);