# Creating Charts with Google Charts
Google Charts is a free JavaScript library that can create professional graphs and charts using your data.
Google Charts can display:
- Pie Charts
- Bar Charts
- Column Charts
- Line Charts
- Area Charts
In this tutorial you will create your first chart using sample data.
---
## Step 1 - Load the Google Charts Library
Add the following line inside the `` section of your webpage.
```html
```
---
## Step 2 - Create a Chart Container
Add a `div` where the chart will be displayed.
```html
```
---
## Step 3 - Create the Chart
Add the following JavaScript before the closing `` tag.
```html
```
[](https://mr.napper.au/uploads/images/gallery/2026-06/image-1782085452882.png)
---
## Understanding the Data
Google Charts uses an array to store chart data.
```javascript
[
['Risk Level', 'Count'],
['Low',15],
['Medium',8],
['High',3]
]
```
The first row contains the headings.
The remaining rows contain the data values.
---
## Changing the Chart Type
The chart type is controlled by:
```javascript
google.visualization.PieChart
```
You can change it to:
| Chart | Class |
|------|------|
| Pie Chart | PieChart |
| Column Chart | ColumnChart |
| Bar Chart | BarChart |
| Line Chart | LineChart |
| Area Chart | AreaChart |
Example:
```javascript
google.visualization.BarChart
```
will display the same data as a bar chart.
---
## Complete Example
```html
Google Charts Example
```
---
## Next Tutorial
**Pie Charts from SQL Data**
Instead of manually entering the data, you will learn how to retrieve information from a MySQL database and display it automatically in a Google Chart.