Has anyone tried building an Angular2 application with tableau visualizations integrated in it using the Tableau JavaScript API?
According to the documentation, you're supposed to include the following script in your file which will create a tableau global variable:
<script src="https://YOUR-SERVER/javascripts/api/tableau-2.js"></script>
I'm not sure how to access this global variable within an Angular2 class.
Im using ng2-admin template and I was able to successfully integrate Tableau and Angular2.
Copy this script <script src="https://YOUR-SERVER/javascripts/api/tableau-2.js"></script> in index.html and paste it within its <body>. Then copy the embed code in any of the components html file within a div.
declare var tableau: any;
viz: any;//Inside your component class
initViz() {
const containerDiv = document.getElementById("vizContainer");
const vizUrl="https://public.tableau.com/views/WorldIndicators/GDPpercapita";
const options = {
width: containerDiv.offsetWidth,
height: 600,
// hideTabs: true,
// hideToolbar: true,
onFirstInteractive: function (ev) {
console.log(ev);
}
};
if(viz != null) { // viz is undefined on both the first and second page loads - even though second page load throws a 'viz already present' error
viz.dispose();
}
var viz = new tableau.Viz(containerDiv, vizUrl,options);
}
ngOnInit() {
this.initViz();
}By declaring global variable you can acces it inside component.
For anyone who wants to embed Tableau visualizations in Angular apps, ngx-tableau provides a simple interface to the Tableau JavaScript API.
It has multiple options for configuring the connection to Tableau Server, handling authentication tickets, adding filters to reports, and managing different sites.
Disclaimer: I am the main contributor to the library.