6

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.

bdev
  • 81
  • 1
  • 5
  • Assuming it actually creates a global `tableau` reference, the reference should be available to any script at any time. Just start using it: `var viz = new tableau.Viz(containerDiv, url);`. – The Head Rush Apr 11 '17 at 20:35

3 Answers3

1

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.

Pratyush Verma
  • 93
  • 1
  • 3
  • 11
1

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.

Nambi N Rajan
  • 491
  • 5
  • 15
0

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.

hmartos
  • 861
  • 2
  • 10
  • 19
  • Is it for custom tableau servers or only for public urls? I wonder because on npm page it says "public" APIs. We will probably use it next project if it doesn't have to be public API. – firstChild May 18 '22 at 20:09
  • @firstChild the most basic example uses a public Tableau visualization, but it can be used with private visualizations. In fact, the module was created to embed private visualizations through the different [Configuration options](https://github.com/nfqsolutions/ngx-tableau#configuration-options) – hmartos May 20 '22 at 12:46
  • Ok thanks. I can't find license information on github, can you maybe add it? Thanks. – firstChild May 22 '22 at 13:10
  • 1
    Thank you for raising this issue @firstChild, the MIT LICENSE file was included in the module, but not included in the root of the repository, so GitHub didn't show it. It is fixed now. – hmartos Aug 20 '22 at 07:24