11 Replies Latest reply on Jun 21, 2018 11:00 AM by Evan McLain

    Integrating Tableau with Angular 2/Angular 4 application - Disposing viz

    A K

      Apologies if this is the incorrect place to post this. Please redirect me as needed. I've just been embedding Tableau into my Angular web application. The viz loads fine the first time, but when I try to leave and come back to the page, I get an error saying that there is already a viz object present in element 'body'.


      I am trying to do a viz.dispose() if the viz is not null, but even when I get the viz object present error, the viz var in my JS file still seems to be undefined. Why is that? How else do I access the viz object that has already been created?


      My JS file (tableau-initViz.js)

      function initViz() {

        var containerDiv = document.getElementById("vizContainer"),

         url = "https://MY-SERVER/views/ABCPrototypev1/ByXYZ",

         options = {

         hideTabs: true,

         onFirstInteractive: function () {

         console.log("Run this code when the viz has finished loading.");




        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




        var viz = new tableau.Viz(containerDiv, url, options);



      My index.html




      <script src="https://MY-SERVER/javascripts/api/tableau-2.min.js"></script>

      <script type="text/javascript" src="./assets/script/tableau-initViz.js"></script>




      My tableau.component.html

      <div id="vizContainer"></div>



      Edit: On further inspection, I've noticed that the iframe isn't actually being loaded inside the tableau.component.html vizContainer at all, but being inserted directly into the index.html body. How do I get the viz to load inside my chosen div?


      Message was edited by: A K