How to Switch Logos and Images Based on User Selections
Awesome job - you've created a dashboard which lets your viewers choose from menu which brand they want to look at and get the latest up-to-date information for. You want to make your dashboard a little more sophisticated by having the logo on the page change when viewers switch between brands. Here's a post that'll show you how to do this with a little bit of code.
Displayr's Conditional Image visualization allows you to add images to your document which change when the data changes in response to filters or other interactive components on your page. For instance, you could display a thumbs-up when your result is higher than expected, or a thumbs-down when your results are lower than expected. In this article, we are going to use this same tool to switch between different brand logos based on your viewer's selection.
For this to work, you need three components:
- An interactive menu on your page which lets you choose the brand
- Some R Code which translates the menu selection into a number
- A Conditional Image which changes logos based on the numbers
It's important to remember that all of these elements need to be on the same page. Displayr's interactive features work on a page-by-page basis when your document is published as a web page.
Step 1 - Create your menu
If you've been designing a dashboard which can show results for one of several brands based on a menu selection, then you probably already have this. If that's the case, then jump to Step 2 below.
If you are starting out from scratch, you'll need to set up a combo box or a list box to your page. These two types of menus will both do the same job - the difference between them is how they look on your page.
- Select Insert > Control (More) > Combo Box or List Box.
- Click into Control > Item list in the Object Inspector on the right of the screen, and enter the list of brands that you want to be able to switch between. Each item should be separated by a semi-colon (;).
- (Optional) Change the formatting options in the Control section (e.g. fonts, colors, etc).
- Click into Properties > General > Name, and change it to "brand.switch". It doesn't matter what you call it, so long as you remember this name for the next step.
In this example I will use three brands: Coke, Diet Coke, and Pepsi.
Step 2 - Translate your brands into numbers
The conditional image visualization tool chooses which image to display based on a numerical value. Meaning that all we need to do is choose a number for each brand, so that our visualization knows which image to show.
- On the same page, select Insert > R Output.
- Paste in the code below.
- Click Calculate.
- Select Appearance > Hide. This prevents the number from showing up with the document is published.
The code you need to use is like this:
brands = c("Coke", "Diet Coke", "Pepsi") current.brand = match(brand.switch, brands)
The first line of the code lists the brands in the same order as they appear in your menu from Step 1. The second line of code looks up the position of the selected brand in the list. So if the user selects "Coke" the value will be 1, if they select "Diet Coke" the value will be 2, and so on.
Now, if you change the menu selection, you should see the number in the output update itself.
Step 3 - Create your image
The final stage is to create the conditional image visualization, and then connect it to the number above in Step 2. Importantly, your images must be specified by URLs. That is, they need to be hosted on the web somewhere, and you need to copy in the links.
- Select Insert > Visualization > Conditional Image.
- Change Inputs > DATA SOURCE > Data source to Use an Existing R Output.
- Click into Inputs > DATA SOURCE > Input data and select the R Output that you created in Step 2 above (in this example it is called current.brand).
- Change Inputs > OUTPUT > Image type to Custom Images.
- Paste the URL of the image for the first brand into Default image.
- Change Threshold 1 to the number 2
- Paste the URL for the second brand logo into Image 1.
- Change Threshold 2 to the number 3
- Paste the URL for the third logo into Image 2.
Here is the appearance of my settings for this example: