Draw the Chart 

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);

      // Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
//Div that will hold the pie chart
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

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 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'));

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 <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 document.getElementById(). 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 <div> 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, or the Firebug add-on. In Chrome, you can use the developer tools (Shift + Ctl + J).
  • 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.

 

 

 

More Information