PRACTICING FOR WEB DATA CONNECTOR ON TABLEAU
What is Web Data Connector?
Web data connector(WDC) is one of the data sources in Tableau to fetch data from websites in the form of JSON, XML or any other form website produces data.
How does it work?
Setup for WDC:
- Server setup to host WDC (for example Tableau server, HTTP-server, Apache, etc.).
- WDC SDK installation.
Server setup: I am using HTTP-server (with npm) for local setup and git for the repository, Node.js server side application.
- Install git https://git-scm.com/downloads on your computer
- Install node and npm https://nodejs.org/en/download/ (if you install node than npm will come along this so no need to download or install npm separately).
Once done with git and npm installation please follow below steps:
- Create a separate directory in your system for this project.
- Open Git Bash command line tool (shortcut will be available at desktop once you install git.)
- Go to the directory which you recently created.
- Write below command in git bash to install WDC SDK repository in the project directory.
git clone https://github.com/tableau/webdataconnector.git
Set Environment variable in windows path for npm like below:
Steps to set the environment variable:
Right click on PC and click on properties.
Click on Advance system settings.
Click on Environment variable.
- Add a new path to your environment variable for you npm bin directory.
- Open your Git bash terminal and use below command to install dependencies using npm. npm install
This command will install all dependencies related to server and application.
- Start the web server using the command below: npm start
You are done with server setup.
- Now next step is to download already available web data connector to test. We can create our own WDC also.
- For this example, I have downloaded the online web data connector for https://data.police.uk website which extracts data for UK Street Crime.
- Download WDC from the linkhttps://github.com/alexfrancisross/CrimeWebDataConnector
- Extract WDC in your c:/project_directory/webdataconnector folder.
- Go to C:\project_directory\webdataconnector\CrimeWebDataConnector-master you will see the crimewebconnectfile.html file, which is your WDC main HTML file.
- Open any web browser and navigate to this URL: localhost:8888/CrimeWebDataConnector-master/crimewebconnectfile.html
- If it Opens successfully than setup is completed for UK Crime WDC.
- Next step is to test and get the data in Tableau using this connector.
- Open Tableau and connect to Web Data Connector option as below:
Type localhost:8888/CrimeWebDataConnector-master/crimewebconnectfile.html in URL BOX as shown below:
The page that opens will look like the image below:
Type any postal code related to UK Areas, I have extracted and provided some Postal codes list here, after inserting postal code click on get crime data.
- Once you click on get crime data, Sheet will be shown and you have to drag that Crime Data For <Postal code> sheet to data panel.
- Click on update now.
- By default, the data connection type will be extracted and not live connection.
- Data will be extracted from UK police website.
- We can refresh data using Refresh icon available in connection panel in Tableau.
- This Web connector fetches last six Year Crime data for any postal code.
- The code can be seen in HTML format in the same crimewebconnect.html.
Here is sample Viz Created for New Castle(UK) which has Area Code: NE48HH
About the author
Prateek Kale is a certified Tableau Vizard, Business Intelligence and Analytics professional with technical expertise in the entire life-cycle of BI-Analytics. Healthcare, Education, and Media are industries of his interest and expertise. Visit Prateek on LinkedIn