2 Replies Latest reply on May 29, 2018 9:37 AM by Man Tsui

    Dashboard Automatic Switching

    john.dan

      We have a requirement to display a dashboard on a TV screen.  The dashboard is simple progress bar that shows the current status of an item and all the information comes from a table, so, the performance is very good and does not take any time to load at all.

       

      This dashboard is embedded into HTML web page and web page is refreshed automatically every 60 seconds. This all works fine.

       

      The new requirement is : We can have up to 40 items that we need to list in the dashboard. If we list all of them , we have to reduce the size of the bars; and it may not the best for viewing for our users. Ideally, we would like to show 10 on each page\dashboard.

       

      So, the idea is, to create multiple dashboards and each dashboard can have maximum 10 items ( I can limit this using filter)

      So, the first 10 will be in dashboard 1, the next 10 will be in dashboard 2 etc..

       

      So, the question is how can I get the dashboards rotate\switch between different dashboards(dashboard1\dashboard2\dashboard3\dashboard4) etc

      while staying in FULL Screen.

       

      Currently, I am using the below code, to display a single dashboard and also, have it refresh, every 60 seconds.

       

      <!DOCTYPE html>

      <html lang="en">

        <head>

        <title>Tableau JavaScript API</title>

        <script type="text/javascript" src="http://servername:9830/javascripts/api/tableau-2.min.js"></script>

        </head>

        <body>

        <div id="tableauViz"></div>

      <script type='text/javascript'>

       

       

      var placeholderDiv = document.getElementById("tableauViz");

        var url = "http://servername:9830/views/Cities/dashboard";

       

        var options = {

          hideTabs: true,

          width: "100%",

          height: "1000px"

        };

       

        var viz = new tableauSoftware.Viz(placeholderDiv, url, options);

       

      setInterval(function () {viz.refreshDataAsync() }, 60000);

       

      </script>

      </body>

      </html>

       

      I am looking for something similar that can also switch between different dashboards in the same workbook.

      we do not want to loose the FULL Screen mode during this switching.

       

      Also, if possible, can we make it not to switch to the dashboard, if it is empty., i.e if there is no data in dashboard3, we do not have

      to rotate to dashboard3. It's okay if this cannot be done easily, I can handle this in the source data.

       

      Any help is greatly apprecipated!!

        • 1. Re: Dashboard Automatic Switching
          Patrick A Van Der Hyde

          moving this to the Javascript API area.  This has been acheived here at Tableau in our support group.  I'll ask around to see if someone familiar with that code can share their wisdom.

           

          Patrick 

          • 2. Re: Dashboard Automatic Switching
            Man Tsui

            Hi John,

             

            One similar html solution you may want to explore is html + javascript solution with reveal.js.

            https://revealjs.com/

             

            Part of the reveal.js library also has "autoslide" feature (sample code below):

             

            // Loop the presentation

            loop: true,

             

            // Number of milliseconds between automatically proceeding to the

            // next slide, disabled when set to 0, this value can be overwritten

            // by using a data-autoslide attribute on your slides

            autoSlide: 5000,

             

            // Stop auto-sliding after user input

            autoSlideStoppable: false,

             

            // Use this method for navigation when auto-sliding

            autoSlideMethod: Reveal.navigateNext,

             

            For your reference, below is one of my own Tableau +  Reveal.js with (autoslide feature) example:

            https://mantsui.github.io/Tableau_Web_Portal_Autoslide/

            (Works better on Chrome or Firefox)

            <It is automatically sliding every 5 seconds.>

             

            I got this idea from Jeffrey Shaffer who integrated reveal.js and Tableau dashboards.

            Thanks to the Jeffrey Shaffer earlier work:

            https://www.dataplusscience.com/TableauReveal2.html

            1 of 1 people found this helpful