14 Replies Latest reply on Jan 29, 2018 4:21 AM by Alexey Litvin

    Tableau JS API 'onload' function for Visualizations

    Charles Taylor

      I am currently writing a applications where I apply filters to a dashboard on the web using the Tableau Javascript API and one of the 'hacks' I am using to ensure the visualization loads is by adding a delay for example:

       

      window.setTimeout(function() {
          parseJsonObject(jsonObject);
        },10000);
      

       

      This 'waits' for the

      initializeViz();
      

      to load and then adds the functionality (in this case filters).

       

      I really dislike doing it this way because it is unpredictable, and I do not know that ten seconds is always going to work.

       

      I would love any ideas/suggestions/alternatives.

        • 1. Re: Tableau JS API 'onload' function for Visualizations
          Russell Christopher

          Perhaps I'm not following you...You want to do something (in this case, apply filters) after the Tableau viz has completely loaded, yes?

           

          Couple of questions/thoughts

           

          • The onFirstInteractive function option will allow you to do this. Any reason why you're not using it?
          • Are you aware that you can actually SET the filter values when you initially render the viz rather than using a "Render, than filter" pattern? (Poor user experience as the users see you "rendering twice").
          1 of 1 people found this helpful
          • 2. Re: Tableau JS API 'onload' function for Visualizations
            Charles Taylor

            Hey Russel,

             

            Thanks for the immediate response! You are spot on, and thanks for your suggestions.

             

            Just for clarification:

             

            • The onFirstInteractive function option will allow you to do this. Any reason why you're not using it?
            //This function?
            onFirstInteractive: function () {
              workbook = viz.getWorkbook();
              activeSheet = workbook.getActiveSheet();
            }
            

             

            Should I embed my functionality inside this function for example (obviously there would be more detailed refactoring; however, in this case imagine the function parseJsonObject() is not contingent on anything else).

             

            onFirstInteractive: function () {
              workbook = viz.getWorkbook();
              activeSheet = workbook.getActiveSheet();
              parseJsonObject(jsonObject);
            }
            

             

            Are you aware that you can actually SET the filter values when you initially render the viz rather than using a "Render, than filter" pattern? (Poor user experience as the users see you "rendering twice").

             

            Could you give me an elaborate more on this (if you have time of course)?

            • 3. Re: Tableau JS API 'onload' function for Visualizations
              Russell Christopher

              I'm not clear what you're doing with parseJsonObject(). What are you trying to parse? If that thing isn't Tableau related (I can't think of anything from Tableau you could work with) it really sounds like you have a vanilla JavaScript question - Why would you care what Tableau is doing? Why are you trying to delay Tableau from loading?

               

              You can pass filter / value combinations in as part of your option group:

               

               

              function renderVizMoreOptions() {
              
              
                  // Define variables for viz
                  var mainVizDiv = $("#mainViz");
                  var mainWorkbookUrl = "https://" + serverName + "/t/SkunkWorks/views/JavaScriptTarget/Dashboard";
                  var mainVizOptions = {
                      hideTabs: false,
                      hideToolbar: false,
                      width: mainVizDiv.parent().innerWidth() + "px",
                      height: mainVizDiv.parent().innerHeight() + "px",
                      //Filter Category field - note NO spaces between multiple filter values. Just a comma
                      Category: "Office Supplies,Furniture",
                      //Set Top Customers Parameter Value - note wrapping quotes around parameter name since it contains spaces
                      "Top Customers": 22,
                      onFirstInteractive: function () {
                          mainWorkbook = mainViz.getWorkbook();
                      }
                  };
                  //  Create viz
                  mainViz = new tableauSoftware.Viz(mainVizDiv[0], mainWorkbookUrl, mainVizOptions);
              }
              
              1 of 1 people found this helpful
              • 4. Re: Tableau JS API 'onload' function for Visualizations
                Charles Taylor

                Regarding the parseJsonObject it is only used as an example, it can be anything you want. I want The Tableau Viz to finish loading before I apply any functionality to it

                 

                It can be

                function filterSingleValue() {
                  activeSheet.applyFilterAsync(
                  "Region",
                  "The Americas",
                  tableauSoftware.FilterUpdateType.REPLACE);
                }
                
                
                

                 

                It doesn't matter it can also be some vanilla Javascript. I am trying to delay it because it will not apply the filter to the a visualization that has not loaded (at least on occasion in my experience), right?

                 

                Regarding this option group, I am not seeing this anywhere in the API documentation API Reference VizCreateOptions Record

                • 5. Re: Tableau JS API 'onload' function for Visualizations
                  Russell Christopher

                  Yeah, anything that shouldn’t execute until the viz is ready should go in onFirstInteractive…But don’t put your filters in there – put them in the option statement like in the code sample so that the doesn’t see the viz render once (unfiltered), then get re-filtered. Just filter the thing “out of the gate” for a better experience.

                  1 of 1 people found this helpful
                  • 6. Re: Tableau JS API 'onload' function for Visualizations
                    Charles Taylor

                    I am going to implement this, I just tested it this is pretty awesome.

                    • 7. Re: Tableau JS API 'onload' function for Visualizations
                      Russell Christopher

                      It takes a special type person to get excited about JavaScript & Tableau. Welcome to the club!

                      • 8. Re: Tableau JS API 'onload' function for Visualizations
                        Charles Taylor

                        Hey Russel,

                         

                        I hate to open this thread back up but you've saved me a lot of time! and I wanted to thank you, also where does this come from this category field is not represented in the Tableau API documentation?

                         

                        Thank you again

                        • 9. Re: Tableau JS API 'onload' function for Visualizations
                          Angel Rosario

                          Hi Russell,

                           

                          Is it possible to add a date range filter to the option statement?  We are having issues with our applyRangeFilterAsync call within onFirstInteractive.  If you flip between pages quickly, sometimes it will completely ignore the filtering and show ALL of the data in the report.  We are using Tableau Server 9.3.

                          • 10. Re: Tableau JS API 'onload' function for Visualizations
                            Tamas Foldi

                            Category: something will be converted as simple URL parameter=value pair

                            • 11. Re: Tableau JS API 'onload' function for Visualizations
                              Tamas Foldi

                              you can create two workbook parameters to define ranges using calculated filters, that will work all the times

                              • 12. Re: Tableau JS API 'onload' function for Visualizations
                                Angel Rosario

                                Thank you Tamas.  Yes I am aware of the calculated field approach but was hoping not to have our reporting team have to change & republish all those workbooks.

                                 

                                In any case, I have found a solution to my problem.  In our case, we were sometimes calling applyRangeFilterAsync before Tableau had fully finished loading the view.  I realized this when I saw that Tableau's "Progressive Load Complete" message was being logged after our filter was applied.  By using a Javascript setTimeout (or Angular's equivalent, $timeout, in my case) with a delay of 0 milliseconds, I was able to fix the problem.  This ensures Tableau's rendering events complete before applying the filters.  More info on why that works here:

                                http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful

                                 

                                What would be useful is if we had a way of specifying range filters in the options object OR if we had an event like onProgressiveLoadComplete.  The event "onFirstInteractive" does not mean the entire view is loaded, unfortunately.  Hope this helps anyone who may encounter a similar issue.

                                • 13. Re: Tableau JS API 'onload' function for Visualizations
                                  Ankit Kumar

                                  actually i want to apply filter on every chnage event of dropdown. but when i apply onFirstInteractive: function() it will filter only first time is there any alternative option to apply filter on every change event of dropdown.

                                  • 14. Re: Tableau JS API 'onload' function for Visualizations
                                    Alexey Litvin

                                    Ankit Kumar, did you find a solution to your problem. We are looking to answer similar question right now.