Web Data Connector in Tableau Server

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:

../Examples/html/earthquakeUSGS.html

• 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

HTML FILE

 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

   };

   schemaCallback([tableInfo]);

};

   };

   myConnector.getData = function (table, doneCallback)

   {

       myConnector.getData = function(table, doneCallback) {

   $.getJSON("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson", function(resp) {

       var feat = resp.features,

           tableData = [];

       // Iterate over the JSON object

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

           tableData.push({

               "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]

           });

       }

       table.appendRows(tableData);

       doneCallback();

   });

};

   };

   tableau.registerConnector(myConnector);

})();

$(document).ready(function () {

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

       tableau.connectionName = "USGS Earthquake Feed";

       tableau.submit();

   });

});

Now pass this to tableau.

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