1 Reply Latest reply on Jan 7, 2016 10:07 PM by Alfredo Pirrone

    Dynamic Images: Displaying in a dashboard an image (photo or picture) linked to a filter or sheet

    Alfredo Pirrone

      SCOPE

       

      Read this document if you want to include in your dashboard a dynamic image that will change as you select different values for a dimension. Examples: You are building a dashboard that presents the performance of a group of salespersons and you want to display the picture of the  one selected; or a dashboard that presents the strength of your company’s brands and you want to include the logo for the selected brand.

       

      For a more general discussion on images on dashboards you may prefer to read Using Images in Tableau  from Chris Love.

       

      At end I cover some additional issues like setting a default picture or adding a frame to images displayed when using URL Actions.

       

      HOW TO SELECT THE BEST APPROACH FOR YOUR CASE

       

      In my opinion, there are two factors that will impact your choice for implementing a dashboard that uses dynamic images as described above:

       

      1. How do you want to control the selection?
        1. Using a filter.
        2. Hovering or selecting a mark on a sheet.
      2. How many pictures do you need to display? Do you know them at dashboard creation time?
        1. Small quantity of known pictures.
        2. Large or undefined number of pictures or unknown pictures.

       

      The four combinations lead to three case studies that have already been addressed by community members. I reference those I found particularly useful when building the sample workbooks attached.

       

      CASE  A (1a + 2a): You want to control the selection using a filter, and you are using a small quantity of known pictures.

       

      In this case, please read QT: Dynamically Switch Images Using Filter, where Shawn Wallwork gave a step by step procedure to create dynamic images based on map background images.

       

      CASE  B (1b + 2a,2b): You want to control the selection by hovering or selecting a mark on a sheet.

       

      This behavior can be directly achieved using  URL Actions.

      Check these references:

      1. Dynamic images from URLs. Here Russel Christopher  mentioned how to solve the problem using dashboard actions.
      2. Study  the visualization: I Love NY Skyscrapers. This is a beautiful viz developed by Peter Gilks. He explained what he did in his blog.

       

      There is a limitation: if no value is selected or hovered upon, no URL Action is initiated and you are left with the last image selected. Santhosh Thadakamalla noticed this in Dynamic images from URLs. , but this question still needs an answer.  We need an extension to Tableau functionality to manage this  (vote for it!  Clear web pages on dashboards when URL action is null or no selection. Alex Blakemore already created this idea.)

       

      CASE “C” (1a + 2b): You want to control the selection using a filter, and you need to handle and undefined number of unknown pictures or large number of pictures.

       

      In my opinion, Tableau is weak to properly address this requirement, as you must physically interact with a sheet to initiate an URL Action. It is not enough to change the value selected using a filter or other means.

      I have created an idea requesting to add to Tableau the capacity of activating URL Actions on change of a mark value. Please, vote for it if you agree with me! (See “Include option to run a URL Action on changes in values of source sheets”)

       

      As a consequence, you only have two options: either you change your mind and redesign your dashboard to follow CASE A or B, or you may use a filter and try to find a way to activate the URL Action as soon as possible to update the image.

       

      This is exactly what Harley Ellemberg ended up doing  in dynamic image based on filter selectionIn this thread Harley Ellemberg discussed the matter with  Shawn Wallwork and ended up with a workaround to create a dynamic image that responds to a filter in the dashboard. It is not perfect, but still a decent solution.

       

      How to respond with a default image when the selected item is not associated to any picture? How to add a frame, etc.

       

      When using a URL Action, you may run into the issue of missing pictures.  As you will typically assemble the image file name dynamically at the URL field of the Edit URL Action pane, chances are the image file you are looking for is missing. You would like to catch this error and display a default image.

       

      One way to capture the error is by changing the URL reference from the image file name to an html module that will deal with the error. You will pass the image file name to the html code (or you will pass data required to build the name)

       

      The html module may be hosted at the same site where your images are.

       

      And this is my code to sort out the issue:

       

      <!DOCTYPE html>

      <html>

         <head>

              <title>Display Image</title>

              <style>

              img {

              width: auto;

              border: none;

              padding: 4px;

             

              }

              </style>

          </head>

          <body>

        <img id="myImage" src="" onerror="imageNotFound()" alt="Please wait .." >

              <script>

              // Parse fileName and imageHeight from the call

          var parameters = location.search.substring(1).split("&");

             var temp = parameters[0].split("=");

             var fileName = unescape(temp[1]);

             temp = parameters[1].split("=");

             var imageHeight = unescape(temp[1]);

       

             

        // Display Image

              var filePath = “"; // ** Set directory that contains images

        document.getElementById("myImage").height = imageHeight;

        document.getElementById("myImage").src = filePath + fileName;

       

        // Capture missing images to display default

          var errorLoadingPicture = false;

        function imageNotFound() {

          if (!errorLoadingPicture) {

                errorLoadingPicture = true

                // ** MODIFY NEXT LINE TO SPECIFY THE NAME OF YOUR DEFAULT IMAGE

              document.getElementById("myImage").src = filePath + "NoImage.jpeg";

          }

        }

            </script>

         </body>

      </html>

       

      To use it:

      1. Copy the code to a text file and save it as .html
      2. Copy the file to the place where your pictures are
      3. Add the call to the URL Action as shown in the attached example
      4. Tune the image size parameter

       

      Borders and more

       

      Introducing HTML/JS code sent us to web development. In my previous code you may have noticed a section called <style>. By modifying the code line

       

              border: none;

       

      with

       

              border: 2px solid blue;

       

      you will get a blue border of 2 pixels around your image. In general, you could modify many characteristics of the border or even add new elements to the view by modifying the html file. If you want to DIY and you know little about this, check the tutorials at w3schools.com . Otherwise, just get some support from an expert. It won’t take him long to tailor the code to your needs.

       

      I thank you if you read this far! and I hope this contribution saves you some time and frustration.

       

      Best regards,

      Alfredo