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.

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.

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:

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.