After going through the fist two articles of this series, you should have all the basics covered to support rendering dynamic Web pages and dynamic images in SAS Visual Analytics via Data-Driven Content objects. The intent of this last article is to combine dynamic images and Web pages in one single DDC.
The solution is really a combination of what you saw before and you can leverage any of the two methods of passing informaton to the DDC: using parameters or using actions to filter the data that is passed to the DDC. For simplicity, only action filters will be explored here.
You will need the same input table containing animal names and image file names that was used previously. The idea is not to have the image and the Web page displayed at once. Instead, you will do it in phases. When you select an animal name, its image gets displayed, and only when you click on the image, the Wikipedia page for that animal gets displayed. A practical application of this is to allow an image to link to a dynamic content, where the content that you link to depends on the state of your Visual Analytics report and the selections you have made. The fact that you will be changing the image as well is just a bonus.
As always, this DDC example is available in GitHub, under samples/DynamicWebPagesAndImages. There you will find the following:
- Source table in Excel format to be imported in SAS Visual Analytics (Animals.xlsx).
- DDC implementation files (*.html) to be deployed in your Web server.
- SAS Visual Anaytics report in JSON format (Example of Parameterized URL and Dynamic Image.json). This report was created with SAS Visual Analytics 8.5 and therefore it can be imported into version 8.5 and above by a SAS administrator or any user with Import rights. It contains all examples for this entire series of articles.
- Animal image icons.
This is what you need for this example in SAS Visual Analytics:
- Visualization object (e.g. List Table) or control object (e.g. List Control) – source of filter action that will select the animal name.
- DDC object – target of filter action that will display the image and set the link to the Web page.
Settings:
- Assign the column “animal” to the Role pane in the source object.
- Assign columns “animal” and “image” to the Role pane in the DDC object.
- Define a filter action from the source object into the DDC.
When you select the animal name from the source object, it filters the data passed to the DDC, which in turn dynamically displays the image with its associated link.
This is the HTML portion of the DDC implementation:
<div>
<a id="target_url" href="" target="target_iframe"><img id="animal_img" src=""></a>
<iframe id="target_iframe" name="target_iframe" src=""></iframe>
</div>
The img tag is embedded in an a tag, allowing a click on the image to load the Web page indicated on the href attribute. Both the href and the image’s src attributes are initially empty, as they are dynamically set by JavaScript. The target attribute of the a tag points to the iframe, indicating where the Web page is to be loaded when the image is clicked. If you want the Web page to be loaded in a new browser tab, you just need to set target=”_blank”. In that case, you will not need the iframe.
This is the JavaScript code:
va.messagingUtil.setOnDataReceivedCallback(updateImageAndLink);
function updateImageAndLink(vaMsgObj)
{
if (vaMsgObj && vaMsgObj.data && vaMsgObj.rowCount === 1) {
document.getElementById("animal_img").src="./AnimalImages/"+vaMsgObj.data[0][1];
document.getElementById("target_url").href = "https://en.wikipedia.org/wiki/"+vaMsgObj.data[0][0];
document.getElementById("target_iframe").src="";
}
else {
document.getElementById("animal_img").src="";
document.getElementById("target_url").href = "";
document.getElementById("target_iframe").src="";
}
}
When the data associated with the DDC is filtered, it triggers the DDC JavaScript code to process the JSON message received from Visual Analytics by executing the callback function updateImageAndLink. If there is one and only one row of data in the message, the appropriate attributes are set, otherwise they are all reset to empty string. Observe that the src attribute of the iframe is always set to empty, even if the data is valid, because the Web page is supposed to be loaded only when the image is clicked, which is done by setting href, and every time the image changes, the currently displayed Web page needs to be removed. Setting the attribute href to empty does not remove the Web page, but setting the iframe’s src to empty does. Also, note that data[0][0] and data[0][1] correspond to the animal name and image name respectively, therefore that’s the order they need to be passed to the DDC object in the Visual Analytics report. As a final note, the code should be checking for the existence of both animal name and image name in the message before trying to access their values. This would be required in production, but for simplicity it was left out.
The full DDC implementation with styles, etc. is this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://<your.web.server.host>/github/util/messagingUtil.js"></script>
<style>
html, body {
margin: 0px;
padding: 0px;
height: 100%;
overflow: hidden;
width: 100%;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
max-height: 128px;
max-width: 100%;
}
iframe {
position: absolute;
top: 130px;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
border: none;
}
</style>
</head>
<body>
<div>
<a id="target_url" href="" target="target_iframe"><img id="dynamic_img" src=""></a>
<iframe id="target_iframe" name="target_iframe" src=""></iframe>
</div>
<script>
"use strict";
va.messagingUtil.setOnDataReceivedCallback(updateImageAndLink);
function updateImageAndLink(vaMsgObj)
{
if (vaMsgObj && vaMsgObj.data && vaMsgObj.rowCount === 1) {
document.getElementById("dynamic_img").src="./AnimalImages/"+vaMsgObj.data[0][1];
document.getElementById("target_url").href = "https://en.wikipedia.org/wiki/"+vaMsgObj.data[0][0];
document.getElementById("target_iframe").src="";
}
else {
document.getElementById("dynamic_img").src="";
document.getElementById("target_url").href = "";
document.getElementById("target_iframe").src="";
}
}
</script>
</body>
</html>
This HTML file is called ddc_DynamicImageWithLink.html in GitHub.
This ends the third and last article of the series. If you got that far, I hope you now have a good understanding of how to use DDC objects to dynamically embed images and Web pages in SAS Visual Analytics reports.
References
Learn More…
