DEV Community

Cover image for Embedding Tableau Public Dashboard into the web application
Prashant Kamble
Prashant Kamble

Posted on

Embedding Tableau Public Dashboard into the web application

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,

TB1

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

TB8

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

TB7

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>

Enter fullscreen mode Exit fullscreen mode

5. Save the Test.html file and double click on it.

TB9

6. It will open in the browser and we can see the Dashboard.

TB5


It was a simple example of embedding a tableau public dashboard. You can use the Embed code in your web application in various ways.


Check out my Tableau Public profile Prashant Kamble

Top comments (1)

Collapse
 
catrina profile image
Catrina Roallos • Edited

This is cool, but what if I want to authenticate a user and show them only the dashboards they have access to? 🤔