Load the Libraries

The first step in drawing any Google Chart is loading the Google JSAPI library loader, and then using it to load the visualization library. If you're impatient, you can just cut and paste from the following standalone web page:

 <!--Load the AJAX API. Do this only once per web page! -->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]

      // Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);

    <!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>


Drawing a Google chart requires the following:

  • The Google JSAPI loader
  • The Google Visualization library
  • The package for the chart itself (e.g., corechart, orgchart)

These are loaded using two <script> links in your page code, as shown here:

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  // Load the Visualization API library and the piechart library.
  google.load('visualization', '1', {'packages':['corechart']});
     // ... draw the chart...

The first script tag loads the Google JSAPI library.

The second script loads the Google Visualization and chart libraries. It also typically holds your chart code.

The first line of the second script tag should call google.load().

Syntax for google.load()

google.load('visualization', '1', {'packages':[<list_of_package_names>]});
A string referring to the google.visualization library, which defines the core utility classes and functions. The '1' specifies which version of Google Charts to load:
  • 1 or 1.0 is always the current stable version.
  • 1.1 is always the newest release.
  • You can also load a frozen version if you want a version that avoids changes (including improvements) to Google Charts over time.
A list of Google chart libraries to load. The 'corechart' library in the example defines most basic charts, including the pie, bar, and column charts. Any other Google charts not defined in this library that you want to include on your page must be added as separate array entries. Each chart's documentation lists which library it is defined in. For example, here is how to load the core charts plus a table chart:
google.load('visualization', '1',  {'packages':['corechart','table']});

Immediately after calling google.load(), your code should call google.setOnLoadCallback(my_handler), a Google JSAPI function that calls your handler as soon as all the libraries are loaded. Your handler function should create and define the chart, as described next.


More Information