Help with Tableau JS API

Hi Folks! I have very little experience with code and I’m in over my head trying to implement a JS API.

I’m just trying proof of concept right now, and trying to get a public embed working using code provided in Tableau’s API. The example code can be found on this page:

https://help.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api_sample_basic_embed.htm

I’ve tried a few different combinations of HTML elements and JS run on page load but so far no luck. Currently my best guess is the following:

An HTML element on the page with the embed containing the following:

<script type="text/javascript"
	    src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
<div id="vizContainer" style="width:800px; height:700px;"></div>

And then a Run Javascript action when page is loaded containing the following:

'function initViz() {
            var containerDiv = document.getElementById("vizContainer"),
                url = "http://public.tableau.com/views/RegionalSampleWorkbook/Storms",
                options = {
                    hideTabs: true,
                    onFirstInteractive: function () {
                        console.log("Run this code when the viz has finished loading.");
                    }
                };

            var viz = new tableau.Viz(containerDiv, url, options);'

I have another Run JavaScript action right after that simply containing

initViz();

I’d be super grateful for any help!

1 Like

Here’s a little working proof of concept for others who are interested in seeing it setup. Definitely a few console errors but working enough to prove the concept.

2 Likes

This is super helpful. Thank you!

Hi Eric3,
Does this work only for public dashboards or private dashboards as well?

Ive tried this with my private dashboards but I could not get it to work. I changed the javascript src and the url to my dashboards info but it did not display. So I guess it has to do with authentication?

hi all

Just had the same question and found this post. Were you able to successfully integrate Tableau with Bubble in the end or still ended up with errors?

Would be great to get a view as we are looking at likely doing the same

Thank you

Before Bubble I was a public health data scientist for a larger geo-political jurisdiction and we heavily leveraged Tableau for internal and external reporting. I still have a good deal of affection for the product.

As soon as I can clear my current, very exciting, evening project, I am going to donate to the community a fully functioning Tableau Plugin that wraps all the features of their JS API.

2 Likes