The following blog depicts the technique created by Alex Jones (@jusdespommes) blog about “How to… create a chart from an image in Tableau!”.
Show/Hide Containers
Tableau 2019.2 has introduced an option to show/hide containers (when the container is a floating type). Many experts have come up with different use cases such as hiding and showing the filters, parameters, or even a worksheet with a click which occupies much space in the dashboard using this feature.
This feature is pretty simple to use and comes in handy when we want to save some space in our dashboards.
How to Swap image in Bar Chart?
1.Create a simple bar chart in Tableau 2019.2. We have used “Top 5 Grossing Games Worldwide 2018” to create a bar chart and sorted based on the revenue.
2.Remove the label, header and export the worksheet to image. Worksheet > Export > Image (Choose ‘view’ in Export Image dialog box)
3. Open Photopea, which is an online photo editor and open the saved worksheet image.
File > Open > Image
4. Now, download 2 images from online which we are going to use for bar chart.
5.Copy and paste image 1 on top of the bar image. Now we will be having two layers of images one above another.
(We can even re-position, crop the image if needed)
6.Choose ‘Magic Wand’ from the tool bar at left side. Click on the image, and we can see the selection in dotted lines.
7.Choose the top layer (image 1) and click delete. Now we can able to get the below image.
8.The background of the image needs to transparent. So, delete the below layer (bar chart image) using delete icon at the bottom right corner.
9.Now, choose File > Export as > .PNG to save the image as .png format (this will retain the transparent layer)
10.Repeat the same steps with image 2 to get the same effect.
Note: Keep the same resolution and image size as the previous one.
10.1.Now, open Tableau Desktop and bring in the image as floating type.
11.We have to position the bar chart over the image. To make it easy, decrease the opacity of the bar chart and give border.
12. Add labels and tooltip to the bar chart.
13.Now the dashboard looks like this. We can able to hover on bars to see tooltip.
14.Now, comes the trick of using ‘Show/Hide Containers’ to swap image. Bring a container to floating and add image 2 to the container. (Set the padding to zero)
15.Next, we have to position the both images and the bar chart one above another. To make it easy, use x, y axes and size w, h to position accurately.
Note: Make sure the position of the 3 objects (Use Floating Order) follows the below order as all are in floating.
- Image 1 (Below layer)
- Image 2 inside container (Middle layer – where show/hide option is to be used)
- Bar Chart (Top layer)
16.Choose the container and right click at the top right corner. Enable ‘Add Show/ Hide Button.’ Now we can see a floating button.
17.We can customize the button by adding image and tooltip to buttons.
18.We have used below customized images (created with PowerPoint) for buttons to swap between 2 images.
19.Another simple trick is that we can control the transparency of the image by adjusting the opacity of the bars.
20.Take a look at the final dashboard….
Back
