6 Replies Latest reply on Oct 29, 2014 7:12 AM by Robert Rouse

    JS API Array size limit for filters?

    Robert Rouse

      I'm creating a JavaScript array via PHP so I can dynamically pass filters to a workbook embedded using the JS API. You can see in the code below where I pass it in to "RowID" using the "filterList" variable. However, I'm running into a problem: when this array gets large (500 values or more) the view breaks. Is this a limitation of the API, or is there some other way I can pass in large numbers of filter values from an array?

       

      window.onload= function () {
                          var vizDiv = document.getElementById('viz');
                          var vizURL = "<<workbookURL>>";
                          var options = {
                              width: '940px',
                              height: '720px',
                              hideToolbar: false,
                              hideTabs: true,
                              RowID: filterList,
                              onFirstInteractive: function () {
                                  workbook = viz.getWorkbook();
                                  document.getElementById('sheetName').innerHTML = viz.getWorkbook().getActiveSheet().getName();
                              }
                          };
                          viz = new tableauSoftware.Viz(vizDiv, vizURL, options);
                          viz.addEventListener('tabswitch', function(event) {
                              document.getElementById('sheetName').innerHTML = event.getNewSheetName();
                          });
                      };
      
        • 1. Re: JS API Array size limit for filters?
          Russell Christopher

          Hey Robert, 

           

          Short answer is "I don't know",  but at a high level having hundreds of items in a filter (vs using a range filter) is considered a best practices in terms of viz design.  As a result,  I wouldn't be surprised if we didn't test passing 500+ items in one fell swoop - wouldn't occur to us since we wouldn't normally do this in the name of viz design best practices.

           

          Are you finding that 100 /200 / 300 / whatever works,  but 500 doesn't?

           

          I'll ping one of the devs to see if he has an opinion on this,  but in the short term I'd suggest you open a support case to get things going.

          • 2. Re: JS API Array size limit for filters?
            Justin Rockwood

            Robert, I believe that you're probably running into the limit of the length of a URL. The JavaScript API takes the options object that you provide and appends those values to the URL that is sent to the IFrame. Most browsers have a limit on how long a URL can be, so I'm guessing that you're hitting this limit. Unfortunately, there's not another way to pass this information to the viz at load time. You may consider passing in a subset of the filters at load time and then using the JavaScript API applyFilterAsync() function to set the rest of the filter values after the Viz has become interactive.

            1 of 1 people found this helpful
            • 3. Re: JS API Array size limit for filters?
              Robert Rouse

              I'm definitely doing things in a way Tableau wasn't meant for, but it's what I have at the moment until I can develop a more robust solution. I don't know the exact cutoff, but it's somewhere around 300-500 (each element of the list is 4 digits).

              • 4. Re: JS API Array size limit for filters?
                Robert Rouse

                That makes sense. I can experiment with applying the filter after things are loaded. Can you point me to a way to apply a filter immediately after the frame is loaded? I'm a bit of a JS noob - I know how to apply a filter on user interactions but I don't know how to do it based on an event that would tell me that the viz is now available for interaction.

                • 5. Re: JS API Array size limit for filters?
                  Justin Rockwood

                  Sure thing. It's fairly easy to do. In your code above, you'll see the onFirstInteractive() function. Just put your code in there to do some more filtering.

                   

                  onFirstInteractive: function() {
                  // do some filtering here
                  workbook.getActiveSheet().applyFilterAsync(
                     "FieldName",
                     [ "value1", "value2" ],
                     tableauSoftware.FilterUpdateType.ADD);
                  }
                  
                  

                   

                  If you need more examples of how to do filtering, check out the help page here: http://onlinehelp.tableausoftware.com/v8.2/server/en-us/help.htm#js_api_concepts.htm#Filtering_..252%3FTocPath%3DJavaScript%2520API%7CConcepts%7C_____8

                  • 6. Re: JS API Array size limit for filters?
                    Robert Rouse

                    Based on this discussion, I've arrived at the solution with a few modifications. For those who might run accross the same issue, here's a synopsis:

                     

                    • Using the options variable to apply filters on load performs best but hits limitations on larger lists. As @Justin Rockwood explained, this is because the API adds that list to a URL request. By inspecting this in Google Chrome, I found "Error 400 - Bad Request" next to a very long URL.
                    • Adding a filter function under the onFirstInteractive() portion worked with the code provided in the correct answer, with one exception: it only works for a single sheet. Anywhere this type of function is applied, you must account for whether you're handling a dashboard or a worksheet. For handling it in a dashboard, the code is:
                    worksheetArray = sheet.getWorksheets();
                      for(var i = 0; i < worksheetArray.length; i++) {
                      worksheetArray[i].applyFilterAsync('fieldName', ['value1','value2','value3'], 'ADD');
                      }
                    
                    
                    

                     

                    I've basically used a combination of the two: apply the filter in options, limiting the list to the first 400 values. Then, apply any values above 400 using a function triggered in the onFirstInteractive portion. This speeds up initial load time and limits the lag induced by applying the filter after loading the dashboard.

                    1 of 1 people found this helpful