Embedding Tableau Public Dashboard into the web application

#tableaupublic #tableau #businessintelligence #html

Tableau Public is a free platform to publicly share and explore data visualizations online. Anyone can create visualizations using free Tableau Public Edition.

Steps to embedding tableau public dashboard into the web application with Embed code:

1. Sign in to Tableau Public with your login credentials,

2. Once you logged in to Tableau public, open any existing dashboard and click on the “Share” button.

3. After clicking the “Share” button, the Share pop-up box will come.

4. Then copy Embed code from the Share pop-up box. Create a simple HTML file name Test.html and paste copied Embed code into the <body> tag of the HTML file.

Below is the sample HTML code for reference,

<html>
<head>
  <title>Embedding Tableau public reports into the web application</title>
</head>
<body>
    <div class='tableauPlaceholder' id='viz1609851260284' style='position: relative'>
        <noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Te&#47;TeslaStockPrices_16097083454810&#47;TeslaStockPrice&#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='TeslaStockPrices_16097083454810&#47;TeslaStockPrice' />
        <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;Te&#47;TeslaStockPrices_16097083454810&#47;TeslaStockPrice&#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' />
        </object>
        </div>                
        <script type='text/javascript'>                    
        var divElement = document.getElementById('viz1609851260284');                    
        var vizElement = divElement.getElementsByTagName('object')[0];                    
        if ( divElement.offsetWidth > 800 ) { vizElement.style.width='1300px';vizElement.style.height='927px';} 
        else if ( divElement.offsetWidth > 500 ) { vizElement.style.width='1300px';vizElement.style.height='927px';} 
        else { vizElement.style.width='100%';vizElement.style.height='2127px';}                     
        var scriptElement = document.createElement('script');                    
        scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    
        vizElement.parentNode.insertBefore(scriptElement, vizElement);                
        </script>
</body>
</html>