Given is the code of the Web Data Connector Page that I have created, it creates a URL to access the json data from an API.
The json data is then pushed onto an array which is then fed to tableau.
I have given the code below, please tell me if their is any error in the code and help me solve the issue.
<html>
<head>
<title> Topic Call</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<link href="http://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet" />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://online.tableau.com/javascripts/api/tableauwdc-1.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
(function() {
//HELPER FUNCTION USED TO BUILD THE API CALL.
function buildUrl(option) {
if(option==""){
var uri = "http://api.worldbank.org/topic?per_page=100&format=json";
}
else{
var uri = "http://api.worldbank.org/topic/"+ option +"?per_page=100&format=json";
}
return uri;
}
//Function to create an instance of the connector.
var myConnector = tableau.makeConnector();
//Tableau calls this function to get column (field) information for the data that the connector provides.
myConnector.getColumnHeaders = function() {
var fieldNames = ['topic-id','topic-value','source-note'];
var fieldTypes = ['string','string','string'];
tableau.headersCallback(fieldNames, fieldTypes); //Passes information about the data schema to Tableau.
}
//To get the data that's represented by the connector.
myConnector.getTableData = function(lastRecordToken) {
var dataToReturn = [];
var hasMoreData = false;
var ticker = tableau.connectionData;
var connectionUrl = buildUrl(ticker);
var xhr = $.ajax({
url: connectionUrl,
dataType: 'json',
success: function (data) {
var ii;
var length1 = data[0].total;
for (ii = 0 ; ii < length1; ii++)
{
var entry = {
'topic-id':data[1][ii].id,
'topic-value':data[1][ii].value,
'source-note':data[1][ii].sourceNote
};
dataToReturn.push(entry);
}
console.log(dataToReturn);
tableau.dataCallback(dataToReturn, lastRecordToken, false);//Passes data from the connector to Tableau
},
//TO GET THE ERROR MESSAGE
error: function(xhr, ajaxOptions, thrownError) {
tableau.log("Connection error: " + xhr.responseText + "\n" + thrownError);
tableau.abortWithError("Error while trying to connect to the World Bank data source.");
}
});
}
//Registers the connector with Tableau.
tableau.registerConnector(myConnector);
//jQUERY USED FOR GETTING THE RESPONSE ON CLICKING THE BUTTON.
$(document).ready(function() {
$("#subGet").submit(function() {
var topic = $('#edit-topic').val();
if (topic) {
tableau.connectionName = "World Bank Data for " + topic;
tableau.connectionData = topic;//connectionData is used to pass information from the interactive phase to the data-fetching phase of the connector.
tableau.submit();//Tells Tableau that the connector has finished the interactive phase or the authentication phase. After this method is called, Tableau proceeds to the data-gathering phase.
}
});
});
});
</script>
<script src="https://public.tableau.com/javascripts/api/tableauwdc-1.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
(function() {
var myConnector = tableau.makeConnector();
myConnector.getColumnHeaders = function() {}
myConnector.getTableData = function(lastRecordToken) {}
tableau.registerConnector(myConnector);
})();
</script>
</head>
<body>
<div id="header-wrapper">
<div id="wblogo"></div>
<div id="banner" class="container">
<div class="title">
<h2>TOPIC calls</h2>
<span class="byline">Select one of the Topic mentioned below</span>
</div>
</div>
</div>
<div id="decor1"> </div>
<div id="wrapper">
<div id="three-column" class="container">
<div class="title">
<span class="byline">Topics : <select name="topic" class="form-select" id="edit-topic"> <option value="">-</option> <option value="1">Agriculture & Rural Development</option> <option value="2">Aid Effectiveness</option> <option value="3">Economy & Growth</option> <option value="4">Education</option> <option value="5">Energy & Mining</option> <option value="6">Environment</option> <option value="7">Financial Sector</option> <option value="8">Health</option><option value="9">Infrastructure</option> <option value="10">Social Protection & Labor</option> <option value="11">Poverty</option> <option value="12">Private Sector</option><option value="13">Public Sector</option> <option value="14">Science & Technology</option> <option value="15">Social Development</option> <option value="16">Urban Development</option> <option value="17">Gender</option> <option value="18">Millenium development goals</option> <option value="19">Climate Change</option> <option value="20">External Debt</option> </select><p></p>
<input type="submit" name="op" id="subGet" class="button button-alt" value="Get Data"></span>
</div>
</div>
</div>
<div id="decor1"></div>
<div id="footer"></div>
</body>
</html>
