Intellipaat Back

Explore Courses Blog Tutorials Interview Questions
0 votes
2 views
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)
edited by

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.

Get trained to use Tableau with full potential through Tableau Online Training.

Related questions

0 votes
1 answer
asked Dec 16, 2020 in BI by Chris (11.1k points)
0 votes
1 answer
0 votes
1 answer
0 votes
1 answer
0 votes
1 answer

31k questions

32.8k answers

501 comments

693 users

Browse Categories

...