applying filter to multiple embedded tableau dashboards

Viewed 197

I have 2 Tableau dashboards embedded onto a webpage, each using the Embed Code from clicking the "share" button on Tableau Public. I have a filter on the 1st dashboard that I would also like to apply to the 2nd when clicked. What is the easiest way to do so?

Here is my current code:

<section class="py-5">
                <div class="container px-5">
                    <h1 class="fw-bolder fs-5 mb-4">Heart Disease Study Data Analysis</h1>
                    <div class="card border-0 shadow rounded-3 overflow-hidden">
                        <!-- Dashboard 1 div -->
                        <div class='tableauPlaceholder' id='viz1623283782551' style='position: relative'><noscript><a href='#'><img alt='Dashboard ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;He&#47;HeartDiseaseStudyAnalysis&#47;Dashboard&#47;1_rss.png' style='border: none' /></a></noscript>
                            <object class='tableauViz'  style='display:none;'>
                                <param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> 
                                <param name='embed_code_version' value='3' /> <param name='site_root' value='' />
                                <param name='name' value='HeartDiseaseStudyAnalysis&#47;Dashboard' />
                                <param name='tabs' value='no' />
                                <param name='toolbar' value='yes' />
                                <param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;He&#47;HeartDiseaseStudyAnalysis&#47;Dashboard&#47;1.png' /> 
                                <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' />
                                <param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' />
                                <param name='display_count' value='yes' /><param name='language' value='en-US' />
                            </object>
                        </div>
                    </div>
                <!-- </div> -->
            <!-- </section> -->
 
            <!-- <section class="py-5"> -->
                <!-- <div class="container px-5"> -->
                    <!-- <h1 class="fw-bolder fs-5 mb-4">Heart Disease Study Data Analysis</h1> -->
                    <div class="card border-0 shadow rounded-3 overflow-hidden">
                        <!-- Dashboard 2 div -->
                        <div class='tableauPlaceholder' id='viz1623287413728' style='position: relative'><noscript><a href='#'><img alt='Dashboard 2 ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;He&#47;HeartDiseaseStudyAnalysis&#47;Dashboard2&#47;1_rss.png' style='border: none' /></a></noscript>
                            <object class='tableauViz'  style='display:none;'>
                                <param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' />
                                <param name='name' value='HeartDiseaseStudyAnalysis&#47;Dashboard2' />
                                <param name='tabs' value='no' /><param name='toolbar' value='yes' />
                                <param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;He&#47;HeartDiseaseStudyAnalysis&#47;Dashboard2&#47;1.png' /> 
                                <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' />
                                <param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' />
                                <param name='display_count' value='yes' /><param name='language' value='en-US' />
                            </object>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        
        <!-- Dashboard 1 js -->
        <script type='text/javascript'>                    
            var divElement = document.getElementById('viz1623283782551');                    
            var vizElement = divElement.getElementsByTagName('object')[0];                    
            if ( divElement.offsetWidth > 800 ) { vizElement.style.width='100%';vizElement.style.height=(divElement.offsetWidth*0.75)+'px';} 
            else if ( divElement.offsetWidth > 500 ) { vizElement.style.width='100%';vizElement.style.height=(divElement.offsetWidth*0.75)+'px';} 
            else { vizElement.style.width='100%';vizElement.style.height='1477px';}                     
            var scriptElement = document.createElement('script');                    
            scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    
            vizElement.parentNode.insertBefore(scriptElement, vizElement);                
        </script>
 
        <!-- Dashboard 2 js -->
        <script type='text/javascript'>                    
            var divElement = document.getElementById('viz1623287413728');                    
            var vizElement = divElement.getElementsByTagName('object')[0];                    
            if ( divElement.offsetWidth > 800 ) { vizElement.style.width='100%';vizElement.style.height=(divElement.offsetWidth*0.75)+'px';} 
            else if ( divElement.offsetWidth > 500 ) { vizElement.style.width='100%';vizElement.style.height=(divElement.offsetWidth*0.75)+'px';} 
            else { vizElement.style.width='100%';vizElement.style.height='1427px';}                     
            var scriptElement = document.createElement('script');                    
            scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    
            vizElement.parentNode.insertBefore(scriptElement, vizElement);                
        </script>
1 Answers
Related