Forum Academy Marketplace Showcase Pricing Features

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!

2 Likes

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?