This article describes how to go from a standard visualization:
To a visualization that includes images, such as brand logos, which will update along with the visualization if the data changes:
- A data set
- Images from a URL location (eg, imgur, Google Photos, Dropbox, etc.)
- Create a table that contains the URLs of the images by going to Table > Paste or Enter Table.
- From the object inspector, go to Inputs > DATA SOURCE > Paste or type data.
- Paste or type the item name and its associated URL into the sheet and click OK:
- If your table first appears with numbers in the first column, as seen below:
You will need to go to Inputs > DATA MANIPULATION and untick Automatically detect row and column names and select First row contains column names and First column contains row names so that your table appears as:
5. Create a table of the variable that you'll use to create the visualization. You can do this by dragging the variable onto your page:
6. Select the tables that were created in Steps 4 and 5 above at once, and go to Table > Combine Tables.
7. From the object inspector, ensure that Inputs > Combine Tables > Join direction > Side-by-side and Non-matching rows/columns > Matching only.
8. To sort the data from highest to lowest, you'll want to add some lines of code to the merged object. Select the merged table, and from the object inspector, go to Properties > R CODE and add this final line:
merged[order(merged[,2], decreasing = TRUE),]
In the code, I have used "2" to indicate that the table should be sorted on the second column of data. You may need to update this based on the column position of your numeric data.
9. The second column of the merged table will need to be extracted for the visualization. From the toolbar, go to Calculation > Custom Code and paste the following into the R CODE area:
sorteddata = as.numeric(merged[,2])
sorteddata = as.data.frame(sorteddata)
rownames(sorteddata) = rownames(merged)
In the first line of code, I have used "2" to reference the second column in the merged table again.
10. Go to Visualization > Bar Chart (or the visualization type of your choice).
11. From the object inspector, go to Inputs > DATA SOURCE > Output in 'Pages' and select the output created in Step 9.
12. Next, you will create the outputs that contain the images for your visualization. Go to Calculation > Custom Code.
13. Paste the following code into the R CODE area:
item = 1
src = merged[item,"Src"]
alt = rownames(merged)[item]
text = paste0(
<meta name="viewport" content="width=device-width, initial-scale=1">
rhtmlMetro::Box(text,text.as.html = TRUE)