Web Client Utils

You can get the original code from Google Documentation: https://developers.google.com/chart/interactive/docs/quick_start

- 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):

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):

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.