9 Replies Latest reply on Nov 29, 2018 11:23 AM by Raleigh Chen

    JavaScript API - Viz Loading But Blank?

    Melanie Walsh

      So I'm using the Tableau JavaScript API for the first time and running into a bit of trouble.

       

      The code for the sample Tableau viz loads and works fine on my website. But when I use the URLs to my own visualizations, the Tableau viz will load but be blank inside. The content isn't there. But when I go fullscreen, the content suddenly appears and stays there even when I exit out of full screen. Does anyone have any idea what's going on or how I might be able to fix this problem? The code I'm using is below:

       

      <script src="https://public.tableau.com/javascripts/api/tableau-2.2.2.min.js"></script>

      <script>

              function initViz() {

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

                      url = "https://public.tableau.com/views/BlackLivesMatter-Baldwin-Top-Tweets/TypeofTweet",

                      options = {

                          hideTabs: true,

                          onFirstInteractive: function () {

                                console.log('loaded!');

                                workbook = viz.getWorkbook();

                                activeSheet = workbook.getActiveSheet();

                          }

                      };

       

       

                  // Create a viz object and embed it in the container div.

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

              }

       

       

      </script>

       

       

      <body onload="initViz();">

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

      </body>

        • 1. Re: JavaScript API - Viz Loading But Blank?
          Jeff Strauss

          Hi there.  The part about it going fullscreen and the content then appears is a bit confusing.  But just as a thought, can you go to internet options and try and add the first part of your url onto the trusted sites and see if this helps?  Maybe the JS is being prevented from running for some reason.

          • 2. Re: JavaScript API - Viz Loading But Blank?
            Melanie Walsh

            Thanks for your response, Jeff.

             

            Just a quick clarification. Would changing the internet options be something I do within Tableau Public or my web browser? For what it's worth, I'm currently running a local web server where I'm testing the JavaScript on my website.

            • 3. Re: JavaScript API - Viz Loading But Blank?
              Jeff Strauss

              It would be in your web browser I think, as this is where the JS runs.  This is where it's at within IE.

               

              • 4. Re: JavaScript API - Viz Loading But Blank?
                Lukas Kulhanek

                I am having the more or less exact same problem (thanks for the hint, that going full screen shows the content, did not see this before), sample content from tableau public is working, content from my server only shows the controls bar and a blank space until changing to full screen.

                In addition, I am using trusted authentication, to login to the server automatically, which is working fine.

                 

                Adding the site to trusted sites does not help. (for chrome go to chrome://settings/system and click on "Proxy Settings)

                Refreshing the view does not change anything, it seems going fullscreen is the only thing that has an impact, although it is rendering slightly wrong then. Some containers are not being loaded until the view has been reset. I already opened an issue about that here: Dashboard containers (or sheets) in embedded stories sometimes not loading when using automatic size

                 

                Edit: Clicking "View: Original" (hope this is the correct translation from German version) also loads the view correctly. Downloading anything is not working.

                 

                Jeff Strauss wrote:

                 

                This is where it's at within IE.

                Internet Explorer? Are you really still using it? :-P

                • 5. Re: JavaScript API - Viz Loading But Blank?
                  Melanie Walsh

                  It's really frustrating! Thanks for adding your experience.

                   

                  So I ended up changing the size of my viz from "Automatic" to "Range." That suddenly allowed it to load correctly. But that also seems like a bug.

                  • 6. Re: JavaScript API - Viz Loading But Blank?
                    Lukas Kulhanek

                    Melanie Walsh wrote:

                     

                     

                    So I ended up changing the size of my viz from "Automatic" to "Range." That suddenly allowed it to load correctly. But that also seems like a bug.

                     

                    Will try that, when I can not find any other way to make it work. Thanks. Unfortunately, this will cause many more problems later on, when our customers start complaining about different screen sizes...

                     

                    In the meantime, I tried to refresh the workbook right after it has been loaded (mentioned here https://gist.github.com/russch/7451465#file-gistfile1-js-L33) via

                     

                    onFirstInteractive: function () {
                          viz.refreshDataAsync();
                    }
                          
                    

                     

                    ...but it does not change a thing, even though the loading animation is shown once more.

                     

                     

                    There seem to be other suffering from problems caused by the same bug:embedded tableau blank until undo

                    • 7. Re: JavaScript API - Viz Loading But Blank?
                      Jochem Donkers

                      Hi Melanie,

                       

                      In your code you didn't specify height or width.  If you inspect your website (ctrl+shift+i) and go to the container where the viz lives, you might see:

                      visibility: hidden, width: 1px, height: 1px.

                       

                      tableau_viz_hidden1.png

                      tableau_viz_hidden.png

                       

                       

                      Adding the width and height to the options in the javascript code could resolve this issue.

                       

                       

                      Good luck,

                       

                      Regards,

                       

                      Jochem

                      • 8. Re: JavaScript API - Viz Loading But Blank?
                        Raleigh Chen

                        If you're using the Javascript API, you don't control what the display block size width/height.  It's generated by the Tableau JS API.  I'm encountering this same issue and it started after moving to Tableau 2018.2 server.  Our previous 10.5 server with the exact same content, exact same HTML (we're running parallel right now) does not have this issue.

                         

                        I'm convinced it's something wrong on the server, but I can't verify.  For me, it's only on certain visualizations also... not all of them.  I'm trying to figure out what is causing it, but I'm at a loss.

                         

                        To recap, it's not browser specific (tried it in Chrome and in IE, doesn't work in either).  Does seem to exist on 2018.2 , but not on 10.5.  Also, the visualization renders perfectly if you resize the div container of the visualization (or use the full screen button in the Tableau embedded toolbar) and will continue to render just fine, even if you resize it back to the way it was... so I don't think it's a View issue.

                         

                        Anyone have any ideas?

                         

                        (black border added for bounding)

                        • 9. Re: JavaScript API - Viz Loading But Blank?
                          Raleigh Chen

                          Hey, I'm running into the same problem, but I've kind of rigged a workaround.  Since resizing the window causes it to show up, you can put the following line at the end of your onFirstInteractive function and see if it works.  I can't test it because this particular visualization is showing up for me just fine, but when I tested it on one of mine that wasn't showing up, it worked.

                           

                                                    viz.setFrameSize(containerDiv.clientWidth, containerDiv.clientHeight);

                           

                          It still looks like a bug of some sort, but I can't pin down what causes it.