Skip to content

Instantly share code, notes, and snippets.

@andre347

andre347/index.html

Created Apr 5, 2020
Embed
What would you like to do?
<!-- loading the tableau js file -->
<script src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
<!-- setting up the containers for the tableau viz and the buttons -->
<!-- we assign IDs so we can grab on to them in JS -->
<!-- we also add some styles which mean the buttons show up on the right hand side of the dashboards -->
<div id="rootTableau" style="display: flex;">
<div id="vizContainer"></div>
<div
id="buttonContainer"
style="display: flex; flex-direction: column;"
></div>
</div>
<!-- This is where the JS starts -->
<script type="text/javascript">
// initialise the viz variable, which will hold the tableau visualisation
let viz;
// grab the vizContainer container so we can add the visual in it with JavaScript
let containerDiv = document.getElementById("vizContainer");
// define the options for each viz (such as no toolbar, what device specific layout should be)
// change the height and the width so the dashboard looks good on the page
let options = {
hideTabs: true,
hideToolbar: true,
width: "800",
height: "800",
device: "desktop",
onFirstVizSizeKnown: function() {
// grab all the togglebuttons
// set their visability to visible
// the reason being is that we want to buttons only show when we know when the viz has loaded and has height and width. Otherwise the buttons jump around on the page.
const toggleButton = document.querySelectorAll(".toggleButton");
toggleButton.forEach(button => (button.style.visibility = "visible"));
}
};
// create an array of URLS, one for each dashboard, these will then also get buttons
const dashboards = [
{
url: "your Url",
label: "Label of Button 1"
},
{
url: "your Url",
label: "Label of Button 2"
}
];
// define a function that will run the moment the document has finished loading - this will hold the very first visual in the array
function initViz() {
if (viz) {
// if viz exists, get rid of it and rerender
viz.dispose();
}
viz = new tableau.Viz(containerDiv, dashboards[0].url, options);
}
function createButtons() {
const buttonContainer = document.getElementById("buttonContainer");
// loop over the dashboards array and create buttons for each dashboard
dashboards.map((dashboard, index) => {
const btn = document.createElement("button");
btn.style.visibility = "hidden";
btn.className = "toggleButton";
btn.innerText = dashboard.label;
btn.addEventListener("click", () => {
if (viz) {
// if a viz is already loaded, remove it and load the one that's linked to the button
viz.dispose();
viz = new tableau.Viz(containerDiv, dashboard.url, options);
}
});
buttonContainer.appendChild(btn);
});
}
// once the document has loaded, execute the initViz function for the first viz and also create the buttons
document.addEventListener("DOMContentLoaded", () => {
createButtons();
initViz();
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.