Next, we will add the Google Charts JavaScript to the Component, so that the Component can produce the chart.

   Along with the instructor, enable two settings that will allow the Component to use the Google Charts API/JavaScript.


Note – in recent versions of Alpha Anywhere, steps 1 and 2 are not required.


  1. In the Web Projects Control Panel, click the button.

  1. The window appears. Locate and mark the checkbox shown here:

Then click OK.

  1. Now, indicate which Google visualization packages are needed to produce the chart.
    1. In the Component’s Design left-side panel, click Properties.
    2. In the JavaScript group, locate and click the smart button to edit Google visualization libraries.

    1. 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.

  1. Save the component.



Observe as the instructor incorporates the Google Charts API/JavaScript into the Component.

  1. Start a Web browser session, and navigate to https://developers.google.com/chart/
  2. In the list on the left side, click Chart Gallery.
  3. Locate and click the Pie Chart link.
  4. Google provides examples of several types of pie charts. Click the link for the “Example”.

  1. The site displays JavaScript for producing a Google Chart. In the fifth line, note the indication of which chart packages need to be loaded to produce the chart:

To find out which package you need to produce a given chart, look for the packages parameter. We make this choice in Alpha Anywhere (as you saw on the previous page), and so we do not use this line in the JavaScript function we are writing.

  1. Copy the drawChart function. Be sure to copy all 3 variables: data, options, and chart.
  2. Return to the Component.
  3. In the list on the left side, click Javascript functions.
  4. Paste the drawChart function script into the script window. (We will review the three variables on the next page.)
  5. Make one change for now, so the chart will appear in the div defined two pages ago. In line 15, getElementByID has the output parameter piechart. Change that to CHARTS (the name of the div). Note: Javascript is case-sensitive so CHARTS needs to be all caps because earlier when we added the div, the div name was in all caps.
  6. Save the Component.

The Component now includes a custom JavaScript function.

  1. Define a click Event for the Button control that will call the drawChart function:
    1. In the Design area’s left-side pane, click Controls.
    2. Click on the Button: Show the chart control, and edit its click Event.
    3. In the window that appears, click the radio button for Text mode.
    4. Enter drawChart();
    5. Save the Action.
  2. 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:

  1. Copy, paste, and edit the drawChart function.
  2. Define the click Event for the Button control.


A look inside the drawChart function

The function really consists of three variables:

  • data – this supplies the data that the function will use to draw the chart. The data is formatted in a certain way in a JavaScript array, which we will examine later.
  • options – in this function, it supplies the title that appears above the pie chart.
  • chart – this is the chart produced using data and options.