Tag: embed

  • Tableau Demo Site

    Tableau Demo Site

    Are you interested in setting up a Proof of Concept kind of environment where you can see embedded Tableau Dashboards in action?  If so, please follow the instructions below.

    The idea of this asset is to see how Tableau can look like in embedded scenarios, how you can extend Tableau’s capabilities with your own software and to test how Tableau Write Back Extensions can close the loop between analytics and transactional tasks. On top of that it contains a lot of great examples from Tableau Public. This helps you to spread the word around “what’s possible with Tableau” within your organization more easily or simply leverage it for yourself to get inspired! 😉

     

    How can I get it?

    Video Installation

    Video Installation

    System Requirements:

    • Windows operating system
    • Port 8888  needs to be open/free (Webserver)
    • Port 3306 needs to be open/free (MySQL)
    • Tableau Server 2018.3 or above

     

     

    Step-by-Step Installation

    Step-by-Step Installation

    1. Login to a Tableau Server test instance as Tableau Server Admin via your browser
      If it does not already on your Tableau Server, create a user “admin” with “Server Administrator” rights

    2. Create a new Site which looks exactly like this!
      Site name: Tableaufans (upper case “T”)
      Site ID: 
      tableaufans (lower case “t”) 



    1. Download “Tableau Demo Asset” and UNZIP it’s content which contains:
      • mySqlDriver.zip (driver for mySql database)
      • tableaufans_public_demo_asset_site_v2019.4.zip (Tableau Server Site with great vizualizations)
      • tableaufans_public_demo_asset_thumbnails.zip (thumbnails for Tableau Server projects)
      • xampp-tableaufans.zip  (Webserver + MySQL DB in a single application)
    2. Copy the zip file called “tableaufans_public_demo_asset_site_v2019.4.zip” into “C:\ProgramData\Tableau\Tableau Server\data\tabsvc\files\siteimports“
    3. Run the following commands via command line (Tableau Server must be running; official documentation):
      tsm login --username YOUR-USERNAME --password YOUR-PASSWORD
      tsm sites import --site-id tableaufans --file tableaufans_public_demo_asset_site_v2019.4.zip
    1. Follow the instructions in the command line window
      tsm sites import-verified --id tableaufans --import-job-dir import_XXXXXXXXXXXXXXX
      If this succeeded simply open Tableau Server to already see some awesome dashboards of the Tableau community!!! 

     

    In order to leverage the full demo asset including embedded Tableau Dashboard examples + Write-Back-Extensions follow the last 2 steps

    1. Go back to the downloaded ZIP file and extract the content of “xampp-tableaufans_v2019.1.3.zip” directly into your C: drive​
      (Hint: You should then see “C:\xampp” folder or “C:\xampp-tableaufans”)

      • It contains an Apache web server (needs port 8888)
      • It contains MySQL (needs port 3306 – username/pw = admin/admin)
      • Tableau’s GitHub ​Extensions Folder + 3 Tableaufans Extensions 

    • Start C:\xampp-tablfeaufans\xampp_start.exe as administrator

    1. Go back to the downloaded ZIP file –> extract the MySQL drivers and install them
    2. DONE!

     

    P.S. If you’d like to have the same nice little thumbnails per project as you can see within the installation video or the blog post image just go back to the downloaded ZIP file and extract + copy the content of “tableaufans_public_demo_asset_thumbnails.zip” into “<YOUR-PATH>Tableau Server\data\tabsvc\httpd\htdocs”.

     

    Troubleshooting

    Troubleshooting

    Before you’re looking into this section I encourage you to watch the installation video (if you’ve been following the step-by-step guide) as this demonstrates each and every installation step and how it worked on a blank AWS VM.

    Troubleshooting – Importing Site:

    1. Make sure you run the “tsm sites import-verified –id tableaufans –import-job-dir import_26124ec_2019XXXXXXX” command!
    2. If you’ve done this and it didn’t work:
      1. Delete the “tableaufans” site
      2. Restart your computer repeat to follow the instructions from top (it makes sure that noting interferes Tableau Server and your import process) 
      3. Make sure you’ve logged out all active users from Tableau Server and closed all browser windows prior to importing the site
      4. Make sure you’ve closed all Windows windows + all CSV files prior to the “tsm sites import-verified” command
    3. If this didn’t help you to import please check the latest import/export site documentation
    4. If nothing helps please post a comment below so that the community can help you out

     

    Troubleshooting – Starting Xampp:

    FYI

    P.S. Database User/Password are both “admin/admin” for all examples where workbooks leverage the MySQL database on Xampp you’ve been downloading above. You can have a look at the tables being used via http://localhost:8888/phpmyadmin/db_structure.php?server=1&db=tableaufans

     

  • Kennzahlen mittels TreeSelector auswählen

    Kennzahlen mittels TreeSelector auswählen

    [accordion]
    [acc_item title=”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?[/acc_item]
    [acc_item title=”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:

    [/acc_item]
    [acc_item title=”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

    [/acc_item]
    [/accordion]