I don't where to put the code, please feel free to put wherever you want...
I'm going to use the example you can get from the Google documentation,
here.
- First, create a variable form (i.e., 'chart'), use it as datasource of a field of type HTML_AREA and put it in the form.
- Then, create an onShow method. Add a reference of Google libraries (as you can see in the original code from doc):
- Code: Select all
plugins.WebClientUtils.addJsReference('https://www.google.com/jsapi');
- You can assign the remaining code to 'chart' variable, but I prefer to do it this way (this is the complete code for onShow method):
- Code: Select all
function onShow(firstShow, event)
{
plugins.WebClientUtils.addJsReference('https://www.google.com/jsapi');
var datasource = [
['Topping', 'Slices'],
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
];
var chartOptions = {
'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300
};
chart = '<script type="text/javascript">\
google.load("visualization", "1.0", {"packages":["corechart"]});\
google.setOnLoadCallback(drawChart);\
function drawChart() {\
var data = new google.visualization.arrayToDataTable(' + JSON.stringify(datasource) + ');\
var options = ' + JSON.stringify(chartOptions) + ';\
var chart = new google.visualization.PieChart(document.getElementById("chart_div"));\
chart.draw(data, options);\
}\
</script>\
<div id="chart_div"></div>';
}
As you can see, I define the values and the chart options as variables in Servoy code and then 'inject" them using
JSON.stringify, I think that the code is very clear. Of course, you can populate 'datasource' array with data from Servoy.