4 Replies Latest reply on Jul 21, 2017 11:42 AM by Toby Erkson

    Use tableau in Angular 2 application

    Padmini Koderi

      Hi,

       

      I installed tableau desktop version, created a smaple graph and published it on to tableau online.

      Can anyone tell me how can I use this in my angular2 application?

       

      I was able to embed it into ASP.Net application but no luck with an angular2 app.

       

      Thanks.

        • 1. Re: Use tableau in Angular 2 application
          Tom W

          Given that you were able to embed it in the ASP.NET application, it sounds like you know what you're doing which is good.

          With that being said - why didn't it work in your Angular app? Did you get an error? What have you done to debug it?

          • 2. Re: Use tableau in Angular 2 application
            Padmini Koderi

            ForumsDeveloper PortalUse tableau in Angular 2 application

             

            I did not get any errors as I have not started incorporating it into my app.

             

            I don't have an idea on how to exactly proceed with integrating tableau to my angular2 app. I have pointers for angular 1 , but angular 2 being an entirely different one , I'm struck without any progress.

             

            Any directions on how can i proceed about this will be of help.

             

            thanks!

            • 3. Re: Use tableau in Angular 2 application
              Kenneth Aung

              I came across this while looking for a solution my self. After some research, it seems deceptively simple.

               

              See my Plunk

              https://plnkr.co/edit/ZSfSja?p=info

              • 4. Re: Use tableau in Angular 2 application
                Toby Erkson

                I recommend posting the code directly because it...

                • won't get lost
                • becomes searchable
                • is quickly visible/referable
                • doesn't require the reader to open another tab/window that could potentially be blocked.

                 

                Here's the above code:

                <!DOCTYPE html>
                <html>
                
                  <head>
                    <base href="." />
                    <script type="text/javascript" charset="utf-8">
                      window.AngularVersionForThisPlunker = 'latest'
                    </script>
                    <title>angular playground</title>
                    <link rel="stylesheet" href="style.css" />
                    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
                    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
                    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
                    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
                    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
                    <script src="config.js"></script>
                   
                    <!-- include tableaus standard js -->
                    <script src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
                   
                    <script>
                    System.import('app')
                      .catch(console.error.bind(console));
                  </script>
                  </head>
                
                  <body>
                    <my-app>
                    loading...
                  </my-app>
                  </body>
                
                </html>