Integrating Google’s Visualization API with Symantec Workflow

I’m not terribly fond of 2 things – crawling around in the report builder in ProcessManager, and the graphical components provided as Workflow components in the designer.  I found a Google API solution which I figured I could integrate into some of my dashboards for customers.

Workflow and Google Visualization API Integration
An example of the Pie Chart theme from Google’s Visualization API. The data is from a ServiceDesk Incident Management Ticket Status report.

There are several places where I needed the workflow to interact with the API.  First, I needed data.  Then I needed to shape it properly.  Here’s a demo of how the API works.

The API in this example is using the PieChart layout, and the pie chart accepts its data like this:

['Item Name', 'Count Value'],
['One', 1],
['Two', 2],
['Three', 3],
['Four', 4],
['Five', 5]

So I used a For Each Element component to loop the data I want my chart to represent.

Data Merge
The Build Start (Merge Text) component handles pre-merging the titling of my data (in the example CodePen above, it’s [‘Item Name’, ‘Count Value’],). Next the data is gathered for the report. A Text Exists component is used to ensure we’re not trying to build a report with no data. The data is then looped and the values are merged in for each row (in the example CodePen above it would be: First Row: [‘One’, 1], Second Row: [‘Two’, 2], etc).
I then merge the text in using the variables from the fetched SQL data, each row being merged after each previous row, to build the data as indicated in the example above.

Then I merge in the top part of the code, then I merge the bottom part of the code that contains the API configuration options.  This can include a specific color set, which I supply using a variable (so I can randomize the colors each time the chart loads).

Here’s an example of the calculated chart code when I inspect a published sample element.


google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {

var data = google.visualization.arrayToDataTable([
['Request', 'Status']
,['Approved', 1]
,['Closed', 1]
,['Escalated', 2]
,['Received', 6]
]);

var options = {
title: 'Requests Status',
pieSliceText: 'value',
is3D: true,
fontName: 'Verdana',
fontSize: '10',
colors:['#808080','#4e1818','#9c3030','#db8181','#c33c3c','#666666','#b3b3b3','#999999','#752424'],
};

var chart = new google.visualization.PieChart(document.getElementById('piechart'));

chart.draw(data, options);
}

The code above is the code behind the chart in the top right frame in this screenshot:

Report and Chart Samples
The data is seen on the left, while the corresponding grouped and rollup’d (what?) data is presented as a chart on the right.

A final merge is done to reference the javascript’s origin and it’s ready to configure on my Form Builder.

I use two IncludeHTML components, one to hold the HTML, and another to hold the javascript.  Technically I should have three, I suppose; one to also hold the CSS dimensions, but I shortcutted with inline in the HTML.

HTML (in one IncludeHTML component).  The element dimensions are set here:

<div id="piechart" style="width: 174px; height: 100px;">
</div>

Javascript (in the second IncludeHTML component; seen above).

That does the trick.  I have a decent pie chart now for my dashboard web parts and iframes, and evidently there are events I can key from as well, so I’ll experiment with some onclick functionality soon.

9 thoughts on “Integrating Google’s Visualization API with Symantec Workflow

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s