SAS Visual Analytics (VA) 8.2 introduced a series of new enhancements but this one in particular is my preferred: Data-Driven Content. (Read the second part of this article here.)
At first, the name doesn’t tell much, but as you get to know more about what Data-Driven Content is and can do to help you achieve your reporting goals, I don’t think you will have another choice other than fall in love with it, as I did.
So, what is it? Data-Driven Content (or DDC for short) is a new report object in VA 8.2 that allows you to create your own JavaScript-based custom visualization and embed it in VA reports. Like other VA objects such as bar charts, pie charts, and others meant to be used with advanced analytics, DDC objects can participate as the source and/or target of actions (a.k.a. interactions). You can also assign roles, apply filters and ranks to DDC objects, making your custom visualization act as if it was a native VA visualization. In other words, you can use DDC to expand the already extensive number of charts and plots that VA offers, by leveraging commercial or open source JavaScript frameworks for visualization, such as D3.js, C3.js, Google Charts, Chart.js, Dimple, Dygraphs, jqPlot, Flot, etc.
01-Example of third-party JavaScript visualization frameworks
02-Example of Google Chart embedded in a VA report and interacting with other objects
Yes, JavaScript skills are required if you are creating the third-party visualization or modifying it to integrate with VA, but the objective of this article is not teaching you JavaScript. Instead, the goal is to highlight the key components that you, as the third-party visualization developer, must know in order to seamlessly integrate your visualization with VA. Once that is done, report authors can simply leverage your work via Data-Driven Object in VA.
If you drag & drop a DDC object into a VA report and assign a few columns in the object’s Role tab, you will get a table, which is the default visualization for DDC objects. That visualization is provided for you by VA, and it uses the following URL to render the table:
http://<your.viya.host>/SASVisualAnalytics/resources/custom_table.html
When you create a new third-party visualization for the DDC object, you create an HTML file to be used as a replacement of the default URL above.
03-Default table viewer for Data-Driven Content object
Many people tend to ignore that view, but it contains some basic, and at the same time important information about what VA is passing to the third-party visualization. In this example, the data is made of a two-dimensional table with three columns and three rows. The source data could have come from a table a lot bigger than that, but VA is querying and aggregating it using its in-memory engine and passing the results to the DDC object. So, even if you are using a third-party visualization, you are still leveraging VA’s computing power behind the scenes.
The information (or message) that VA passes to the DDC object contains the aggregated data and a few other items as a JSON structure. Every time something changes, such as a filter gets applied, or columns are added/removed/renamed, etc., a new message is sent to the DDC object. The DDC object can also be the sender of messages. For example, you may want to let VA know when the user selects something in the third-party visualization, or simply send a warning message to the user to inform that something happened. Those messages are also sent in JSON format.
This is really all that simple. In summary, there is one type of message that flows from VA to the third-party visualization (containing data, columns metadata, selections made in other VA objects that should affect the DDC object, etc.), and two types of messages that flow from the third-party visualization to VA (one to inform selections and one to send instructional messages).
Whether messages are really passed or not between the DCC object and other VA objects, it depends on two things:
Any changes made in the VA interface that affect the aggregated data (think about the default table view explained previously), such as filters, and ranks applied directly to the DCC object will trigger a new message to be sent automatically. User actions performed in the objects that are sources of actions (filter or selection in the Actions pane) defined with the DCC object will also trigger new messages to be sent. If the source is a VA object, the message is automatically sent, but if the source is the DDC object, you must handle that via code.
04-Actions define source and target of messages between DDC object and other VA objects
As a third-party visualization developer, you must add an event listener to receive messages from VA, and an event handler to properly parse and process the message to refresh the content of the visualization.
05-Receiving messages from VA
Similarly, to send messages to VA you must add code to handle events that your third-party visualization generates, such as user clicking on the visualization to select specific data points, and send a selection message to VA, or simply to send an instructional message (text) to keep the user informed about something.
Messages with selections will cause VA objects that have Actions defined with the DDC object to automatically react accordingly (be filtered or selected/brushed):
06-Sending messages to VA
Sending instructional messages to VA will display the text inside the DDC object in the VA interface. This is good to give instructions to the report author about what type of data is required, their type, sequence, etc.:
07-Example of instructional message displayed inside DDC object
In the second part of this article, we will dig deeper into the messages exchanged between VA and the third-party visualization, discuss a little bit of code, best practices, and examples.
Additional resources on Data-Driven Content:
Renato -
First, prazer em ve-lo participating on Communities: keep up the good content.
Second, is this post valid for VA or Viya or both? Just wondering based on the link you provided as below:
http://%3cyour.viya.host%3e/SASVisualAnalytics/resources/custom_table.html
Sincere regards,
Chad Caulkins
Great post, looking forward to part 2 🙂 Oops! Part 2 is already available.
Great post @Renato_sas , very useful! Thanks!
Whoa! This is awesome, Renato 🙂
Mark
Hi Renato,
I am basically new to viya, so can you guide me where I can find http://<your.viya.host>/SASVisualAnalytics/resources/custom_table.html location on server. Or how to upload my html files there?
Thanks
-Prateek
Thanks Renato_sas, that was very helpful
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.