Integrating Google’s Visualization API with Symantec Workflow – Part 2, Interaction

I posted an article back in October 2014 about integrating Google’s Visualization API with Symantec Workflow, but the pie chart wasn’t very interactive.  In this article, I’ll be going over how to code the chart so that we can talk to the chart and act on the represented data.

googlevisAPI2

The following javascript demo code needs to be in an IncludeHTML component on the workflow form.  Here’s the javascript code:

</pre>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {

var data = google.visualization.arrayToDataTable([
<pre>['Status','Count']
,['Open', 44]
,['Closed', 201]
,['Received', 23]
,['On Hold', 20]</pre>
]);
var options = {
pieSliceText: 'value',
chartArea: {
left: 20,
top: 30,
},
is3D: true,
slices: {
0: { color: '#1c5a71' },
1: { color: '#34724d' },
2: { color: '#963d34' },
3: { color: '#b3ae7c' },
},
legend: {
position: 'right',
alignment: 'center',
textStyle: {
color: '#666666',
fontName: 'Verdana',
fontSize: '12',
}
},
tooltip: {
textStyle: {
color: '#999999',
fontName: 'Verdana',
fontSize: '14',
},
showColorCode: true,
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var aSlice = data.getValue(selectedItem.row, 0);
var tarName = parent.document.getElementById('TargetName');
var subPop = parent.document.getElementById('SubdialogPopup');
tarName.value = aSlice;
subPop.click();
}
}
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
</script>
<pre>

In order to supply a target element for the Javascript above, add another IncludeHTML component on the same Workflow form, and, as an example, give it a value of something like this:


<div id="piechart" style="width: 500px; height: 
400px;"></div>

The difference between this interactive chart and the non-interactive one (detailed in the previous post) is the “function selectHandler()” code and the “addListener” handler.  This allows us to click and pass data between the graph and the form.

The way I’m integrating this into Workflow is to call the chart in a parent form Iframe component, then write the row data to a hidden text field on the parent form, and then use that row data to build a report for that item.  For example, when I click the “Registered” slice of the pie, the chart then writes the name of the slice to a hidden TextBox on the parent form.  Immediately afterwards, a “click()” event is fired against a hidden SubDialog button (also on the parent form), which opens a form based on the name of the slice (or more specifically, based on the value of the TextBox variable).

As usual, I’m sure a demo project is easier to understand than a lot of text, so I’ll add a demo project to the Demos page.  Even I had trouble understanding that when I read back over it.


Featured Components

TextBox

IncludeHTML

SubDialog


Further Reading

Integrating Google’s Visualization API – Part 1

Google Visualization – Pie Chart

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