3 Replies Latest reply on Jan 23, 2015 3:30 PM by saranya karthi

    Tableau Javascript integration

    Baiju Mishra

      Hi,

       

      as per the tutorial, I am trying to integrate qlikview with javascript API. Web page is not rendering the dashboard. Am I going wrong somewhere? Below is the HTML code.

       

      Thanks,

      Baiju

       

      <!DOCTYPE html>

       

       

      <html>

      <head>

        <title>Tableau 8.0 JavaScript API On-Demand Tutorial Example</title>

        <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

        <link href="bootstrap.css" rel="stylesheet" media="screen">

        <script type="text/javascript" src="http://publicbeta.tableausoftware.com/javascripts/api/tableau_v8.debug.js"></script>

      </head>

      <body>

        <div class='container'>

        <div class='row'>

        <div class='span3'><img src='logo.png' ></div>

        <h2 class='span7 pagination-centered'>JavaScript API Tutorial</h2>

        </div>

        <div class='row'><h3 class='offset3 span7 pagination-centered' id='sheetName'></h3></div>

        <div class='row'>

       

        <!-- All of our work will happen here -->

        <!-- Viz located at http://public.tableausoftware.com/views/Presents/TreeMap -->

        <ul id = 'menu' class='nav nav-list offset1 span2'>

        <!-- This is the menu where we will add all of our buttons. -->

        <!-- <li class='nav-header'>Switching Views</li> -->

        <!-- <li><a onClick="switchView('LineChart')">LineChart</a></li> -->

        </ul>

        <div id='test'></div>

        <script>

        var vizDiv = document.getElementByID('test');

          var vizURL = "http://public.tableausoftware.com/views/Presents/TreeMap";

          var options = {

          };

          viz = new tableauSoftware.Viz(vizDiv, vizURL, options)

        </script>

       

        <!-- This is the end of the section where we will do our work. -->

        </div>

        </div>

      </body>

      </html>

        • 1. Re: Qlikview Javascript integration
          Russell Christopher
          <html>
          <head>
            <title>Tableau 8.0 JavaScript API On-Demand Tutorial Example</title>
            <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
          
            <!--link href="bootstrap.css" rel="stylesheet" media="screen"-->
            <script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/tableau_v8.debug.js"></script>
          </head>
          <body>
            <div class='container'>
            <div class='row'>
            <div class='span3'><!--img src='logo.png' ></div-->
            <h2 class='span7 pagination-centered'>JavaScript API Tutorial</h2>
            </div>
            <div class='row'><h3 class='offset3 span7 pagination-centered' id='sheetName'></h3></div>
            <div class='row'>
          
            <!-- All of our work will happen here -->
            <!-- Viz located at http://public.tableausoftware.com/views/Presents/TreeMap -->
            <ul id = 'menu' class='nav nav-list offset1 span2'>
            <!-- This is the menu where we will add all of our buttons. -->
            <!-- <li class='nav-header'>Switching Views</li> -->
            <!-- <li><a onClick="switchView('LineChart')">LineChart</a></li> -->
            </ul>
            <div id='test'></div>
            <script>
            var vizDiv = document.getElementById('test');
              var vizURL = "http://public.tableausoftware.com/views/Presents/TreeMap";
              var options = {
              };
              viz = new tableauSoftware.Viz(vizDiv, vizURL, options)
            </script>
          
            <!-- This is the end of the section where we will do our work. -->
            </div>
            </div>
          </body>
          </html>
          

           

          Line 6: Reference to CSS file that is not accessible

          Line 7: Reference to publicbeta server - I believe this box is gone.

          Line 27: Capitalization matters: getElementById, not getElementByID

           

          Hope this helps. The page above works fine for me.

           

          BTW, why are you mentioning QlikView in the title of this message? It doesn't appear to have anything to do with QlikView...

          • 2. Re: Qlikview Javascript integration
            Baiju Mishra

            Thanks Russell. It worked .

            Yep good catch. Thanks for that as well. I was working on few items in parallel. So the miss.

            • 3. Re: Tableau Javascript integration
              saranya karthi

              Hi Russell,

              I am trying with Javascript API in Tableau. I was passing values from HTML to Tableau using applyFilterSync('Col Name','value','REPLACE'). It was filtering the dashboard based on the filter value successfully.

              Now I have a pass the array of values to add new lines  to the existing charts. In the existing charts(capture 1 image) I have 2 lines one for Actual value and other for Projected value.

              I would like to add one or  more lines to chart based on the user selection in HTML. In HTML, I have region Checkbox (Central,South,East,West).

              In HTML(Capture 2 image) if I select region checkbox Central,South, i want to get 2 more lines to the existing charts like the image (Capture 3).

              So in javascript ,I used the below code


              Code in Javascript:

              function Addlines()
              {

               

                var check = document.getElementsByName("Rgn");
                var textArray = [];                          
                  for(var c = 0; c < check.length;c++)
                  {
                     if(check[c].checked){
                        textArray .push(check[c].value);                               
                  }

                

              }
                alert(textArray);  // this textArray gives the list of region selected in the HTML checkbox
                var filterName = 'ColumnName';  //This ColumnName will be 'Region'
                sheet = viz.getWorkbook().getActiveSheet();
                if(sheet.getSheetType() === 'worksheet') {
                sheet.applyFilterAsync(filterName, textArray , 'ADD'); // For testing, I even hardcoded textArray with 'Central'
                } else {
                worksheetArray = sheet.getWorksheets();
                for(var i = 0; i < worksheetArray.length; i++) {
                worksheetArray[i].applyFilterAsync(filterName,textArray , 'ADD');
                }
                }
              }

               

               

              The above code is not adding the new line for region(ie applyFilterSync 'ADD'), instead it is doing the same function as 'REPLACE' filtering the Actual value for Region(Central/South/East/West).

               

              Can you please suggest a way to do this.

              The images are attached in the forum link

              Below is my forum link

              Tableau Javascript API - not adding lines to the chart

               

              Thanks

              Saranya