Static Pie Chart: Understand Google Visualization
Create a 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 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/
Please give details of the problem