Embed a responsive Tableau infographics


(Pablo) #1

Hi friends,
I’m trying to embed a Tableau dashboard into a responsive iframe.
On the Tableau page it is responsive (width and height apapts to window browser’s size):
https://public.tableau.com/views/ColumnaPasodeLaCumbre/Dashboard1?:embed=y&:display_count=yes
But when I paste the embed code to my html widget, I lose the height ‘responsiveness’.

This is the code I’m pasting inside the widget:
<div class='tableauPlaceholder' id='viz1478971518281' style='position: relative'><noscript><a href='#'><img alt='Dashboard 1 ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Co&#47;ColumnaPasodeLaCumbre&#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='site_root' value='' /><param name='name' value='ColumnaPasodeLaCumbre&#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;Co&#47;ColumnaPasodeLaCumbre&#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' /></object></div> <script type='text/javascript'> var divElement = document.getElementById('viz1478971518281'); var vizElement = divElement.getElementsByTagName('object')[0]; vizElement.style.width='100%';vizElement.style.height=(divElement.offsetWidth*0.75)+'px'; var scriptElement = document.createElement('script'); scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js'; vizElement.parentNode.insertBefore(scriptElement, vizElement); </script>


(Jonathan Deutsch) #2

I suspect this is how they are coding the responsiveness. Notice that if you reload the page at different widths, it will represent different heights. One workaround would be to check ‘zoom contents’ which will use transformation scaling on the element and thus not communicate size changes, but it also means the content is likely to look blurry if it needs to magnify.