# Quick Start

Here's a simple example of a page that displays a [pie chart](https://developers.google.com/chart/interactive/docs/gallery/piechart):

|---|---|
|   |   |

> [!IMPORTANT]
> The chart above is interactive--try mousing over the slices or legend entries.

You can copy the snippet below to an .html file on your computer and open it in your browser to display
the pie chart shown above:

```html
<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 corechart 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"></div>
  </body>
</html>
```

## How About a Bar Chart?

Convert the pie chart to a bar chart by replacing `google.visualization.PieChart` with `google.visualization.BarChart` in the code and reloading your browser. You
may notice that the "Slices" legend is truncated. To fix this, change `width` to 500
from 400, save the file, and reload your browser.
[**Next: *How does it
work?***](https://developers.google.com/chart/interactive/docs/basic_load_libs)