The last step is to draw the chart. First you must instantiate an instance of the chart class that you want to use, and then you must call
draw() on the it.
Instantiating Your Chart
Each chart type is based on a different class, listed in the chart's documentation. For instance, the pie chart is based on the
google.visualization.PieChart class, the bar chart is based on the
google.visualization.BarChart class, and so on. Both pie and bar charts are included in the corechart package that you loaded at the beginning of this tutorial. However, if you want a treemap or geo chart on your page, you must additionally load the 'treemap' or 'geomap' packages.
Google chart constructors take a single parameter: a reference to the DOM element in which to draw the visualization.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
Drawing your chart
After you've prepared your data and options, you are ready to draw your chart.
Your page must have an HTML element (typically a
<div>) to hold your chart.
You must pass your chart a reference to this element,
so assign it an ID that you can use to retrieve a reference using
Anything inside this element will be replaced by the chart when it is
drawn. Consider whether you should explicitly size this
<div> element, but for now, specify the chart size in the
Every chart supports a
draw() method that takes two values: a
DataTable (or a
DataView) object that holds your data, and an optional chart options object. The options object is not required, and you can ignore it or pass in null to use the chart's default options.
After you call
draw(), your chart will be drawn on the page. You should
every time you change the data or the options and want to update the chart.
draw() method is asynchronous: that is, it returns immediately, but the instance that it returns might not be immediately available. In many cases this is fine; the chart will be drawn eventually. However, if you want to set or retrieve values on a chart after you've called
draw(), you must wait for it to throw the ready event, which indicates that it is populated. We'll cover listening for events in the next page.
If your chart doesn't draw on the page, here are some approaches that might help you solve your problems:
- Search the Google Visualization 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.