6 Replies Latest reply on Nov 28, 2018 12:10 AM by Nicolas MARTIN

    Include charts and filters in a web page

    Nicolas MARTIN

      Hello,

       

      I have a Tableau worbook that contains:

      - several charts and tables

      - a huge amount of possible filters

       

      I have so many filters I have to put them all on a specific sheet and the users have to switch sheet every time they want to change the filter.

       

      What I would like to do is to create an HTML file that contains my charts and my filters.

      But I don't want a huge iframe containting the whole workbook.

      I would like like to have a nice web page in which I insert my elements 1 by 1, where I want.

      I would be able to create a nice presentation to display the filters (with dynamic show/hide).

       

      I don't succeed to add 2 elements in my web page and make them have an interaction (ie. if I make a selection on 1, it updates the others).

      Does anyone know how I can achieve this?

       

      - Insert multiple elements in the same web page.

      - Selection on an element triggers the update of all others elements.

       

       

      I've found a way to create myself the filters in HTML and use "applyFilterAsync", but it's not a solution I would choose:

      - I don't know in advance the values of my filter, so I have to add interactions to retreive all possible values

      - I don't want to create the whole "search" feature

        • 1. Re: Include charts and filters in a web page
          Chris McClellan

          You need to learn about the Javascript API : Tableau JavaScript API - Tableau

          • 2. Re: Include charts and filters in a web page
            Nicolas MARTIN

            Hello,

             

            Could you be a little more specific?

             

            I tried with JavaScript API, and I didn't succeed to do what I want to do.

            I made 2 DIVs using the same application with 2 different containers. In the first one I display a dashboard. In the second one I display the filters.

            I set a trigger "onFilterChange" that do a "dispose" then do a new init of the first DIV.

            It works for the first selection, then it goes crazy (the filters don't have anymore the right values, ...).

             

             

            I tried creating myself the lists and call "applyFilterAsync" but I have to create from scratch a mechanism that get the possible values for each filter, create a search box, etc...

            • 3. Re: Include charts and filters in a web page
              Chris McClellan

              Sorry, I've never really used the API.  I just know that if you want to customise the webpage in that way then you have to use the API to do it.

               

              There should be some examples around that would help, or if you have an example you can post here and someone can see what might be wrong.

              • 4. Re: Include charts and filters in a web page
                Nicolas MARTIN

                > There should be some examples around that would help

                 

                It's exactly what I'm looking for.

                 

                • 5. Re: Include charts and filters in a web page
                  Chris McClellan

                  Hi,

                   

                  How about "if you have an example you can post here and someone can see what might be wrong" ?

                   

                  If you want examples, I would go to google.com - there's a few blogs that talk about the API, there's probably some posts on these forums that talk about the API.   Another good resource might be YouTube to get some video tutorials on how to use the API.

                   

                  Beyond that, it's very difficult to help you if you can't provide an example.  This forum is largely people volunteering their own personal time to help, we don't get paid by Tableau to be here.

                  • 6. Re: Include charts and filters in a web page
                    Nicolas MARTIN

                    > How about "if you have an example you can post here and someone can see what might be wrong" ?

                     

                    - How can I make a cheesecake?

                    - Tell us what you made and someone can see what might be wrong.

                     

                     

                    I already made a lot of searches in Google and even if I've learned interesting things about Tableau API, I still don't have a clue of how I can achieve what I want.

                    Maybe the answer is simply "it's not possible".

                     

                     

                    Here is what I've acheived so far:

                     

                     

                     

                    <!DOCTYPE html>
                    <html>
                    
                    
                    <head>
                        <title>Basic Embed</title>
                        
                        <script type="text/javascript" 
                        src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
                        <script type="text/javascript">
                    var viz, viz2, workbook, activeSheet;
                    
                    
                    
                    function initializeViz() {
                      var placeholderDiv = document.getElementById("tableauViz");
                      var placeholderDiv2 = document.getElementById("tableauViz2");
                      // this is a link to the sheet that contains the dashboard I want to display
                      var url = "https://mydomain.com/views/Simple/Feuille1?:embed=y&:showAppBanner=false&:showShareOptions=false&:display_count=no&:showVizHome=no";
                      // this is a link to a sheet that contains the filters I want to display
                      var url2 = "https://mydomain.com/views/Simple/Filtres?iframeSizedToWindow=true&:embed=y&:showAppBanner=false&:display_count=no&:showVizHome=no"
                    
                    
                      var options = {
                    width: placeholderDiv.offsetWidth,
                    height: placeholderDiv.offsetHeight,
                    hideTabs: true,
                    hideToolbar: true,
                    onFirstInteractive: function () {
                    workbook = viz.getWorkbook();
                    activeSheet = workbook.getActiveSheet();
                    }
                      };
                      
                      var options2 = {
                    width: placeholderDiv.offsetWidth,
                    height: placeholderDiv.offsetHeight,
                    hideTabs: true,
                    hideToolbar: true,
                    onFirstInteractive: function () {
                    workbook2 = viz2.getWorkbook();
                    activeSheet2 = workbook2.getActiveSheet();
                    viz2.addEventListener(tableau.TableauEventName.FILTER_CHANGE, onFilterChange);
                    viz2.addEventListener(tableau.TableauEventName.MARKS_SELECTION, onMarksSelection);
                    viz2.addEventListener(tableau.TableauEventName.PARAMETER_VALUE_CHANGE, onParameterValueChange);
                    
                    
                    }
                      };
                      viz = new tableau.Viz(placeholderDiv, url, options);
                      viz2 = new tableau.Viz(placeholderDiv2, url2, options2);
                    }
                    
                    function onFilterChange()
                    {
                    console.log("onFilterChange()");
                    refresh_dashboard();
                    }
                    
                    function onMarksSelection()
                    {
                    console.log("onMarksSelection");
                    }
                    
                    function onParameterValueChange()
                    {
                    console.log("onParameterValueChange");
                    }
                    
                    
                    
                    function getUnderlyingDataAsync() {
                    //activeSheet.getWorksheets().get("TdB").applyFilterAsync(
                    
                    var content = activeSheet.getAppliedValues();
                    //var content = activeSheet.getWorksheets().get("TdB").getFiltersAsync()
                    console.debug(content);
                    }  
                    
                    
                    
                    
                    
                    
                    
                    
                    function refresh_dashboard()
                    {
                    console.log("before");
                    viz.dispose();
                    
                    
                    var placeholderDiv = document.getElementById("tableauViz");
                    var url = "https://mydomain.com/views/Simple/Feuille1?:embed=y&:showAppBanner=false&:showShareOptions=false&:display_count=no&:showVizHome=no";
                    var options = {
                    width: placeholderDiv.offsetWidth,
                    height: placeholderDiv.offsetHeight,
                    hideTabs: true,
                    hideToolbar: true,
                    onFirstInteractive: function () {
                    workbook = viz.getWorkbook();
                    activeSheet = workbook.getActiveSheet();
                    }
                      };
                    viz = new tableau.Viz(placeholderDiv, url, options);
                    console.log("after");
                    }
                    
                    
                        </script>
                    </head>
                    
                    
                    <body onload="initializeViz();">
                    
                    
                        <div id="tableauViz" style="width:1200px; height:500px;"></div>
                    <div id="tableauViz2" style="width:1200px; height:500px; border: 1px;"></div>
                    
                    
                    
                    </body>
                    
                    
                    </html>
                    

                     

                     

                    I have 2 "DIV":

                    - one with the dashboard

                    - one with the filters

                     

                    I have event listener on the "filters" one, that triggers a reload of the "dashboard" one on selection change.

                     

                    It works the few first time I change the selections, but after, it comes crazy.