Setting Up a Tableau Web Data Connector
Starting from version 9.1, Tableau has a powerful tool in it’s arsenal called the Web Data Connector (WDC). It allows one to connect to data accessible over HTTP, provided the site publishes this data in HTML, XML or JSON. A WDC comprises of a HTML page and JQuery that interacts with the site hosting the data and passes this over to Tableau. This article provides an introduction to setting up the first WDC which connects to a sample JSON dataset comprising of a taxi company’s monthly metrics including average daily trips, fares collected, active vehicles and drivers, and credit card usage. A WDC is especially useful when it comes to visualizing real time data.
Prerequisites
· Tableau version 9.1 or higher
· WDC SDK
· GitHub account
· Link to a sample JSON dataset
GitHub Pages
For WDC to work, it needs to be hosted and GitHub Pages could be used.
· Create a new repository on GitHub named username.github.io where username is your username or organization name on GitHub. This step is crucial for the WDC to work!
· Clone the repository to the local machine.
· In the project folder, add an index.html file, commit and push the changes
· On navigating to https://username.github.io, the hosted web page should be displayed.
The HTML Page
Now that the GitHub pages is setup and ready to host the WDC, create the first part of the connector — the HTML file. This is the page that gets displayed when the WDC is opened and this links to the JQuery. It can be customized to provide an intuitive user interface for the users but for this tutorial, the focus is on simple HTML markups and other important elements. Create a file wdc.html, add the following code, and save it in the GitHub repository that was created earlier. Ensure that when connecting to different data sources, the necessary changes are implemented in all the codes.
<html><head><title>Sample WDC</title><meta http-equiv="Cache-Control" content="no-store" /><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script><script src="https://connectors.tableau.com/libs/tableauwdc-2.2.latest.js" type="text/javascript"></script><script src="wdc.js" type="text/javascript"></script></head><body><div class="container container-table"><div class="row vertical-center-row"><div class="text-center col-md-4 col-md-offset-4"><button type="button" id="submitButton" class="btn btn-success" style="margin: 10px;">Get Data!</button></div></div></div></body></html>
Between the head tags, are the following:
· A meta tag that prevents the browser from caching the page
· Bootstrap files for some simple styles and formats
· jquery.min.js as a helper library for the WDC
· tableauwdc-2.2.latest.js file is the main library for the WDC API
· wdc.js file is the JS file which would be discussed next
· Between the body tags is present a button element allowing the users to interact with the WDC
Connector Object
Following the creation of a user interface, create the connector using JQuery. In the same repository, create a wdc.js file and insert the following code.
(function () {var myConnector = tableau.makeConnector();myConnector.getSchema = function (schemaCallback) {var cols = [{ id : "date", alias:"Date", dataType : tableau.dataTypeEnum.string },{ id : "trips", alias: "Trips Per Day",dataType : tableau.dataTypeEnum.string },{ id : "farebox",alias: "Farebox Per Day", dataType : tableau.dataTypeEnum.string },{ id : "uniquemed",alias: "Unique Medallions", dataType : tableau.dataTypeEnum.string },{ id : "uniquedrivers", alias: "Unique Drivers", dataType : tableau.dataTypeEnum.string},{ id : "medperday", alias: "Medallions Per Day", dataType : tableau.dataTypeEnum.string },{ id : "avg1", alias: "Average Days Medallions On Road", dataType : tableau.dataTypeEnum.string },{ id : "avg2", alias: "Avg Hours Per Day Per Medallion", dataType : tableau.dataTypeEnum.string},{ id : "avg3", alias:"Avg Days Drivers on Road", dataType : tableau.dataTypeEnum.string},{ id : "avg4", alias:"Avg Hours Per Day Per Driver", dataType : tableau.dataTypeEnum.string},{ id : "avg5", alias: "Avg Minutes Per Trip", dataType : tableau.dataTypeEnum.string},{ id : "cc", alias: "Percent of Trips Paid with Credit Card", dataType : tableau.dataTypeEnum.string}];var tableInfo = {id : "taxi",alias : "TLC Trip Data",columns : cols};schemaCallback([tableInfo]);};myConnector.getData = function(table, doneCallback) {$.getJSON("http://www.nyc.gov/html/tlc/downloads/csv/data_reports_mont hly_indicators_yellow.json ", function(resp) {var feat = resp;tableData = [];// Iterate over the JSON objectfor (var i = 0, len = feat.length; i < len; i++) {tableData.push({"date": feat[i]["Month"]["Year"],"trips": feat[i]["Trips Per Day"],"farebox": feat[i] ["Farebox Per Day"],"uniquemed": feat[i] ["Unique Medallions"],"uniquedrivers": feat[i] ["Unique Drivers"],"medperday": feat[i] ["Medallions Per Day"],"avg1": feat[i] ["Avg Days Medallions on Road"],"avg2": feat[i] ["Avg Hours Per Day Per Medallion"] ,"avg3": feat[i] ["Avg Days Drivers on Road"],"avg4": feat[i] ["Avg Hours Per Day Per Driver"],"avg5": feat[i] ["Avg Minutes Per Trip"],"cc": feat[i] ["Percent of Trips Paid with Credit Card"]});}table.appendRows(tableData);doneCallback();});};tableau.registerConnector(myConnector);$(document).ready(function () {$("#submitButton").click(function () {tableau.connectionName = "taxi";tableau.submit();});});})();
The following aspects need to be understood about the code:
· The tableau object is defined in the WDC library
· makeConnector function is a constructor which has some predefined methods for the connector
· Before the data is passed to Tableau, it needs to be mapped to one or more tables and getSchema function does just that. This function takes a scehmaCallback parameter defined in the WDC API.
o The cols variable containing an array of JS objects defines the columns in our table
o tableInfo variable defines schema for the table and contains a JS object
o schemaCallBack takes an array of table objects when it is called and in this case, tableInfo is the only object defined.
· The getData function takes table and doneCallBack as parameters, the table parameter being an object defined by WDC, it can be used to append the data and the doneCallBack signals that the data has been received
o $.getJSON function gets our sample data from the source and stores this in a response parameter
o The for loop iterates over the JSON object and stores the data in the tableData array and table.appendRows appends the tableData to the table as a JS object
At this juncture, the custom Web Data Connector should be ready for Tableau visualization.
1. Open Tableau
2. Connect To a Server > More > Web Data Connector
3. In the next screen enter the URL of the WDC > username.github.io/wdc.html
4. Click on Get Data
5. This brings up the table which can now be used for visualizations
References & Further Reading
No comments:
Post a Comment