This is the fourth part of a four part series that discusses how to display product photos in SAS Visual Analytics.
Note: More detail about the requirements and steps for using the data-driven content object in Visual Analytics can be found in the first post in this series.
Note: The entire code is available at the end of this post.
First, we need to update the sample data message to contain multiple rows instead of a single row.
Select any image to see a larger version.
Mobile users: To view the images, select the "Full" version at the bottom of the page.
Notice that the rowCount, availableRowCout, and data values are updated to show multiple rows. For more information about how data is passed from Visual Analytics to the third-party visualization, see the third post in this series.
Now, the data values can be referenced using data[i].item, where data.item references the first data value (the value Figure from the sample data), data.item references the second data value (the value Game from the sample data), and so on.
For this example, a div (with a class of row) is created to hold all images (rowDiv) and appended to the web page inside the div (with an id of photo).
Then, a new div is created for each image using the for loop (colDiv).
If one row is passed, the div (and the image) spans the entire width (using the Bootstrap class of col-12). If more than one row is passed, the div (and each image) spaces half the width (using Bootstrap class of col-6).
Then, a Bootstrap class of py-2 is added to insert padding on the top and bottom of each image and colDiv is added to the DOM (using the appendChild method).
Lastly, a new img element is created for each row of data passed from Visual Analytics (using the createElement property), attributes of the element are modified (src and alt), and the element is added to the DOM (using the appendChild method).
The src attribute points to the image for the selected product line in the images folder. Note that the toLowerCase method is needed convert the product line passed from Visual Analytics (which is proper case) to the case used for the image file (which is in lower case). The alt attribute is the value of the selected product line. A Bootstrap class (img-fluid) is also added to the image to ensure the image takes up 100% of the width of the div (colDiv).
When the code is complete, you can test it in Visual Analytics. Notice that page prompts have been relocated to the left of the canvas and the page prompt has been changed to a list control (so users can select multiple product lines). In addition, a data-driven content object (that references the code) is included on the canvas.
Notice when no product line is selected, images for all product lines are displayed in the data-driven content object.
Pro Tip: Recall that to use list controls in the page prompt or report prompt areas, the location of the prompts need to be on the left or the right or a prompt container needs to be used. In this example, I changed the location of the page prompt container to the left side.
When one product line is selected, an image for that product line is displayed and it takes up the full width of the object.
When more than one product line is selected, images for those product lines are displayed and take up half the width of the object and subsequent images are added below the others.
You can use similar code to restructure data passed from Visual Analytics from a two-dimensional array to an array of objects and to display multiple images in your report.
Find more articles from SAS Global Enablement and Learning here.
Below is the code in its entirety.
Registration is open! SAS is returning to Vegas for an AI and analytics experience like no other! Whether you're an executive, manager, end user or SAS partner, SAS Innovate is designed for everyone on your team. Register for just $495 by 12/31/2023.
If you are interested in speaking, there is still time to submit a session idea. More details are posted on the website.
Data Literacy is for all, even absolute beginners. Jump on board with this free e-learning and boost your career prospects.