Now, we edit the drawChart Javascript function so that it uses the data we are passing to it.

The variable data gets its assignment from a Google API function. The function’s argument is the data. In the example code, the data is a series of formatted hard-coded values.

We need to replace that hard-coded data with the formatted data in the JavaScript array that the Xbasic call getDataForChart returns. That data itself needs to be in a variable, so we will start with that.

Observe as the instructor edits the drawChart function to use the data from the Xbasic getDataForChart function.

  1. After the first line of the drawChart function, open a new line and enter:

var chartdata = {dialog.object}._data; (Declare a local variable and assign to it the value of the _data variable.)

  1. In the var data line, replace the hard-coded sample data values with the variable chartData. Edit the line so that it reads as follows:

var data = google.visualization.arrayToDataTable(chartdata);

  1. The options variable places text above the pie chart. To change that text, edit the title option so that it reads as follows:

title: 'Sales relative to total revenue'

  1. Review the charts variable. We edited that variable much earlier so that the pie chart will appear in the div named CHARTS.
  2. Save the Component.

Now you make the same changes to your drawChart function.