Embed your Tableau dashboards !

Share this post

You like Tableau, but above all you would like to encapsulate your analyzes or Dashboards in your own portal or application. It’s pretty easy to do as long as you use the right API (provided by Tableau ).

To get started, go to the website of Tableau : https://onlinehelp.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api.htm

Everything is there … from the tutorial to the help (via the API reference). In short, it is the essential place that you have to go and see first. Moreover, this article has no ambition to replace this link but rather to quickly show how to obtain a result.

You are not an expert in Javascript? that’s okay… follow the guide and you’ll see how easy it is to use this API.

Before you start!

Use the right API

Before thinking of encapsulating a Dashboard, it must of course exist! and more particularly that it is deployed on a server. So we have at least three possibilities:

Depending on the server on which your Dashboard you will need to use a different JavaScript API. Here are the Javascripts calls that you will need to include depending on your use case:

With a Tableau On Premise server:

<script src="https://serveur_on_premise/javascripts/api/tableau-2.min.js"></script>

With a server Tableau Online:

<script src="https://online.tableau.com/javascripts/api/tableau-2.min.js"></script>

With a Tableau Public server:

<script src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>

Everything will therefore happen via calls to the JavaScript API. So don’t try to create IFRAMEs! instead we will include in our html page DIV tags that will interoperate with the API code Tableau .

Get the URL of your dashboard

You must indeed retrieve the URL of your viz or Dashboard. To do this, I advise you to use the Share function which allows you to copy / paste the right link directly (see below):

Here you are ready!

Step 1: Encapsulate in the simplest device

Now let’s edit the code of the HTML page in which you want to encapsulate your Dashboard. Here I will take a blank page so as not to pollute the code with an external site.

<!DOCTYPE html>
<html>

<head>
    <!-- a utiliser dans Tableau Online -->
	<script src="https://online.tableau.com/javascripts/api/tableau-2.min.js"></script>
    <script>
        var viz,workbook, activeSheet;
		
		function initViz() {
			myurl="https://eu-west-1a.online.tableau.com/t/benoitcayla/views/2019_1_JO_v2_6/Rsultats?iframeSizedToWindow=true&:embed=y&:showAppBanner=false&:display_count=no&:showVizHome=no";
            var containerDiv = document.getElementById("vizContainer"),
                url = myurl,
                options = {
                    hideTabs: true,
					hideToolbar: true
                };
            viz = new tableau.Viz(containerDiv, url, options);
        }
    </script>
</head>

<body onload="initViz();">
    <div id="vizContainer" style="width:800px; height:860px;"></div>
</body>

</html>

You see the code is really simplistic:

  • I have of course the reference (see below) to the API
  • Then a Javascript block allows you to specify the methods of calling the URL of the Dashboard (in the url variable). In this regard, you just have to change the URL of the code here with the one you got in the previous chapter.
  • To finish the body of the file is simplified to its extreme, nevertheless 2 things are essential:
    • The call to the opening (onload) of the function that initializes the API with the Dashboard
    • The Dashboard container which is nothing other than a DIV tag

Step 2: Add interaction

Our Dashboard is now encapsulated in a page that is not managed by the solution Tableau . We will see how to add some buttons that will allow you to interact with the Dashboard from the page.

Let’s start with something simple and unidirectional and add the standard export and data visualization buttons like below:

Nothing could be simpler once again, for that we are going to add 3 javascripts functions which will make direct calls to the API:

<head>
    <title>Basic Embed</title>
    <!-- a utiliser dans Tableau Online -->
	<script src="https://online.tableau.com/javascripts/api/tableau-2.min.js"></script>
    <!-- a utiliser dans Tableau Public -->
	<!-- <script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script> -->
    <script type="text/javascript">
        var viz,workbook, activeSheet;
		function initViz() {
			myurl="https://eu-west-1a.online.tableau.com/t/benoitcayla/views/2019_1_JO_v2_6/Rsultats?iframeSizedToWindow=true&:embed=y&:showAppBanner=false&:display_count=no&:showVizHome=no";
            var containerDiv = document.getElementById("vizContainer"),
                url = myurl,
                options = {
                    hideTabs: true,
					hideToolbar: true
                };
            viz = new tableau.Viz(containerDiv, url, options);
        }
		
		function exportPDF() {
			viz.showExportPDFDialog();
		}      
		function exportImage() {
		  viz.showExportImageDialog();
		}      
		function exportData() {
		  viz.showExportDataDialog();
		}      
    </script>
</head>

<body onload="initViz();">
	<button onClick="exportPDF();">Export PDF</button>
	<button onClick="exportImage();">Export Image</button>
	<button onClick="exportData();">View data</button>
    <div id="vizContainer" style="width:800px; height:860px;"></div>
</body>

</html>

You also need to add the 3 buttons in the pure HTML code.

Step 3: Let’s add an external filter

The added buttons are very practical but do not act on the data itself. We are going to add two buttons that will allow you to add a filter on the data and remove it. For this we will use the method

activeSheet.getWorksheets().get("Nom de la Viz dans le TB").applyFilterAsync( "Nom du champ";,  "Valeur du filtre",  tableau.FilterUpdateType.REPLACE);</pre>

In the example above we add a button that filters on the city of London only. The next button cancels this filter.

Here is the code:

This should get you started in Embedded Analytic! Note that if – unlike this example – you use a Public Dashboard, you may have certain restrictions in terms of interactions.

<!DOCTYPE html>
<html>

<head>
    <title>Basic Embed</title>
    <!-- a utiliser dans Tableau Online -->
	<script src="https://online.tableau.com/javascripts/api/tableau-2.min.js"></script>
    <!-- a utiliser dans Tableau Public -->
	<!-- <script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script> -->
    <script type="text/javascript">
        var viz,workbook, activeSheet;
		
		function initViz() {
			// Sur Tableau Public
			// myurl="https://public.tableau.com/shared/87NFGWSKK";
			// Sur Tableau Online
			myurl="https://eu-west-1a.online.tableau.com/t/benoitcayla/views/2019_1_JO_v2_6/Rsultats?iframeSizedToWindow=true&:embed=y&:showAppBanner=false&:display_count=no&:showVizHome=no";
            var containerDiv = document.getElementById("vizContainer"),
                url = myurl,
                options = {
                    hideTabs: true,
					hideToolbar: true,
                    onFirstInteractive: function () {
                        workbook = viz.getWorkbook() ;
						activeSheet = workbook.getActiveSheet() ;
                    }
                };
            viz = new tableau.Viz(containerDiv, url, options);
        }
		
		function FilterSingleValue() {
			activeSheet.getWorksheets().get("Par JO").applyFilterAsync(
				"Ville JO", 
				"London",
				tableau.FilterUpdateType.REPLACE);
		}
		
		function clearFilter() {
			activeSheet.getWorksheets().get("Par JO").clearFilterAsync("Ville JO");
		}
		function exportPDF() {
			viz.showExportPDFDialog();
		}      
		function exportImage() {
		  viz.showExportImageDialog();
		}      
		function exportData() {
		  viz.showExportDataDialog();
		}      
		
    </script>
</head>

<body onload="initViz();">
	<button onClick="FilterSingleValue();">London Only</button>
	<button onClick="clearFilter();">Clear filter</button>
	<button onClick="exportPDF();">Export PDF</button>
	<button onClick="exportImage();">Export Image</button>
	<button onClick="exportData();">View data</button>
    <div id="vizContainer" style="width:800px; height:860px;"></div>
</body>

</html>

As usual you can find the codes in Github .

Share this post

Benoit Cayla

In more than 15 years, I have built-up a solid experience around various integration projects (data & applications). I have, indeed, worked in nine different companies and successively adopted the vision of the service provider, the customer and the software editor. This experience, which made me almost omniscient in my field naturally led me to be involved in large-scale projects around the digitalization of business processes, mainly in such sectors like insurance and finance. Really passionate about AI (Machine Learning, NLP and Deep Learning), I joined Blue Prism in 2019 as a pre-sales solution consultant, where I can combine my subject matter skills with automation to help my customers to automate complex business processes in a more efficient way. In parallel with my professional activity, I run a blog aimed at showing how to understand and analyze data as simply as possible: datacorner.fr Learning, convincing by the arguments and passing on my knowledge could be my caracteristic triptych.

View all posts by Benoit Cayla →

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Fork me on GitHub