Trying out Web Data Connector In Tableau

image

Having been looking forward to the Web Data Connector from the announcement at last years Tableau conference, I am currently enjoying trying out the Beta. With just some simple JavaScript you can wrap any web data into something directly accessible from the Data connections tab within Tableau.

Starting with something I am familiar with, I thought I would hook it up to the JSON API provided by Quandl and am then planning to try hooking onto Moves (https://www.moves-app.com/). Here are my initial thoughts from getting my first one up and running.

Hosting and framework wise, stuck with what I know best and started with an Asp.Net MVC site running on Azure (I love how quick and easy it is to get one of these up and running). Not really using many of the features on this first version but expect will build more into it as I go forward.

The current version of the site can be found at http://jdunkerleytableau.azurewebsites.net/. I am hosting the source code for the site is in my Visual Studio Online but have also put the code repository on to my github account (now if only I could get the two to stay in sync automatically…).

Vague Life Cycle of a Connector

imageWhen the user clicks on Web Data Source, this open a new browser window within Tableau. Once they navigate to your page Tableau will call the Init function within you Javascript code. During this phase your page acts as the interface for the user to set up the data they want, once you have finished set up you call tableau.initCallback(). When all the input data you need from the user is done, you call tableau.submitCallback() to tell Tableau you are all set.

Log from Interactive phase:

Page Called
[AUDIT]UserAgent - Mozilla/5.0 (Windows ....
[AUDIT]Ready - Tableau Mode
[AUDIT]Tableau - Init Called.
[AUDIT]Tableau - Restore Called: 
[AUDIT]Tableau - Submit Called: {"data":...

The browser will then close and then you page will be loaded again by the data service. This is a different browser and only the properties of the tableau object are passed between the two sessions. You can serialise your state into tableau.connectionData. Again the Init function will be called allowing you to de-serialise your state. Again once initialisation is complete you call tableau.initCallback().

Tableau will then call the getColumnHeaders function. You can then prepare the meta data (i.e. list of columns and types). Once all set call tableau.headersCallback with an array of names and another array of types.

Finally Tableau will then call the getTableData function repeatedly. On first go it will pass undefined to the function, but afterwards will pass an integer value from the last results allowing paged data to be passed back to Tableau. To return data to Tableau call tableau.dataCallback passing an array of dictionaries. Once all the data has been passed, return an empty array to end the cycle.

Tableau will then call the shutdown function to allow you to clean up as needed. Once all completed call the tableau.shutdownCallback and we’re done.

Log form Non Interactive phase:

Page Called
[AUDIT]UserAgent - Mozilla/5.0 (Windows ...
[AUDIT]Ready - Tableau Mode
[AUDIT]Tableau - Restore Called: {"data":...
[AUDIT]Tableau - Header Names: ["Date","O...
[AUDIT]Tableau - Header Types: ["date","f...
[AUDIT]Tableau - Init Called.
[AUDIT]Tableau - Shutdown Called.

Detecting Tableau

First question was how to detect whether we are running within Tableau or not on the server side. Looking at the user agent string:

Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/538.1 (KHTML, like Gecko) Tableau Safari/538.1

However when it calls back (after calling tableau.submit from inside JavaScript) the user agent becomes:

Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/538.1 (KHTML, like Gecko) tabprotosrv Safari/538.1

Tableau has included text in both of them, so simple to detect server side or in Javascript. Clearly as this is pre-release software the exact text is bound to change as they update the code.

Logging

There is no access to the normal Javascript console within Tableau. There is some mention of tableau.log function within the documentation but I couldn’t find where that wrote to.

Clearly during the interactive request phase you can log to control within the page but as there is no visible page during stage two this isn’t an option. So as a workaround I set up an action within MVC to log to the Visual Studio debugger window and sent all the log messages to it via and AJAX call.

Local Storage and Cookies

To make a request in Quanl you can supply an AuthKey. I planned to store this within the LocalStorage but found this wasn’t supported. As the interactive and non-interactive stages are two completely different browsers I guess this makes sense but it would be nice if they had a shared local storage.

Anything written to the tableau.connectionData is saved in plain text within the workbook so shouldn’t be used for passwords etc. There is an authCallback function but I haven’t had time to look at that yet.

First Impressions

All in all this is a really nice and easy set up to build connectors in. I started with Quandl just because it is the dataset I know best but will try linking to some of the other web APIs next. In conjunction with services like ImportIO it will provide a really powerful way to grab datasets straight into Tableau.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s