We’re smarter together. Learn from this collection of community knowledge and add your expertise.

Data-Driven Content: leveraging third-party visualizations in SAS Visual Analytics (part 1 of 2)

by SAS Super FREQ on ‎02-15-2018 10:28 AM - edited on ‎05-24-2018 04:17 PM by Community Manager (3,866 Views)

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.PNG01-Example of third-party JavaScript visualization frameworks

 02-Example of Google Chart embedded in a VA report and interacting with other objects.PNG02-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.


First things first


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:



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.PNG03-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.


Communicating with the Data-Driven Content object


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:

  1. There are changes or actions made in VA or the third-party visualization that trigger a new message to be sent
  2. There is code in the third-party visualization that handles those messages received from or sent to VA.

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.PNG04-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.PNG05-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.PNG06-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.PNG07-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:

Download the Files (GitHub)

by Occasional Contributor ccaulkins912
on ‎02-20-2018 08:50 AM

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:



Sincere regards,


Chad Caulkins

by SAS Super FREQ
on ‎02-20-2018 10:16 AM
Hi Chad,

This content refers to VA 8.2, which runs on SAS Viya.
All VA releases prior to 8 run on SAS 9. VA releases 8+ run on SAS Viya.

by SAS Super FREQ
‎02-21-2018 01:01 PM - edited ‎02-21-2018 01:02 PM

Great post, looking forward to part 2 :) Oops! Part 2 is already available.

by Trusted Advisor
‎02-27-2018 11:03 AM - edited ‎02-27-2018 11:04 AM

Great post @Renato_sas , very useful! Thanks!


by SAS Employee SASJedi
on ‎03-16-2018 03:54 PM

Whoa! This is awesome, Renato :-)



Your turn
Sign In!

Want to write an article? Sign in with your profile.

Looking for the Ask the Expert series? Find it in its new home: communities.sas.com/askexpert.