4 Replies Latest reply on Jul 11, 2018 12:24 PM by Raleigh Chen

    Selecting marks based on Date

    Raleigh Chen

      Hey all,

      Trying to figure out how to use the Javascript API to select marks and I've gotten it working ok with Categorical dimensions (i.e. string values), but once I get something that is date or time based, I can't seem to get it to select at all.  I don't know if this is a limitation to the API, but I was hoping somebody had more experience with this.

       

      As an example, I'll use the sample workbook: Tableau Public (Regional Sample Workbook -- Flights sheet).

       

      Here's my basic embed code with the problematic portion commented out:

      <html>

      <head>

      <title>Basic Embed</title>

         

           <script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.js"></script>

           <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>

           <script type="text/javascript">

         

                var viz, workbook, activeSheet;

       

                function initViz() {

                     var containerDiv = document.getElementById("vizContainer");

                     var url = "http://public.tableau.com/views/RegionalSampleWorkbook/Flights";

                     var options = {

                          hideTabs: true,

                          onFirstInteractive: function () {

                               workbook = viz.getWorkbook();

                               activeSheet = workbook.getActiveSheet();

                          }

                     };

                     var viz = new tableau.Viz(containerDiv, url, options);

       

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

                          workbook.getActiveSheet().selectMarksAsync({

                               "Carrier Name":"Virgin"

      //                       ,"Month of Date": "Aug"

                          },tableau.SelectionUpdateType.REPLACE);

                     });

                }

           </script>

      </head>

      <body onload="initViz();">

           <div id="vizContainer" style="width:1000px; height:600px;"></div>   

           <button id="selectDot">Select Marks</button>

      </body>

      </html>

       

      If you run this code, it'll have a normal embed with a button on it.  When you click the button, it selects all the marks under Virgin.

      However, if you uncomment it, nothing works... nothing is selected.  I've tried many combinations of field name, value format, etc., etc. but I can't seem to get it to work or find examples of anyone doing mark selection via Javascript API involving Dates. 

       

      Any help would be appreciated.