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.
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.
Thank you friend. I did the download the package.
LikeLike
I’d love to but the blog platform is not providing that information for me. check the info section and send me an email and i’ll reply.
LikeLike
Hi,
can you send me this project for download please?
LikeLike
sure, I’ll send it over shortly.
LikeLike
I’ll stay waiting. thanks a lot.
LikeLike
got it packaged – let me know where to send it. you can find my email address on the info page if that helps.
LikeLike
Can you send to my email address?
LikeLike
I’ll just leave this here for now. let me know when you’ve downloaded it, if you would. Thanks, and let me know if you need a hand sorting it out!
https://drive.google.com/file/d/REDACTED/view?usp=sharingLikeLike