This page shows how to load the Google Chart libraries. Show Basic Library LoadingWith few exceptions, all web pages with Google Charts should include the following lines in the <script src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load('current', {packages: ['corechart']}); google.charts.setOnLoadCallback(drawChart); ... </script> 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 The first argument to The example above assumes you want to display a This example also assumes that you have a JavaScript function named 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 src="https://www.gstatic.com/charts/loader.js"></script> After the loader is loaded, you are free to call As of version 45, you may call You can now use the old JSAPI LimitationsIf you are using versions prior to v45, there are a couple minor but important limitations with how you load Google Charts:
Load Version Name or Number The first argument of your 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 <script src="https://www.gstatic.com/charts/loader.js"></script> <script> 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. Load SettingsThe second parameter in your call of google.charts.setOnLoadCallback as demonstrated in the example above. See Callback for more details. google.charts.load('current', { packages: [ 'corechart'], callback: drawChart });mapsApiKey (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: var myMapsApiKey = 'SomeMagicToSetThis'; google.charts.load('45', { packages: [ 'geochart'], mapsApiKey: myMapsApiKey });safeMode(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: google.charts.safeLoad({ packages: ['corechart'] }); LocalesLocales 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 Charts is loaded with the "en" locale. You can override this default by explicitly specifying a locale in the loading settings. To load a chart formatted for a specific locale, use the // Load Google Charts for the Japanese locale. google.charts.load('current', {'packages':['corechart'], 'language': 'ja'}); Follow this link for a live example. Callback Before you can use any of the packages loaded by 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 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('upcoming', {packages: ['corechart']}).then(drawChart); One benefit of using the Promise is that then you can easily draw more charts just by chaining more Update Library Loader CodePrevious versions of Google Charts used different code to load the libraries. The table below shows the old library loader code versus the new.
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. |