\n\n","The first line of this example loads the loader itself.\n You can only load the loader one time no matter how many charts you plan to draw.\n After loading the loader, you can call the ","google.charts.load"," function one\n or more times to load packages for particular chart types.\n ","The first argument to "," is the version name or number,\nas a string. If you specify ","'current'",", this causes the latest official release\nof Google Charts to be loaded. If you want to try the candidate for the next\nrelease, use ","'upcoming'"," instead. In general there will be\nvery little difference between the two, and they'll be completely\nidentical except when a new release is underway. A common reason to\nuse ","upcoming"," is that you want to test a new chart type or\nfeature that Google is about to release in the next month or two. (We\nannounce upcoming releases on\nour ","forum","\nand recommend that you try them out when announced, to be sure that\nany changes to your charts are acceptable.)","The example above assumes you want to display a ","corechart","\n(bar, column, line, area, stepped area, bubble, pie, donut, combo,\ncandlestick, histogram, scatter). If you want a different or\nadditional chart type, substitute or add the appropriate package name\nfor "," above (e.g., ","{packages: ['corechart',\n'table', 'sankey']}",". You can find the package name in the\n'Loading' section of the documentation page for each chart.","This example also assumes that you have a JavaScript function\nnamed ","drawChart"," defined somewhere in your web page. You can name\nthat function whatever you like, but be sure it is globally unique and\nthat it is defined before you reference it in your call to\n","google.charts.setOnLoadCallback",".\n","Note: Previous versions of Google Charts used code that\ndiffers from the above to load the libraries. To update your existing charts to\nuse the new code, see Update Library Loader Code.\n","Here is a complete\n example of drawing a pie chart using the basic loading technique:","\n
\n \n \n\n\n \n
\n\n","Loading Details","\n First you must load the loader itself,\n which is done in a separate ","script"," tag with\n ","src=\"https://www.gstatic.com/charts/loader.js\"",". This tag can be either in the\n ","head"," oder ","body"," of the document, or it can be inserted dynamically\n into the document while it is being loaded or after loading is completed.\n ","\n\n","\n After the loader is loaded, you are free to call ",".\n Where you call it can be in a "," tag in the "," oder\n "," of the document, and you could call it either while the document is\n still loading or any time after it has finished loading.\n ","\n As of version 45, you ","may"," call "," more than one\n time in order to load additional packages, though it is safer if you can avoid doing so.\n You must provide the same version number and language settings each time.\n ","\n You can now use the old JSAPI ","autoload"," URL parameter,\n but the value of this parameter must use strict JSON\n formatting and URL encoding. In JavaScript, you can do the encoding of\n ","jsonObject"," with this code:\n ","encodeURIComponent(JSON.stringify(jsonObject))",".\n ","Limitations","If you are using versions prior to v45, there are a couple minor but important\n limitations with how you load Google Charts:","You can only call ","once",". But you can list\n all the packages that you'll need in one call, so there's no need to\n make separate calls.","If you're using a ChartWrapper, you must explicitly load all the\n packages you'll need, rather than relying on the ChartWrapper to\n automatically load them for you.\n ","For ","Geochart"," and\n ","Map Chart",", you must load both the\n old library loader and the new library loader. Again, this is ","only"," for versions\n prior to v45, and you should ","not"," do this for later versions.\n ","\n\n","Load Version Name or Number","\n The first argument of your "," call is the version name or number.\n There are only two special version names at this time, and several frozen versions.\n ","current","This is for the latest official release which changes each time we push out a new\n release. This version is ideally well tested and bug\n free, but you may want to specify a particular frozen version instead once you are\n satisfied it is working.","This is for the next release, while it is still being tested and before it becomes the\n official current release. Please test this version regularly so that you know as soon\n as possible whether there are any problems that should be addressed before this version\n becomes the official release.","When we release new versions of Google Charts, some of the changes\nare big, like entirely new chart types. Other changes are small,\nlike enhancements to the appearance or behavior of existing\ncharts.","Many Google Chart creators fine-tune the look and feel of their\ncharts until it's exactly what they want. Some creators might feel\nmore comfortable knowing that their charts will never change,\nregardless of what improvements we make in the future. For those\nusers, we support frozen Google Charts.","Frozen chart versions are identified by number, and they're\ndescribed in our\n","Official Releases",".\nTo load a frozen version, replace ","\n oder "," in your call of "," with the frozen version\nnumber:","\n\n\n","We expect that frozen versions will remain available indefinitely,\nthough we may retire frozen versions that have security concerns. We\nwill typically not provide support for frozen versions, except to\nunhelpfully suggest that you upgrade to a newer version.","Load Settings","The second parameter in your call of ","\n is an object for specifying settings. The following properties are supported for settings.\n ","packages","An array of zero or more packages. Each package that is loaded will have the code\n required to support a set of functionality, typically a type of chart.\n The package or packages you need to load are listed in the documentation for each type of\n chart. You can avoid specifying any packages if you use\n a ChartWrapper\n to automatically load what will be required.\n\n ","language","The code for the language or locale that should be to customize text that might be\n part of the chart. See Locales for more details.\n\n ","callback","A function that will be called once the packages have been loaded. Alternatively,\n you can specify this function by calling ","\n as demonstrated in the example above. See ","Callback"," for more\n details.\n\n","\n google.charts.load('current', { packages: [ 'corechart'], callback: drawChart });\n","mapsApiKey","(v45) This setting lets you specify a key that you may use with\n "," and\n ",".\n You may want to do this rather than use the default behavior which may result in\n occasional throttling of service for your users.\n Learn how to set up your own key for using the 'Google Maps JavaScript API' service here:\n ","\n Get a Key/Authentication",". Your code will look something like this:\n\n","\n var myMapsApiKey = 'SomeMagicToSetThis';\n google.charts.load('45', { packages: [ 'geochart'], mapsApiKey: myMapsApiKey });\n","safeMode","(v47)\n When set to true, all charts and tooltips that generate HTML from\n user-supplied data will sanitize it by stripping out unsafe elements and attributes.\n Alternatively (v49+), the library can be loaded in the safe mode using a shortcut that\n accepts the same loading settings, but always loads the \"current\" version:\n\n","\n google.charts.safeLoad({ packages: ['corechart'] });\n","Locales","Locales are used to customize text for a country or language,\n affecting the formatting of values such as currencies, dates, and\n numbers.","By default, the Google Charts is loaded with the \"en\"\n locale. You can override this default by explicitly specifying a\n locale in the loading settings.\n","To load a chart formatted for a specific locale, use\nthe "," setting like so:\n","\n // Load Google Charts for the Japanese locale.\n google.charts.load('current', {'packages':['corechart'], 'language': 'ja'});\n","Follow\nthis link for a live example.","\n Before you can use any of the packages loaded by "," you have to\n wait for the loading to finish. It is not enough to just wait for the document to\n finish loading. Since it can take some time before this loading is finished, you need to\n register a callback function. There are three ways this can be done. Either specify a\n "," setting in your "," call, or call\n ","setOnLoadCallback"," passing a function as the argument, or use the Promise that\n is returned by the call of ","\n Note that for all of these ways, you need to provide a function definition,\n rather than call the function. The function definition you provide can be either a\n named function (so you just give its name) or an anonymous function.\n When the packages have finished loading, this callback function will be called with no\n arguments. The loader will also wait for the document to finish loading before calling the\n callback.\n ","\n If you want to draw more than one chart, you can either register more than one callback\n function using ",", or you can combine them into one function.\n Learn more about how to\n ","\n Draw Multiple Charts on One Page","\n google.charts.setOnLoadCallback(drawChart1);\n google.charts.setOnLoadCallback(drawChart2);\n // OR\n google.charts.setOnLoadCallback(\n function() { // Anonymous function that calls drawChart1 and drawChart2\n drawChart1();\n drawChart2();\n });\n","\n Callback via Promise\n ","\n Another way of registering your callback is to use the Promise that is returned from the\n "," call. You do this by adding a call to the ","then()","\n method with code that looks like the following.\n ","\n google.charts.load('upcoming', {packages: ['corechart']}).then(drawChart);\n","\n One benefit of using the Promise is that then you can easily\n draw more charts just by chaining more ",".then(anotherFunction)"," calls.\n Using the Promise also ties the callback to the specific packages required for\n that callback, which is important if you want to load more packages with another call of\n ","google.charts.load()","Update Library Loader Code","Previous versions of Google Charts used different code to load the libraries. The table below\n shows the old library loader code versus the new.","Old Library Loader Code","\n\n ","New Library Loader Code","\n\n ","To update your existing charts, you can replace the old library loader code with the new code.\nHowever, keep in mind the\nlimitations on loading libraries described above.","Next: Preparing the\n Data","Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.","Last updated 2024-07-10 UTC.","\n [{\n \"type\": \"thumb-down\",\n \"id\": \"missingTheInformationINeed\",\n \"label\":\"Missing the information I need\"\n },{\n \"type\": \"thumb-down\",\n \"id\": \"tooComplicatedTooManySteps\",\n \"label\":\"Too complicated / too many steps\"\n },{\n \"type\": \"thumb-down\",\n \"id\": \"outOfDate\",\n \"label\":\"Out of date\"\n },{\n \"type\": \"thumb-down\",\n \"id\": \"samplesCodeIssue\",\n \"label\":\"Samples / code issue\"\n },{\n \"type\": \"thumb-down\",\n \"id\": \"otherDown\",\n \"label\":\"Other\"\n }]\n ","\n [{\n \"type\": \"thumb-up\",\n \"id\": \"easyToUnderstand\",\n \"label\":\"Easy to understand\"\n },{\n \"type\": \"thumb-up\",\n \"id\": \"solvedMyProblem\",\n \"label\":\"Solved my problem\"\n },{\n \"type\": \"thumb-up\",\n \"id\": \"otherUp\",\n \"label\":\"Other\"\n }]\n ","\n \n Need to tell us more?\n \n ","Questions?","\n \n \n Forum\n \n ","\n \n \n Issues & Requests\n \n ","\n \n \n \n \n \n FAQ\n \n ","Product Info","\n \n \n Releases\n \n ","\n \n \n Terms of Service\n \n ","\n \n \n \n \n \n Security and Privacy\n \n ","Developer consoles","\n \n \n Google API Console\n \n ","\n \n \n Google Cloud Platform Console\n \n ","\n \n \n Google Play Console\n \n ","\n \n \n Firebase Console\n \n ","\n \n \n Actions on Google Console\n \n ","\n \n \n Cast SDK Developer Console\n \n ","\n \n \n \n \n \n Chrome Web Store Dashboard\n \n ","\n Android\n ","\n Chrome\n ","\n Firebase\n ","\n Google Cloud Platform\n ","\n All products\n ","\n Terms\n ","\n Privacy\n ","\n Manage cookies\n ","\n \n Sign up for the Google for Developers newsletter\n \n \n \n Subscribe\n \n \n "]}
The first line of this example loads the loader itself.
You can only load the loader one time no matter how many charts you plan to draw.
After loading the loader, you can call the google.charts.load function one
or more times to load packages for particular chart types.
The first argument to google.charts.load is the version name or number,
as a string. If you specify 'current', this 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
any changes to your charts are acceptable.)
The example 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
'Loading' section of the documentation page for each chart.
This example also assumes that you have a JavaScript function
named drawChart defined somewhere in your web page. You can name
that function whatever you like, but be sure it is globally unique and
that it is defined before you reference it in your call to
google.charts.setOnLoadCallback.
Note: Previous versions of Google Charts used code that
differs from the above to load the libraries. To update your existing charts to
use the new code, see Update Library Loader Code.
Here is a complete
example of drawing a pie chart using the basic loading technique:
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
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>
Loading Details
First you must load the loader itself,
which is done in a separate script tag with
src="https://www.gstatic.com/charts/loader.js". This tag can be either in the
head oder body of the document, or it can be inserted dynamically
into the document while it is being loaded or after loading is completed.
After the loader is loaded, you are free to call google.charts.load.
Where you call it can be in a script tag in the head oder
body of the document, and you could call it either while the document is
still loading or any time after it has finished loading.
As of version 45, you may call google.charts.load more than one
time in order to load additional packages, though it is safer if you can avoid doing so.
You must provide the same version number and language settings each time.
You can now use the old JSAPI autoload URL parameter,
but the value of this parameter must use strict JSON
formatting and URL encoding. In JavaScript, you can do the encoding of
jsonObject with this code:
encodeURIComponent(JSON.stringify(jsonObject)).
Limitations
If you are using versions prior to v45, there are a couple minor but important
limitations with how you load Google Charts:
You can only call google.charts.loadonce. But you can list
all the packages that you'll need in one call, so there's no need to
make separate calls.
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.
For Geochart and
Map Chart, you must load both the
old library loader and the new library loader. Again, this is only for versions
prior to v45, and you should not do this for later versions.
The first argument of your google.charts.load call is the version name or number.
There are only two special version names at this time, and several frozen versions.
current
This is for the latest official release which changes each time we push out a new
release. This version is ideally well tested and bug
free, but you may want to specify a particular frozen version instead once you are
satisfied it is working.
upcoming
This is for the next release, while it is still being tested and before it becomes the
official current release. Please test this version regularly so that you know as soon
as possible whether there are any problems that should be addressed before this version
becomes the official release.
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
Official Releases.
To load a frozen version, replace current
oder upcoming in your call of google.charts.load with the frozen version
number:
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.
Load Settings
The second parameter in your call of google.charts.load
is an object for specifying settings. The following properties are supported for settings.
packages
An array of zero or more packages. Each package that is loaded will have the code
required to support a set of functionality, typically a type of chart.
The package or packages you need to load are listed in the documentation for each type of
chart. You can avoid specifying any packages if you use
a ChartWrapper
to automatically load what will be required.
language
The code for the language or locale that should be to customize text that might be
part of the chart. See Locales for more details.
callback
A function that will be called once the packages have been loaded. Alternatively,
you can specify this function by calling google.charts.setOnLoadCallback
as demonstrated in the example above. See Callback for more
details.
(v45) This setting lets you specify a key that you may use with
Geochart and
Map Chart.
You may want to do this rather than use the default behavior which may result in
occasional throttling of service for your users.
Learn how to set up your own key for using the 'Google Maps JavaScript API' service here:
Get a Key/Authentication. Your code will look something like this:
(v47)
When set to true, all charts and tooltips that generate HTML from
user-supplied data will sanitize it by stripping out unsafe elements and attributes.
Alternatively (v49+), the library can be loaded in the safe mode using a shortcut that
accepts the same loading settings, but always loads the "current" version:
Before you can use any of the packages loaded by google.charts.load you have to
wait for the loading to finish. It is not enough to just wait for the document to
finish loading. Since it can take some time before this loading is finished, you need to
register a callback function. There are three ways this can be done. Either specify a
callback setting in your google.charts.load call, or call
setOnLoadCallback passing a function as the argument, or use the Promise that
is returned by the call of google.charts.load.
Note that for all of these ways, you need to provide a function definition,
rather than call the function. The function definition you provide can be either a
named function (so you just give its name) or an anonymous function.
When the packages have finished loading, this callback function will be called with no
arguments. The loader will also wait for the document to finish loading before calling the
callback.
If you want to draw more than one chart, you can either register more than one callback
function using setOnLoadCallback, or you can combine them into one function.
Learn more about how to
Draw Multiple Charts on One Page.
google.charts.setOnLoadCallback(drawChart1);
google.charts.setOnLoadCallback(drawChart2);
// OR
google.charts.setOnLoadCallback(
function() { // Anonymous function that calls drawChart1 and drawChart2
drawChart1();
drawChart2();
});
Callback via Promise
Another way of registering your callback is to use the Promise that is returned from the
google.charts.load call. You do this by adding a call to the then()
method with code that looks like the following.
One benefit of using the Promise is that then you can easily
draw more charts just by chaining more .then(anotherFunction) calls.
Using the Promise also ties the callback to the specific packages required for
that callback, which is important if you want to load more packages with another call of
google.charts.load().
To update your existing charts, you can replace the old library loader code with the new code.
However, keep in mind the
limitations on loading libraries described above.