Practicing For Web Data Connector On Tableau

Blog | April 6, 2018 | By Prateek Kale

Mastering Web Data Connector: Practical Tips and Techniques for Tableau Users

Elevate Your Data Integration Skills with Web Data Connector: Expert Tips and Techniques

Insider Insights: Best Practices for Web Data Connector Usage in 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.
  • 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 Advanced 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.ukwebsite 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_directorywebdataconnectorCrimeWebDataConnector-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:

Understanding the Power of Web Data Connector in Tableau

Tips for Effective Usage of Web Data Connector in Tableau

Techniques for Seamlessly Integrating External Data Sources with Tableau

Exploring Advanced Features of Web Data Connector in Tableau

Introduction to Web Data Connector: Benefits and Use Cases in Tableau

Tips for Optimizing Web Data Connector Performance in Tableau Workflows

Techniques for Handling Various Data Formats with Web Data Connector in Tableau

Advanced Web Data Connector Configurations: Tips for Advanced Tableau Users

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.
  • 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