USEReady’s mission is to help organizations succeed by fast tracking their business performance. We relentlessly strive towards value-driven innovation and digital transformation using advanced business intelligence, data management, and infrastructure security solutions.  

 

To know more visit USEReady's Website

PRACTICING FOR WEB DATA CONNECTOR ON TABLEAU

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?

WDC is a combination of HTML and JavaScript. Web data connector sends a request to specified websites which will contain data and get data in response, which are then passed to tableau for further Analysis.

Setup for WDC:

  1. Server setup to host WDC (for example Tableau server, HTTP-server, Apache, etc.).
  2. WDC SDK installation.
  3. WDC file created using HTML and JavaScript.

Server setup: I am using HTTP-server (with npm) for local setup and git for the repository, Node.js server side application.

  1. Install git https://git-scm.com/downloads on your computer
  2. 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.

Visit directory

 

  • Write below command in git bash to install WDC SDK repository in the project directory.

git clone https://github.com/tableau/webdataconnector.git

Install WDC SDK repository

Set Environment variable in windows path for npm like below:

Steps to set the environment variable:

  • Right click on PC and click on properties.

Properties
  • Click on Advance system settings. 

Advance system settings
  • Click on Environment variable. 

Environment variable
  • Add a new path to your environment variable for you npm bin directory.
New path in the bin directory
  • Open your Git bash terminal and use below command to install dependencies using npm.  npm install
Install command

This command will install all dependencies related to server and application.

  • Start the web server using the command below: npm start
Command to start web server

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:
Connect to Web Data Connector

Type localhost:8888/CrimeWebDataConnector-master/crimewebconnectfile.html in URL BOX as shown below:

WDC URL

The page that opens will look like the image below:

UK Street level crimes

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.

  1. NE48HH
  2. TN239WB
  3. SW185DT
  4. SY81TT
  5. CA57HP
  6. DH78AJ
  7. BS369AW
  8. B618TD
  9. TN389LW
  10. MK443UJ
  • 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.
Data Extract
  • 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

Crime in New Castle UK

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

A PRACTITIONER’S GUIDE TO ALTERYX - Edition 3 for V11 out now

A PRACTITIONER’S GUIDE TO ALTERYX - Edition 3 for V11 out now