BookmarkSubscribeRSS Feed

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

Started ‎02-15-2018 by
Modified ‎05-24-2018 by
Views 17,530

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

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

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 object03-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 objects04-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 VA05-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 VA06-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 object07-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)

Comments

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

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.

Thanks,
Renato

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

Hi Prateek,
The default Data-Driven Content viewer custom_table.html is deployed with the SAS software and it's not a file you can find in the OS directory. For your own custom files, I recommend using the Apache Document Root location of your Linux server. You can find it with the grep command below:

[renato@XXXXXXXX /]# grep -i 'DocumentRoot' /etc/httpd/conf/httpd.conf
# DocumentRoot: The directory out of which you will serve your
DocumentRoot "/var/www/html"
# This should be changed to whatever you set DocumentRoot to.
# DocumentRoot /www/docs/dummy-host.example.com

Best,
Renato

Thanks Renato_sas, that was very helpful

Version history
Last update:
‎05-24-2018 04:17 PM
Updated by:
Contributors

sas-innovate-2024.png

📢

ANNOUNCEMENT

The early bird rate has been extended! Register by March 18 for just $695 - $100 off the standard rate.

 

Check out the agenda and get ready for a jam-packed event featuring workshops, super demos, breakout sessions, roundtables, inspiring keynotes and incredible networking events. 

 

Register now!

Free course: Data Literacy Essentials

Data Literacy is for all, even absolute beginners. Jump on board with this free e-learning  and boost your career prospects.

Get Started

Article Labels
Article Tags