Load the Libraries

This page shows how to load the Google Chart libraries.

Basic Library Loading

With few exceptions, all web pages with Google Charts should include the following lines in the <head> of the web page:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);
</script>

The code above assumes you want to display a corechart (bar, column, line, area, stepped area, bubble, pie, donut, combo, candlestick, histogram, scatter). If you want a different or additional chart type, substitute or add the appropriate package name for corechart above (e.g., {packages: ['corechart', 'table', 'sankey']}. (You can find the package name in the documentation page for each chart. Note that as of December 2015, Geocharts need to be loaded in a different way; see the Geochart documentation for details.)

current causes the latest official release of Google Charts to be loaded. If you want to try the candidate for the next release, use upcoming instead. In general there will be very little difference between the two, and they'll be completely identical except when a new release is underway. A common reason to use upcoming is that you want to test a new chart type or feature that Google is about to release in the next month or two. (We announce upcoming releases on our forum and recommend that you try them out when announced, to be sure that changes to your charts are acceptable.)

This code also assumes that you have a JavaScript function called drawChart later on in your web page. You can name that function whatever you like, but be sure it matches what you pass to google.charts.setOnLoadCallback.

Here is an example of drawing a pie chart using the basic loading technique:

<head>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <script type="text/javascript">
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      // Define the chart to be drawn.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Element');
      data.addColumn('number', 'Percentage');
      data.addRows([
        ['Nitrogen', 0.78],
        ['Oxygen', 0.21],
        ['Other', 0.01]
      ]);

      // Instantiate and draw the chart.
      var chart = new google.visualization.PieChart(document.getElementById('myPieChart'));
      chart.draw(data, null);
    }
  </script>
</head>
<body>
<!-- Identify where the chart should be drawn. -->
<div id="myPieChart"/>
</body>

There are three minor but important limitations with loading Google Charts that we expect to resolve in the near future:

  1. You can only call google.charts.load() once. But you can list all the packages that you'll need in one call, so there's no need to make separate calls.
  2. You can't autoload the library.
  3. If you're using a ChartWrapper, you must explicitly load all the packages you'll need, rather than relying on the ChartWrapper to automatically load them for you.

Frozen Versions

When we release new versions of Google Charts, some of the changes are big, like entirely new chart types. Other changes are small, like enhancements to the appearance or behavior of existing charts.

Many Google Chart creators fine-tune the look and feel of their charts until it's exactly what they want. Some creators might feel more comfortable knowing that their charts will never change, regardless of what improvements we make in the future. For those users, we support frozen Google Charts.

Frozen chart versions are identified by number, and they're described in our release notes. To load a frozen version, replace current or upcoming in your library load with the frozen version number:

<script type="text/javascript"
        src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('43', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    ...
</script>

We expect that frozen versions will remain available indefinitely, though we may retire frozen versions that have security concerns. We will typically not provide support for frozen versions, except to unhelpfully suggest that you upgrade to a newer version.

Locales

Locales are used to customize text for a country or language, affecting the formatting of values such as currencies, dates, and numbers.

By default, the Google Chart libraries are loaded with the "en" locale. You can override this default by explicitly specifying a locale in the loading parameters.

To load a chart formatted for a specific locale, use the language parameter like so:

  // Load Google Charts for the Japanese locale.
  google.charts.load('current', {'packages':['corechart'], 'language': 'ja'});

Follow this link for a live example.

 

More Information