Demo
Column
Description
An Example of Including A Tableau Dashboard in A R Markdown Dashboard
This dashboard shows a simple demonstration for Inserting a Tableau Figure from this website: WOW202246.
If you click the icon for sharing the dashboard (on the top right), you can get the Embed Code as follows.
<div class='tableauPlaceholder' id='viz1669909608616' style='position: relative'><noscript><a href='#'><img alt='Dashboard 1 ' src='https://public.tableau.com/static/images/WO/WOW202246-Maps/Dashboard1/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='WOW202246-Maps/Dashboard1' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='https://public.tableau.com/static/images/WO/WOW202246-Maps/Dashboard1/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> <script type='text/javascript'> var divElement = document.getElementById('viz1669909608616'); var vizElement = divElement.getElementsByTagName('object')[0]; if ( divElement.offsetWidth > 800 ) { vizElement.style.width='1066px';vizElement.style.height='895px';} else if ( divElement.offsetWidth > 500 ) { vizElement.style.width='1066px';vizElement.style.height='895px';} else { vizElement.style.width='100%';vizElement.style.height='977px';} var scriptElement = document.createElement('script'); scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js'; vizElement.parentNode.insertBefore(scriptElement, vizElement); </script>In order to make this Tableau dashboard available in your R
dashboard, you need to make some changes in the code above since the
part between <div class ...> and </div> is the HTML code but
the part between
<script type='text/javascript'>
and </script> is
Javascript. Let’s separate these two parts first.
You can find that I also arrange the code a bit to improve the readability of the code. This is not required.
Column
Step 1
<div class='tableauPlaceholder' id='viz1669909608616' style='position: relative'>
<noscript>
<a href='#'>
<img alt='Dashboard 1 ' src='https://public.tableau.com/static/
images/WO/WOW202246-Maps/Dashboard1/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='WOW202246-Maps/Dashboard1' /><param name='tabs' value='no' />
<param name='toolbar' value='yes' />
<param name='static_image' value='https://public.tableau.com/static/
images/WO/WOW202246-Maps/Dashboard1/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>
<script type='text/javascript'>
var divElement = document.getElementById('viz1669909608616');
var vizElement = divElement.getElementsByTagName('object')[0];
if ( divElement.offsetWidth > 800 ) {
vizElement.style.width='1066px';vizElement.style.height='895px';}
else if (divElement.offsetWidth > 500 ) {
vizElement.style.width='1066px';vizElement.style.height='895px';}
else {vizElement.style.width='100%';vizElement.style.height='977px';}
var scriptElement = document.createElement('script');
scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
vizElement.parentNode.insertBefore(scriptElement, vizElement);
</script>Step 2
Now, we create a code chunk to include the part regarding the
javascript and remove <script type='text/javascript'>
and </script> as
follows.
If you click the </>Source Code, you can
find the complete code under the line Result.
Click the Result tab on the top bar, you will see the dashboard inserted. If you find that the layout of the Tableau dashboard seems strange, you may want to remind your readers to reload the webpage. This issue should be gone.