Leverage a Google 3D-PieChart within VA using the Data-Driven Content Object

[#1]

The data-driven content object enables you to display your data in a custom third-party visualization within your SAS Visual Analytics report. The third-party visualization can be authored in any JavaScript charting framework, such as D3.js, Google Charts, or CanvasJS. The visualization in a data-driven content object receives its data from SAS Visual Analytics and interacts with filters, ranks, and actions in the same way as other objects in your report. The data-driven content object lets you create custom, compelling third party visualizations that can represent data in unconventional ways, seamlessly integrating with SAS Visual Analytics.

There is a little bit of work required to accomplish this. In this article: we will build the step by step java script code to integrate a Google 3D-PieChart within your SAS Visual Analytics application. 

Adding a DDC object in VA

In  VA, create a new report. Add a data source and add a data-driven content object as shown below.

                              

At this point no roles have been assigned. Notice that you see a greyed out table with some sample data in there. If you right click and select the “View Frame Source” it will give you the html for the default visualization for DDC objects. This (custom_table.html) visualization is provided to you by VA, and it uses the following URL to render the table: http://YourVIYAServer/SASVisualAnalytics/resources/custom_table.html

The default custom data table is to be used as a placeholder while the DDC content object Roles are not set.

 

Now assign some roles and notice how the graph becomes active and interactive with the roles and data selections you make.  This  custom_table.html is a good place to start your learning, while you start writing custom java script code to integrate third-party visualizations within VA. Read thru the code to see what methods are called and how data is structured back and updated in VA.  

 

Google 3D-PieChart

Now let us see how we can render a google 3D-PieChart from within VA.

The developers API reference page for google charts  is as follows:

https://developers.google.com/chart/interactive/docs/gallery/piechart#making-a-3d-pie-chart

This is my starting point. I will refer to  this for a lot of things such as the package name to load, data formats, configuration options, examples  etc. Keep this page handy and ready while you are writing code.

Notice the 3D-PieChart example on that page has code snippets. The code snippet is a simple standalone 3D-PieChart example which can render on its own. Simply, copy the code to a file and call it  google_3DPieChart.html and save it in the in the /var/www/html/ location of your VIYA midtier machine where all the VIYA microservices are running. It is the document root for the VIYA web server. 

You could reference this html file as follows:

http://YourVIYAServer/google_3DPieChart.html

For this example, I used the code for the 3D-PieChart example and made some modifications to the var names, added a few more rows to the sample data, added the path to the jquery-3.1.1.min.js and the jquery.csv.min.js libraries and added the “PieSliceText” label.   The modified code now looks like this:

 

In the VA report you created above, add a new page and pull down a Data Driven object to the canvas

In the right hand side on the Options tab: add the link to your html file you created above.

You will get a greyed out 3D-PieChart with the sample data we have coded in the java script. 

At this point if you go ahead and assign a variable to the roles tab, the graph will become active. However notice that it always displays the same sample data no matter what role and data selections you make. The data and the roles you assign do not get updated in VA. What you have is a stand-alone Web Content being displayed within VA. In order to add interactivity we have to use the windows Event Handler code, so that  VA can send and receive messages back from the third-party visualization.

event handlers

If you want to catch user clicks, or need to manipulate properties or data in a chart that you've already drawn, you need to listen for events thrown by the chart. To achieve this, we need to have some mechanisms to detect what the user and the program are doing at any given moment—where the mouse is in the browser window, whether the user has clicked a mouse button or pressed a keyboard key, whether a page has fully loaded in the browser, and so on. All of these occurrences we refer to as events, and JavaScript has a variety of tools to help us work with them. JavaScript deals with events by using so-called event handlers

The HTML5 API window.postMessage() method safely enables cross-origin communication between Window objects such as  between a page and an iframe embedded within it. event handlers catch user actions and make web pages interactive.

Add this piece of code to the google_3dPieChart.html file you created above.

Notice, the function onMessage calls a function called updateData(evt.data). This is a very important function and we will get to that in a minute.

The onMessage function is called each time the data for the data-driven content object is updated. The message received from the event handler comes as evt.data This is a JSON object and here are some of its attributes: resultName, data (the query results stored in a two-dimensional array), rowCount, columns and parameters.

For more explanation, refer to this blog post:  Data messages received from VA

 

Resizing Windows

Next, we will need to add code to redraw charts when a window is resized. The graph should be able to adjust every time the user resizes. A window resize is an event caught by the windows event handler above.

jQuery has a resize event handler which you can attach to the window, .resize(). So, if you put $(window).resize(function(){/* YOUR CODE HERE */}) then your code will be run every time the window is resized.

You must also define the drawChart() function that will redraw the graph each time the window is resized. Add this code below for the drawChart() function.

updateData

This function processes the raw data received from VA and sends it back to google in a form that google understands. This is where you have to read the developer’s google chart documentation page to understand the format in which google would want the data back.  The code below is the simplest version of a simple two column table. You could add code here to catch error conditions, validate data rows and columns, send instructional messages etc. This is also the place where you will want to add customizations  for the different google graphs you will want to develop.

First: Add the following piece of code to set some global variables and chart options for the 3D-PieChart.

The updateData() function below is a simple 2 column table example. As I said for more complex data structures, you will need to read up on the google documentation and add code to manipulate raw data to a format google understands.

 

View it in VA

Save the google_3DPieChart.html file with all the code additions. In VA do a reload of the iFrame or just reload the whole application and you should now see your 3D-PieChart come to life with the roles and data selections you have made. Here are a few screen shots of the finished visualization. 

 

Same Visualization but with a different set of roles selection.

Exploded 3D-PieChart

You can separate pie slices from the rest of the chart with the offset property of the slices option: To separate a slice, create a slices object and assign the appropriate slice number an offsetbetween 0 and 1. Below, we assign progressively larger offsets to 1, 2, 6 and 8^th slice (meaning rows of our data displayed as a slice in a PieChart). The offset of 0.2 indicates the distance of the slice  from the radius of the Pie. 

Add this piece of code to your var "options" and var "_options" in the google 3D-PieChart.html example above.

           

Same Exploded-3D-PieChart visualization but with a different sorting order.

Same Exploded-3D-PieChart visualization but this time with a different selection of roles. 

Next Blog Post

Well folks, this is all there is to get a simple google chart to display within VA. For many of the google chart examples, you could simply use the building blocks above, to leverage them from within VA. In cases where the data structure is more complex, code needs to be added to process the the raw JSON data coming back from VA. 

If you want your third-party visualization to act as a source and a target to an interaction, we will need to handle Event Handler code to send selections, linked selections and some customized instructional messages. In my next blog post, I will be adding the SelectionHandler code to the example above: to create those interactions within VA. We will also be creating another slightly complex Google Chart example in my next article. 

For added reading, please also refer to this article by Renato Luppi  on Data-Driven Content object.

Thanks!

[ASHLY]

My question, By using data-driven content, Is it possible to pass the global filter parameters through DDC and then it will pass all these parameters to data query and give me results?

Regards

ASH

[Meera_SAS]

 Hi Ashly -  sorry for the late reply.  The message handler piece of code above hooks up the data received from VA to the DDC object.  It could get the value for a parameter and then pass it along to the DDC object and process the query. Hope this helps. 

Thanks

Meera