You can develop a chart using
the Google Web Toolkit! See the GWT
chart page for more information.

You can download the goog.visualization API
class and method definitions to enable autocompletion in your IDE (code editor).
Download the file from http://www.google.com/uds/modules/gviz/gviz-api.js and
save it to your project. Most IDEs will index it automatically and enable
autocompletion, though your IDE might be different. Note that the file might
not always be up to date; check the reference
pages for the most up to date API reference.

Choose
a Namespace

Your chart can be embedded on a page that hosts other charts or other
unrelated JavaScript. To avoid naming conflicts with other code or CSS class names,
you should choose a unique namespace for your chart code. A good choice
for a namespace is the URL that you will use to host your script (minus the WWW
and any extensions). So, for example, if your chart will be posted at www.example.com,
you would use example as
your unique namespace. You can add additional suffixes, separated by . marks,
to further group your chart (all of Google's charts have the namespace google.visualization).
Use your namespace object to store your chart object, as well as any global
variables that you might need.

Here is an example of creating a namespace object to hold a chart
class called MyTable, as well as any global variables needed:

If you use CSS, make sure not to write CSS rules that can affect other charts
on the page. For example, a rule such as td {color: blue;} is highly
discouraged, since it will affect any other <td> element on
the page, not only within your chart. One way to overcome this is to enclose
your entire chart in a <div> with a class name, and
have all your CSS rules apply only to elements that are descendants of an element
with that class name. For example, The following CSS rule will affect only <td> elements
that have an element with the class name
"example" as an ancestor.

td.example {color: blue;}

Then you can wrap your chart in a <div> with :

<div class="example">
...
</div>

Implement your Chart

You'll need to implement your chart as a JavaScript object that exposes
the standard methods described in the Reference
Section.
The two required methods are the constructor and the draw() methods.
You can also expose any additional methods to your user that are appropriate for
your chart. Just remember that easier to use is better.

The Constructor

Your chart should expose a single constructor that takes a single parameter,
a DOM element into which you will draw your chart. Typically, charts
store a local copy of this element in the constructor for later use:

function example.MyTable(container) {
this.container = container
}

The draw() Method

Your chart class should have a method draw() defined in the
prototype of your chart class.
The draw() method accepts two parameters:

An optional map of name/value options for your chart.
The names and value types of the options are defined
by you for your specific chart. For example, in the Hello Chart
example below, the chart supports an option named 'showLineNumber' with
a value of type Boolean.
You should support a default value for each option, in case the user does not
pass a value for a specific option. This parameter is optional, so you should
also be prepared to use all default values if the user does not pass in this
parameter (more information).

Implement Your Events

If you want your chart to fire useful events (for example, timer events,
or user-initiated events such as clicks), you'll need to call the
google.visualization.events.trigger function with the details of your
event (name, properties to send, etc.). You can find details on the Events page.
You can either expose your event details to the client by adding properties to
the event object, or you can expose a get...() method of some type on your chart,
and the client can call that method to get the event details. In either case, document
your methods or event properties well.

Document
Your Chart

If you don't properly document your chart, you probably won't get many users.
Be sure to document the following:

Describe all the methods that you support. The draw() method is common to all
charts, but each chart can support its own additional methods.
(You probably don't need to document your constructor, unless it has non-standard
behavior.) You can find a list of expected methods on the Reference
Page.

Describe all the options that your draw() method supports. This includes
the name of each option, the expected value type, and its the default value.

Describe all the events that you trigger. This means the name and
properties of each event, and when each event is triggered.

List the URL of your chart
library that should be used in the client's <script> include
statement, and give the URL for your documentation.

Give the fully-qualified name of your chart.

Create sample pages that demonstrate how to use your chart with the
options it supports, its events, and custom methods.

Clearly describe the data policy of your chart. Most charts
process the data within the browser, but some may send data to a server, for example
to create an image of a chart or a map. If you do send data to a server:

Clearly define which data is sent.

Note how long the data will be saved on the server.

Document which entities will have access to the data. For example,
Company XYZ, etc.

Specify if the data will be logged and for how long.

Your documentation will be hosted in the same place as your chart code
(see Submit Your Chart to the Gallery below).

Submit Your Chart to the Gallery

After you've written your chart, submit it for posting in the "Additional Charts" section of our
gallery. Submitting a chart means that you'll have to sign an agreement with us
agreeing not to create malicious software, or misuse user data. The gallery is
just a list of pointers to
charts that we've created, or that we've reviewed; you can choose to
host the actual JavaScript library and documentation on your own site,
or you can have Google host the library and documentation for you. Specify whether
you want us to host your chart when you post it to the gallery.

Troubleshooting

If your code doesn't seem to be working, here are some approaches
that might help you solve your problems:

Look for typos. Remember that JavaScript is a case-sensitive language.

Search the Google Chart API discussion group.
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.

Localization

If you expect your chart to be used by people in a variety of countries,
you might want to design your chart to be localized for different languages
and cultures. The most basic localization is to translate the standard text
strings in the UI according to the user's browser settings.
A more advanced form of localization would be to change number formats depending
on localization, or possibly even UI design. If you decide to localize your
chart, list the languages that your chart supports in your
documentation, and provide a default setting of a commonly used language. It
is also useful to include a "change language" button in the UI of
your chart, in case you get the language wrong. The common way to detect
browser language is to look at the Accept-Language HTML
header.