- Getting Started
- What is the Google Visualization API?
- What can I do with the Visualization API?
- Where can I find documentation for the Visualization API?
- How do I create a new Chart?
- What is a Data Source URL?
- Where can I find example code of Chart apps using the Visualization API?
- Can a Flash application access the Visualization API?
- Can I access a chart from a Java application?
- Can I access a chart from an application written with the Google Web Toolkit (GWT) compiler?
- I have a different question/problem, who do I contact to get more information?
- Using the API
- What is the difference between the Google Chart API and the Google Visualization API?
- What data sources can I access using the Visualization API?
- My application expects the data it receives to be in a specific format. How do I handle exceptions?
- Is it safe to embed a chart in my web site?
- Can I use charts offline?
- Can I download and host the chart code locally, or on an intranet?
- Troubleshooting
- Google Visualization API Policy
- Becoming Active in the Community
Getting Started
- What is the Google Visualization API?
- The Google Visualization API allows you to create charts and reporting applications over structured data and helps integrate these directly into your website.
- What can I do with the Visualization API?
- With the Google Visualization API, you can access structured data--created locally in your browser or retrieved from supported data sources in a simple tabular format. You can also implement your own data source as Visualization API data source and enable any Visualization-compliant visualization and/or application to access your data. The format is amenable to use by reporting, analysis or chart applications. You can thus visualize the data and/or add new functionality to applications, such as Google Spreadsheets.
- Where can I find documentation for the Visualization API?
- You can find the developer guide and all other related documentation at https://developers.google.com/chart/interactive/docs.
- How do I create a new Chart?
- The best way to get started is to read the Introduction, and the Quickstart section.
- What is a Data Source URL?
- A Data Source URL is the unique URL identifier of a Visualization API data source. A data source URL may also include Chart Query Language parameters. In this case a query (such as sorting, grouping, etc) is performed on the data source prior to fetching the data.
- Where can I find example code of Chart apps using the Visualization API?
- You can find example code at the Visualization API example code documentation.
- Can a Flash application access the Visualization API?
- Absolutely. The Visualization API uses a JavaScript API, but there are libraries that enable Flash apps to connect with Javascript code. One such library you may find useful can be found at http://code.google.com/p/swfobject. See below for some development issues affecting Flash.
- How do I implement a data source?
- Read the section on using and creating a chart, to learn how charts work, then read Implementing a Data Source to learn how to create a data source. You can also use the Google Chart Data Source Java library to get started quickly if you use Java.
- Can I access a chart from a Java application?
- Yes. The Google Visualization Library for the Google Web Toolkit (GWT) allows you to access the API compliant visualizations from Java code compiled with the GWT compiler and to write Visualization API compliant visualizations in Java using the GWT complier. The release candidate library also supports the Visualization API event model.
- Can I access a chart from an application written with the Google Web Toolkit (GWT) compiler?
- Yes. The Google Visualization Library for the Google Web Toolkit (GWT) allows you to access the API compliant visualizations from Java code compiled with the GWT compiler and to write Visualization API compliant visualizations in Java using the GWT complier. The release candidate library also supports the Visualization API event model.
- I have a different question/problem, who do I contact to get more information?
- Please post your question in the Google Visualization API discussion group to get help from the Visualization developer community. The Google Visualization team also participates in this group to answer questions.
Using the API
- What is the difference between the Google Chart API and the Google Visualization API?
-
The Chart API provides a simple way to create image charts of various kinds by sending a formatted URL that includes both the data and chart configuration options to a Google server. The Chart API includes a closed set of charts with various options. The Chart API datasets are limited to the size of a URL (roughly 2K).
The Visualization API provides a way to connect charts and data sources over the web and to publish them:
-
- The Visualization API provides a Javascript API to access charts.
- Its gallery of charts includes Google-created charts, but is also open to any third party to create their own Visualization API-compliant visualizations.
- Visualization API charts and charts can be anything that can be rendered by a browser. This includes images, Javascript, vector-graphics, Flash, etc.
- A considerable number of Chart API charts are accessible through the Visualization API, although some of their configuration options may not be available.
- The API also provides a documented wire protocol and a way for anyone to expose their data sources to any of the APIs visualizations.
- The API has a defined event model that allows charts to throw and receive events and thus communicate with their host page and/or other charts on the page.
- What data sources can I access using the Visualization API?
- With the Visualization API you can access data locally from your browser by creating the API's standard DataTable format, or access any data source that supports the API. Well-known applications that already support the API are Google Spreadsheets and Salesforce.com on their Force.com developer platform. You may also implement your own data as a Chart data source.
- My application expects the data it receives to be in a specific format. How do I handle exceptions?
-
You can use the
getNumberOfColumns()
andgetColumnType()
methods of classgoogle.visualization.DataTable
to test that the data you get matches what you expect, and issue an error message for mismatches. - Is it safe to embed a chart in my web site?
- Running third party code directly on your web site poses inherent risks. Google makes no promises or representations about application performance, quality, security, or content. Chart applications that do not comply with the Google Visualization API Terms of Service may be removed from the galleries.
- Can I use charts offline?
- Your users' computers must have access to https://www.gstatic.com/charts/loader.js in order
to use the interactive features of Google Charts.
This is because the visualization libraries that your page
requires are loaded dynamically before you use them. The code for loading the appropriate
library is part of the included script,
and is called when you invoke the
google.charts.load()
method. Our terms of service do not allow you to download thegoogle.charts.load
orgoogle.visualization
code to use offline. - Can I download and host the chart code locally, or on an intranet?
- Sorry; our terms of service do not allow you to download
and save or host the
google.charts.load
orgoogle.visualization
code. However, if you don't need the interactivity of Google Charts, you can screenshot the charts and use them as you wish.
Troubleshooting
- Why doesn't my chart appear?
-
First, check your JavaScript console. On Chrome, you can access the JavaScript console via Chrome->View->Developer->JavaScript Console, or Chrome->Tools->JavaScript Console. All modern browsers have a JavaScript console; you may need to poke around menus with names like "Advanced" or "Developer Tools" to find it.
Hopefully, the console leads you immediately to the problem. Sometimes, however, it'll be hard to translate the console message to the underlying cause. Here are some common pitfalls:
- You may be using the Google Loader incorrectly.
- Only load the charts/loader.js once.
No matter how many charts you have on your web page,
you should have one and only one call like this:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> // Do this ONCE.
This can be in the head or the body of your web page, depending on when you want the load to occur. - Ideally, call
google.charts.load
only once, with all the packages you'll need for your web page.<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load("current", {packages: ["corechart", "timeline"]}); google.charts.setOnLoadCallback(drawBarChart1); function drawBarChart1() { ... var barChart1 = new google.visualization.BarChart(document.getElementById('chart1')); ... } google.charts.setOnLoadCallback(drawBarChart2); function drawBarChart2() { ... var barChart2 = new google.visualization.BarChart(document.getElementById('chart2')); ... } google.charts.setOnLoadCallback(drawTimeline); function drawTimeline() { ... var timeline = new google.visualization.Timeline(document.getElementById('chart3')); ... } </script> <div id="chart1"></div> ... <div id="chart2"></div> ... <div id="chart3"></div>
- Every chart should have a unique element id
(e.g.,
chart1
,chart2
in the above example). - Look for typos. Remember that JavaScript is a case-sensitive language.
If you're still stumped, search the Google Visualization API discussion group to see if anyone had encountered a similar problem. If you can't find a post that answers your question, post your question to the group along with a link to a web page that demonstrates the problem. If possible, include a jsfiddle.
- Why are my months and days off by one?
- Google Charts uses JavaScript, which uses zero-based indexing. The first day of the month is 0, and the months range from 0 (January) to 11 (December). If your code assumes one-based indexing, subtract one before putting the your data into a JavaScript date object.
- Why do my charts work in some browsers but not all?
- We recommend caniuse.com for a
trove of information about browser incompatibilities. With Google
Charts, there are sometimes problems in Internet Explorer 8 and
earlier, for two reasons:
- IE8 doesn't support SVG, so Charts fails over into VML, which is more limited.
- IE8's JavaScript doesn't allow trailing commas in lists.
- Why does my Flash-based chart not show up when I'm testing it?
- Because of Flash security settings, Flash-based charts might not work correctly when accessed from a file location in the browser (e.g., file:///c:/webhost/myhost/myviz.html) rather than from a web server URL (e.g., http://www.myhost.com/myviz.html). This is typically a testing issue only; the issue is not a problem when you access the chart from an http:// address. You can overcome this issue as described on the Macromedia web site. In general we recommend avoiding Flash development when possible.
Google Visualization Program Policy
- What is the Google Visualization Program Policy?
-
As described in the Terms
of Service, we may decline to include and display content that violates our
program policy by displaying or linking to:
- Illegal content.
- Invasions of personal privacy.
- Pornography or obscenity.
- Content, such as malicious code, that interferes with or is harmful to a user's computer or the functioning of the host web page.
- Promotions of hate or incitement of violence.
- Violations of copyright. Please see our DMCA policy for more information.
- Violations of trademark.
- Impersonations of third parties.
Developers that create charts that collect data, agree to maintain and link to a legally adequate privacy policy. Additionally, we require developers to ensure that their chart is secure, and to maintain their application as long as it resides in the chart directory.
These policies may be revised from time to time without notice.
- Is the Google Visualization API available for commercial use?
- Yes. For the fine print please refer to the Google Visualization API Terms of Service.
- Can I use the Google Visualization API to create client-side software?
- Currently we do not allow developers to use the Visualization API to create client-side software. You may only use the Visualization API through the interface provided. For the fine print please refer to the Google Visualization API Terms of Service.
- Is Google logging all my chart data?
- The chart data included in the HTTP request is saved in temporary logs for no longer than two weeks for internal testing and debugging purposes. Of course you should understand that if your chart appears in an image tag on a public webpage, it could be crawled.
- Violations of the program policies.
- Violations of these Program Policies can result in the disabling or removal of your chart, being blacklisted from uploading future charts, termination of your Google accounts and/or deletion of all your charts.
Becoming Active in the Community
- Start by placing your chart on the Chart Gallery. You can link back to your site and provide your source code if you wish. Get involved in our discussion group to get the community's feedback.
- What is the Chart Gallery?
- The Chart Gallery is a listing of applications that use the Visualization API. It provides a central location for the Visualization developer community to share Chart applications. To submit your chart application to the gallery, apply online.
- How can I promote my Chart data source?
- Post your implementation on the Visualization Group. If we like it, we might even mention it ourselves.