Note – in recent versions of Alpha Anywhere, steps 1 and 2 are not required.
- In the Web Projects Control Panel, click the button.
- The window appears. Locate and mark the checkbox shown here:
Then click OK.
- Now, indicate which Google visualization packages are needed to produce the chart.
- In the Component’s Design left-side panel, click Properties.
- In the window that appears, mark the checkbox as shown here:
Then click OK
Returning to the Properties window, the choice you made now appears:
How do you know which package you need to load? You will see this on the next page. We made the choice now instead of jumping between environments.
- Save the component.
- Start a Web browser session, and navigate to https://developers.google.com/chart/
- In the list on the left side, click Chart Gallery.
- Locate and click the Pie Chart link.
- Google provides examples of several types of pie charts. Click the link for the “Example”.
- Copy the drawChart function. Be sure to copy all 3 variables: data, options, and chart.
- Return to the Component.
- Paste the drawChart function script into the script window. (We will review the three variables on the next page.)
- Save the Component.
- Define a click Event for the Button control that will call the drawChart function:
- In the Design area’s left-side pane, click Controls.
- Click on the Button: Show the chart control, and edit its click Event.
- In the window that appears, click the radio button for Text mode.
- Enter drawChart();
- Save the Action.
- Save the Component, and display it in Working Preview. The chart displays, but with the sample data from the sample code.
Now it’s your turn:
- Copy, paste, and edit the drawChart function.
- Define the click Event for the Button control.
A look inside the drawChart function
The function really consists of three variables:
- options – in this function, it supplies the title that appears above the pie chart.
- chart – this is the chart produced using data and options.