'Passing parameters to an embedded Tableau Public Report

I have the following dashboard build with Tableau Public: https://public.tableau.com/app/profile/david8402/viz/map_parameters/Dashboard1

The dashboard accept as parameters a list of countries as a string of ISO3 separated by a character. For example using this URL https://public.tableau.com/app/profile/david8402/viz/map_parameters/Dashboard1?countries=ITA-AUS Italy and Australia will be highlighted in the map.

I want to embed this dashboard into a web page but if I use the classical embed script then I don't know how to pass the URL parameters related to the countries.

<div class='tableauPlaceholder' id='viz1650639649335' style='position: relative'>
    <noscript>
        <a href='#'>
            <img alt='Dashboard 1 ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;ma&#47;map_parameters&#47;Dashboard1&#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='map_parameters&#47;Dashboard1' />
        <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;ma&#47;map_parameters&#47;Dashboard1&#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='countries' value='USA' />
        <param name='language' value='it-IT' />
    </object>
</div>
<script type='text/javascript'>
    var divElement = document.getElementById('viz1650639649335');
    var vizElement = divElement.getElementsByTagName('object')[0];
    if (divElement.offsetWidth > 800) { 
         vizElement.style.width = '520px';
         vizElement.style.height = '587px'; 
    }
    else if (divElement.offsetWidth > 500) { 
         vizElement.style.width = '520px'; 
         vizElement.style.height = '587px'; 
    }
    else { vizElement.style.width = '100%'; vizElement.style.height = '727px'; }
    var scriptElement = document.createElement('script');
    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
    vizElement.parentNode.insertBefore(scriptElement, vizElement);                
</script>

Any suggestion?

I also tried with the iframe but it loads the whole Tableau page and I want only the chart.

Cheers



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source