0 votes
1 view
in BI by (17.6k points)

Has anyone tried building an Angular2 application with Tableau visualizations integrated into 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. 

1 Answer

0 votes
by (47.2k points)

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 the global variable you can access it inside a component.

Related questions

0 votes
1 answer
0 votes
1 answer
0 votes
1 answer
Welcome to Intellipaat Community. Get your technical queries answered by top developers !


Categories

...