Google Charts

Loading the Libraries

<html>
  <head>
<!--Load the AJAX API--> <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.0', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart);
// 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'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); // Set chart options var options = {'title':'How Much Pizza I Ate Last Night', 'width':400, 'height':300}; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <!--Div that will hold the pie chart--> <div id="chart_div" style="width:400; height:300"></div> </body> </html>

 

A chart requires three libraries:

  • The Google JSAPI API
  • The Google Visualization library
  • The library for the chart itself.

These libraries 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.0', {'packages':['corechart']});
  google.setOnLoadCallback(drawChart);
     // ... draw the chart...
</script>

The first script tag loads the 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(). This function takes the following syntax:

google.load('visualization', '1.0', {'packages':[<list_of_package_names>]});
visualization
Loads the google.visualization library. This library defines all the core utility classes and functions.
1.0
Which version of the visualization to load. 1.0 is always the current production version.
list_of_package_names
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.0', {'packages':['corechart','table']});

Immediately after calling google.load(), your code should call google.setOnLoadCallback(my_handler), a 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

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.