Web Data Connector in Tableau Server

  • (4.0)

Web Data Connector to connect to data that is accessible over HTTP and that doesn't already have a connector. A web data connector is an HTML file that includes JavaScript code. We can create our own web data connector or can use a connector that is already exist and written by someone else. The web data connector must be hosted on a web server running locally on your computer, on a third-party web server, or on Tableau Server.

Checkout Tableau Interview Questions

We should use a trustworthy web data connector.

There are sample web data connector available and written by tableau.

  1. Facebook Sample Connector

  2. Googlesheets Sample Connector

  3. Incremental Update Sample Connector

  4. JSON Sample Connector

  5. Socrata Sample Connector

  6. XML Sample Connector

A web data connector uses REST API and converts the data to JSON and passes it to tableau.

Example: Setting up the environment

We need git and npm (node js package manager and node js installed)

Get the WDC SDK (web data connector software development kit)

Open a terminal in the directory where you want to download the WDC SDK. Then run the following command to clone the WDC git repository:

git clone

Change to the directory where you downloaded the repository:

cd webdataconnector

    Install dependencies with npm:

npm install --production

Start the test web server:

npm start

Open a browser and navigate to the following URL:


After that we can see the simulator screen on our web browser.

Web Data Connector

Checkout Tableau Server Tutorial

Trying the sample

  • In the WDC URL field, confirm that the URL is set to the sample USGS Earthquake Data connector:


  • Click the Start Interactive Phase button to display the user interface for the earthquake WDC.

  • Click the Get Earthquake Data button.

  • Click the Fetch Table Data button to download the data and display it in a table.

Related Page: How To Build Your First Advanced Dashboard In Tableau?

Create HTML page

  • First create a new file named earthquakeWDC.html and save it in the top-level directory of the webdataconnector repository.

  • Create a javascript file for connector. Name it earthquakeWDC.js and save it in top level directory

  • Create an event listener for the UI button in html page.

  • WDC will get data in JSON format and pass it to tableau. So let’s create schema for that.

  • Now we are all set. Save all and start the server by typing npm start in cmd

  • Open browser and go to  https://localhost:8888/Simulator/earthquakeWDC.html





USGS Earthquake Feed















               Get Earthquake Data!










(function () {

 var myConnector = tableau.makeConnector();

   myConnector.getSchema = function (schemaCallback)


       myConnector.getSchema = function (schemaCallback) {

   var cols = [

       { id : "mag", alias : "magnitude", dataType : tableau.dataTypeEnum.float },

       { id : "title", alias : "title", dataType : tableau.dataTypeEnum.string },

       { id : "url", alias : "url", dataType : tableau.dataTypeEnum.string },

       { id : "lat", alias : "latitude", columnRole: "dimension", dataType : tableau.dataTypeEnum.float },

       { id : "lon", alias : "longitude",columnRole: "dimension", dataType : tableau.dataTypeEnum.float }


   var tableInfo = {

       id : "earthquakeFeed",

       alias : "Earthquakes with magnitude greater than 4.5 in the last seven days",

       columns : cols





   myConnector.getData = function (table, doneCallback)


       myConnector.getData = function(table, doneCallback) {

   $.getJSON("", function(resp) {

       var feat = resp.features,

           tableData = [];

       // Iterate over the JSON object

       for (var i = 0, len = feat.length; i < len; i++) {


               "id": feat[i].id,

               "mag": feat[i].properties.mag,

               "title": feat[i].properties.title,

               "lon": feat[i].geometry.coordinates[0],

               "lat": feat[i].geometry.coordinates[1]










$(document).ready(function () {

   $("#submitButton").click(function () {

       tableau.connectionName = "USGS Earthquake Feed";




IF everything works fine when we click Get Earthquake data button we should see the result.


Now pass this to tableau.

On the start page, in the Connect pane, click More Servers… > Web Data Connector.


Enter the URL of a WDC and press Enter.
Our url: https://localhost:8888/Simulator/earthquakeWDC.html

If everything works fine, then we should get the visualization

Tableau Map

Here we have successfully obtained the data and put it into tableau.

Explore Tableau Sample Resumes! Download & Edit, Get Noticed by Top Employers!Download Now!


List Of Tableau Courses:

 Tableau Advanced
 Tableau Server
 Data Visualization and Dashboarding Fundamentals

Popular Courses in 2018

Get Updates on Tech posts, Interview & Certification questions and training schedules