7 Replies Latest reply on Apr 6, 2016 5:36 PM by Brendan Lee

    Help Needed World bank Web Data Connector

    Aarav Chandra

      Here is the code and the the screenshot of the error that I'm having while I execute the code.

       

      Can anyone please help me with this issue?

       

      error.png

      <html>

      <head>

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

      </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 &amp; Rural Development</option> <option value="2">Aid Effectiveness</option> <option value="3">Economy &amp; Growth</option> <option value="4">Education</option> <option value="5">Energy &amp; 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 &amp; Labor</option> <option value="11">Poverty</option> <option value="12">Private Sector</option><option value="13">Public Sector</option> <option value="14">Science &amp; 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>

        • 1. Re: Help Needed World bank Web Data Connector

          Hey Aarav,

           

          I moved this post over to the Web Data Connector portion of the Community.

           

          Thanks for posting!

           

          -Diego

          • 2. Re: Help Needed World bank Web Data Connector
            Jeff D

            Hi Aarav, have you solved the problem yet?  Let us know if you still need help.

            • 3. Re: Help Needed World bank Web Data Connector
              Aarav Chandra

              Hi Jeff, I am still stuck with this problem. Now on clicking the button nothing happens.

              • 4. Re: Help Needed World bank Web Data Connector
                Brendan Lee

                Aarav,

                 

                When I loaded your connector in the simulator there are a number of errors present:

                Screen Shot 2016-04-04 at 12.52.54 PM.png

                 

                I couldn't figure out why these were showing up.  I suspect it is some weird whitespace character or something like that. I copied all of your main functions into a clean javascript template and these went away. 

                 

                You also have issue with your submit button event.  $("#subGet").submit is not firing.  I changed this to $("#subGet").click to get it to immediately work.  You may need to do some additional work to get the submit event to fire. 


                Even with these changes, your API request is not returning data correctly, but this should at least get you unstuck I hope.  Let me know if that allows you to progress further.

                 

                <html>

                <head>

                <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://connectors.tableau.com/libs/tableauwdc-1.1.1.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;

                   }

                 

                 

                  //

                  // Connector definition

                  //

                 

                 

                  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.");

                          }

                      });

                  };

                 

                 

                  tableau.registerConnector(myConnector);

                 

                 

                  //jQUERY USED FOR GETTING THE RESPONSE ON CLICKING THE BUTTON.

                  $(document).ready(function() {

                      $("#subGet").click(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>

                </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 &amp; Rural Development</option> <option value="2">Aid Effectiveness</option> <option value="3">Economy &amp; Growth</option> <option value="4">Education</option> <option value="5">Energy &amp; 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 &amp; Labor</option> <option value="11">Poverty</option> <option value="12">Private Sector</option><option value="13">Public Sector</option> <option value="14">Science &amp; 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>

                • 5. Re: Help Needed World bank Web Data Connector
                  Aarav Chandra

                  Brendan,

                   

                  Thank you, appreciate the help.

                  I will look into the problem and update the post if I face other issues.

                  • 6. Re: Help Needed World bank Web Data Connector
                    Aarav Chandra

                    Brendon,

                    Below is the code snippet that I tried to run on the WDC simulator.

                    The Button is working as you can see from the screenshot that it returns the  correct value on the console but nothing happens after that.

                    On clicking the button.jpg

                     

                     

                    <html>

                    <head>

                    <title>Topic Call </title>

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>

                    <script src="https://connectors.tableau.com/libs/tableauwdc-1.1.1.js" type="text/javascript"></script>

                    <script type="text/javascript">

                     

                    (function() {

                      var data_To_Return = [];

                      var hasMoreData = false;

                      var topic = "";

                     

                      var myConnector = tableau.makeConnector();

                      

                      myConnector.init = function () {

                        tableau.connectionName = 'Topic Call with value as '+topic;

                        tableau.initCallback();

                      };

                      

                      function getConnectionUrl(topic) {

                      if(topic=="``")

                        {

                        var uri = "http://api.worldbank.org/topic?per_page=100&format=json";

                        }

                      else

                        {

                        var uri = "http://api.worldbank.org/topic/"+topic+"?per_page=100&format=json";

                        }

                      return uri;

                      }

                      

                      myConnector.getColumnHeaders = function() {

                        var fieldNames = ['Topic-id','Topic-value','Source-note'];

                        var fieldTypes = ['string','string','string'];

                        tableau.headersCallback(fieldNames, fieldTypes);

                      };

                     

                       myConnector.getTableData = function () {

                         var xhr = $.ajax({

                          url: getConnectionUrl(topic),

                          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

                                          };

                         data_To_Return.push(entry);

                        }

                        

                            tableau.dataCallback(data_To_Return,"", false);

                          }

                        });

                      };

                     

                      tableau.registerConnector(myConnector);

                    })();

                    $(document).ready(function(){

                      $("#getButton").click(function() { // This event fires when a button is clicked

                        var topic=$('#edit-topic').val();

                          console.log(topic);});

                        tableau.submit();

                    });

                      

                    </script>

                    </head>

                    <body>

                    Topics : <select name="topic" id="edit-topic">

                    <option value="``">-</option>

                    <option value="1">Agriculture &amp; Rural Development</option>

                    <option value="2">Aid Effectiveness</option>

                    <option value="3">Economy &amp; Growth</option>

                    <option value="4">Education</option>

                    <option value="5">Energy &amp; 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 &amp; Labor</option>

                    <option value="11">Poverty</option>

                    <option value="12">Private Sector</option>

                    <option value="13">Public Sector</option>

                    <option value="14">Science &amp; 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>

                    <button type="button" name="op" id="getButton">Get Data</button>

                    </body>

                    </html>

                    • 7. Re: Help Needed World bank Web Data Connector
                      Brendan Lee

                      Hey Aarav,

                       

                      It looks like you are trying to run your connector directly from your browser.  This won't work, as there is nothing to call the methods of your web data connector.

                       

                      Instead, trying running the connector from the simulator that is hosted on GitHub: Web Data Connector Host

                       

                      For more information, check out this tutorial that details getting started with WDC development.  This tutorial will talk about how to host your own simulator if you would like: http://onlinehelp.tableau.com/current/api/wdc/en-us/help.htm#WDC/wdc_tutorial_basic.htm%3FTocPath%3DWeb%2520Data%2520Con… 

                       

                      -Brendan

                      1 of 1 people found this helpful