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