Enhancing Your Data Visualizations with Custom Images
In the dynamic world of business intelligence, effective visualization tools are crucial for insightful data presentation. A key aspect of elevating these presentations involves integrating images directly into your data grid and custom HTML widgets. Here’s a concise guide on how to enrich your BI visualizations with images from your dataset.
Basic Integration of Images
The initial step in incorporating images into your visualizations is to ensure your dataset includes a column with image links, which we will refer to as <Image>
. To display these images within a widget, you will need to format these links into HTML. This can be achieved using a simple concatenation formula:
CONCAT('<img src="', <Image>, '" alt="<insert text>">')
This formula transforms the URL into an HTML image element, making it readable and renderable within most BI tools.
Here is an example of a datagrid with two image fields:
Customizing Image Appearance
To further customize the appearance of your images, you can modify the HTML style directly within the concatenation formula. For example, adding a border and padding can be done as follows:
CONCAT('<img src="', <Image>, '" alt="<insert text>" style="border: 2.5px Solid Black; padding: 1.5px; display: block;">')
In this example I am applying a border and padding, but only to the team that the Tigers are currently playing. This is done using a case statement to single out which series' start date is closest to the current date:
Advanced Customization: Case-by-Case Styling
For a more tailored approach, especially in scenarios where different styles are required for different data contexts, conditional styling can be applied. Consider a custom HTML widget displaying the schedule for an NFL team with varied themes for different types of games:
- Regular Games: Standard black border.
- Monday Night Football: Thicker black border.
- Playoffs: Gold border.
- Holliday: A thematic holliday background.
- International Games: Background featuring the hosting country's flag.
Using C9QL, you can implement these styles conditionally based on the game type:
Select *,
case
when Primetime = 'Regular' then CONCAT('<img src="', Image1,'" alt="Image" style="border: 1.5px Solid Black; padding: 1.5px; display: block;">')
when Primetime = 'Thanksgiving' then CONCAT('<img src="', Image1,'" alt="Image" style="border: 0px solid white; background: repeating-linear-gradient(45deg, #986236, #986236 10px, #f7b12d 10px, #f7b12d 20px, #9d221d 20px, #9d221d 30px, #ee732f 30px, #ee732f 40px); padding: 4.5px; display: block;">')
when Primetime = 'Christmas' then CONCAT('<img src="', Image1,'" alt="Image" style="border: 0px solid white; background: repeating-linear-gradient(45deg, red, red 10px, white 10px, white 20px ); padding: 3px; display: block;">')
when Primetime = 'London' then CONCAT('<img src="', Image1,'" alt="Image" style="border: 0px solid white; background-image: url(https://upload.wikimedia.org/wikipedia/en/a/ae/Flag_of_the_United_Kingdom.svg); background-size: cover; background-position: center center; padding: 4.5px; display: block;">')
when Primetime = 'Monday Night Football (MNF)' then CONCAT('<img src="', Image1,'" alt="Image" style="border: 3px Solid Black; padding: 1.5px; display: block;">')
when Primetime = 'Playoffs' then CONCAT('<img src="', Image1,'" alt="Image" style="border: 3px solid #ffbf00; padding: 1.5px; display: block;">')
END as Image
Result:
By integrating images and applying conditional styling, you can significantly enhance the visual appeal and informational value of your BI visualizations, making your data not only more accessible but also more engaging for your audience.
Please sign in to leave a comment.
0 comments