26
NOV
2014

Kennzahlen mittels TreeSelector auswählen

Kommentare : 2
  • Vorgeschichte

    Bei einem Kundentermin kam neulich das Thema KPI’s (Key Performance Indicator) auf.  Jedes Unternehmen hat bei diesem Thema eine andere Sichtweise und es gibt unterschiedliche Art und Weisen damit umzugehen. Manche Beratungshäuser empfehlen nur eine begrenzte Anzahl an Kennzahlen für Analyse und Reporting einzusetzen und manche Branchen führen hunderte von Kennzahlen durch alle Hierarchien eines Unternehmens. Letzteres war bei besagtem Kunden der Fall. Die Frage war wie geht man mit einer solchen Masse an Kennzahlen um?
  • Problem

    Aus Tool-Sicht ist diese Frage relativ einfach zu beantworten: „Tableau erkennt automatische ob eine Information (Spalte) eine Dimension oder eine Kennzahl ist. Will man die Kennzahl ändern zieht der Enduser lediglich eine andere Kennzahl in seine Visualisierung.“

    Was jedoch tun, wenn man eine Visualisierung auf der eigenen Website darstellen, dem normalen User nicht die Möglichkeit des “Webeditierens” geben und dennoch den übersichtlichen Zugriff auf 200 Kennzahlen gewährleisten möchte?! Oder einfacher: Wie kann ich mehr als 50 Kennzahlen sinnvoll auf einem Dashboard zur Auswahl bereitstellen? Geht nicht? Probieren wir es aus:

  • Lösung

    Das Einbetten von Tableau-Visualisierungen in eigene Websiten oder Applikationen ist extrem einfach und lässt sich individuell anpassen: http://www.tableausoftware.com/public/blog/2014/03/fix-your-iframe-2386

    Eine größere Herausforderung stellt da die übersichtliche Darstellung von extrem vielen Kennzahlen dar. Meine Erfahrung zeigt, dass sich Kennzahlen oftmals gruppieren lassen. Das legt die Möglichkeit einer Orderstruktur nahe. Wenn es möglich ist Thematisch ähnliche Kennzahlen zusammen zu fassen, kann man diese bestimmt auch weiter verschachteln. Es kam also die Idee auf Kennzahlen über einen TreeSelector auszuwählen. Also suchte ich nach einer Javascript Library für TreeSelector und wurde hier fündig: jstree

    TreeSelector

     

     

     

     

     

    1. Visualisierung Mittels Javascript aufrufen

    So begann ich mit Notepad++ meine eingerosteten HTML und Javascript Kenntnisse aufzufrischen indem ich  Code aus einem Tutorial in eine leere HTML Seite kopierte. Nach ein paar Anläufen gelang es mir auf Knopfdruck einzelne Visualisierungen ein und auszublenden. Auch Kennzahlen in Form von Parametern konnte ich nach einigen Minuten mittels der Funktion “changeParam” aus der Javascript Library von Tableau beliebig anpassen.

    2. TreeSelector Library einbinden

    Auf der oben genannten Website lässt sich die gesamte Library runterladen. Mit einem einfachen Verweis ist die Library innerhalb der eigenen HTML-Seite dann verwendbar: <script src=”script/jstree/dist/jstree.min.js”></script> Die Struktur in Form einer Ordner Hierarchie lässt sich anschließend mittels des Tags “<ul>” erstellen.

    3. TreeSelector mit Visualisierung verbinden

    Jedes Element innerhalb des TreeSelectors kann mit einer Javascript “onclick” Funktion versehen werden die ihrerseits wieder genau die gewünschte Kennzahl als Parameter an die Funktion “changeParam” weiter geben kann. Damit verändert man den Parameter der Visualisierung um genau die Kennzahl, die der User entsprechend mittels Mausklick ausgewählt hat.

     

     

    HTML, CSS und Javascript Dateien hier zum Download

 

Timo Tautenhahn
Über den Autor
Timo originally coded his own BI-application by making use of different JAVA libraries. He Worked for IBM as BI-specialist and BA-architect before he joined Tableau. Favorite subject: JavaScript API
  1. Pingback: tableaufans.com » Ihr Datenlein kommet, o kommet doch all!

  2. Avatar
    Tuoc Le Reply

    please let me download

Kommentare

*

captcha *