basic testing of Tableau API
A Pen by Steve Bastable on CodePen.
<div class="buttons"> | |
<button class="apply_RegionFilter btn" style="background-color: #a8dba2; ">Europe</button> | |
<button class="apply_RegionFilter btn" style="background-color: #f5a8a3; ">Middle East</button> | |
<button class="apply_RegionFilter btn" style="background-color: #afc8e3; ">The Americas</button> | |
<button class="apply_RegionFilter btn" style="background-color: #d0bde0; ">Oceania</button> | |
<button class="apply_RegionFilter btn" style="background-color: #ffc898; ">Asia</button> | |
<button class="apply_RegionFilter btn" style="background-color: #cdb2ac; ">Africa</button> | |
<button class="selectAll_RegionFilter btn btn-outline">All</button> | |
</div> | |
<div id="tableauViz"></div> |
$(document).ready(function() { | |
var viz, workbook, activeSheet; | |
var placeholderDiv = document.getElementById("tableauViz"); | |
var url = "https://public.tableau.com/views/WorldIndicators/GDPpercapita"; | |
var options = { | |
width: "100%", | |
height: "600px", | |
hideTabs: true, | |
hideToolbar: true, | |
onFirstInteractive: function() { | |
workbook = viz.getWorkbook(); | |
activeSheet = workbook.getActiveSheet(); | |
} | |
}; | |
viz = new tableau.Viz(placeholderDiv, url, options); | |
$(".apply_RegionFilter").click(function() { | |
activeSheet.applyFilterAsync( | |
"Region", | |
$(this).text(), | |
tableau.FilterUpdateType.REPLACE | |
); | |
}); | |
$(".selectAll_RegionFilter").click(function() { | |
activeSheet.clearFilterAsync("Region"); | |
}); | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> | |
<script src="https://public.tableau.com/javascripts/api/tableau-2.2.2.min.js"></script> |
body { | |
background-color: '#FFFFFF'; | |
} | |
.btn { | |
margin: 5px; | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> |
basic testing of Tableau API
A Pen by Steve Bastable on CodePen.