# Draw the Chart ```html //Div that will hold the pie chart
``` 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. ## Instantiate 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](https://developers.google.com/chart/interactive/docs/gallery/treemap#Loading) or [geo chart](https://developers.google.com/chart/interactive/docs/gallery/geomap) on your page, you must [additionally load the 'treemap' or 'geomap' packages](https://developers.google.com/chart/interactive/docs/basic_load_libs). Google chart constructors take a single parameter: a reference to the DOM element in which to draw the visualization. ```javascript var chart = new google.visualization.PieChart(document.getElementById('chart_div')); ``` ## Draw 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 `
`) 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 `document.getElementById()`. Anything inside this element will be replaced by the chart when it is drawn. Consider [whether you should explicitly size this `
` element](https://developers.google.com/chart/interactive/docs/basic_customizing_chart#sizing), but for now, specify the chart size in the `
` HTML. 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 call the `draw()` method every time you change the data or the options and want to update the chart. The `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. ### Troubleshooting If your chart doesn't draw on the page, here are some approaches that might help you solve your problems: - Look for typos. Remember that JavaScript is a case-sensitive language. - Use a JavaScript debugger. In Firefox, you can use the JavaScript console, the [Venkman Debugger](http://www.mozilla.org/projects/venkman/), or the [Firebug add-on](https://addons.mozilla.org/en-US/firefox/addon/1843). In Chrome, you can use the developer tools (Shift + Ctl + J). - Search the [Google Visualization API discussion group](http://groups.google.com/group/google-visualization-api). 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. [**Next: *Draw Multiple Charts***](https://developers.google.com/chart/interactive/docs/basic_multiple_charts) ## More Information - [`draw()` method](https://developers.google.com/chart/interactive/docs/reference#visdraw) - [Chart Drawing Techniques](https://developers.google.com/chart/interactive/docs/drawing_charts)