Static Pie Chart: Understand Google Visualization

Create a pie chart

google_pie_chart

How to configure it:

Create a new RMP user interface
Include this as a .js in the headers of your webform (this is a google library with pie chart package)

https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22corechart%22%5D%7D%5D%7D
Add an html widget with the following code :

Code

1	<div id="chart_div"><div>

Add a calculated gadget in your RMP webform with this script :

Code

function drawChart(html_id,array_data,array_column,pie_title,chart_width,chart_height) {
// Create our data table.
var data = new google.visualization.DataTable();
for(i=0;i<array_column.length;i++)
{
data.addColumn(array_column[i].type, array_column[i].title);
}

var array_array_data = new Array();
for(i=0;i<array_data.length;i++)
{
array_array_data.push([array_data[i].label,array_data[i].value]);
}

data.addRows(array_array_data);


// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById(html_id));
chart.draw(data, {width: chart_width, height: chart_height, is3D: true, title: pie_title});
}



var array_data = [{"label":"Work","value":4},{"label":"Eat","value":8}];

var array_column = [{"type":"string","title":"Task"},{"type":"number","title":"Hours per Day"}];

var html_id = "chart_div";
var pie_title = "My Daily Activities";
var chart_width = 600;
var chart_height = 240;

drawChart(html_id,array_data,array_column,pie_title,chart_width,chart_height);

Save your webform, switch to test mode and preview!

You can now adapt this feature to your own data source : you just have to compute array_column and array_data (thanks to a RunMyProcess process listener for example) and call this js function

This is the best way of designing your dashboards within RunMyProcess webforms.

NB : This feature doesn't requires working in a google environment as this is not a google gadget

For more documentation on the other google visualisations : https://developers.google.com/chart/interactive/docs/

Docs

Developer Guide

Static Pie Chart: Understand Google Visualization

Create a pie chart