# Data Visualisation with Google Charts
# 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.
# Pie Charts from SQL Data
In the previous tutorial, the chart data was entered manually.
In this tutorial, the chart data will come directly from a MySQL database.
The example below uses the `cyber_security_events` table.
---
## Step 1 - Create the SQL Query
The following query counts how many events belong to each risk level.
```sql
SELECT
risk_level,
COUNT(*) AS total
FROM cyber_security_events
GROUP BY risk_level;
```
Example result:
| risk_level | total |
|------------|------:|
| Low | 15 |
| Medium | 8 |
| High | 3 |
---
## Step 2 - Retrieve the Data with PHP
```php
query($sql);
$data = [];
while($row = $result->fetch())
{
$data[] = [
$row['risk_level'],
(int)$row['total']
];
}
?>
```
---
## Step 3 - Convert the PHP Array to JSON
Google Charts uses JavaScript arrays.
PHP can convert data into JavaScript using:
```php
```
---
## Step 4 - Create the Chart
```html
```
---
## Step 5 - Add the Chart Container
```html
```
---
## Complete Example
```php
query($sql);
$data = [];
while($row = $result->fetch())
{
$data[] = [
$row['risk_level'],
(int)$row['total']
];
}
?>
```
[](https://mr.napper.au/uploads/images/gallery/2026-06/image-1782085720266.png)
## Next Tutorial
**Bar Charts from SQL Data**
Learn how to display the same SQL data as a bar chart.
# Bar Charts from SQL Data
Bar charts are useful for comparing values between categories.
In this tutorial, the number of security events at each risk level will be displayed as a bar chart.
---
## Step 1 - Create the SQL Query
```sql
SELECT
risk_level,
COUNT(*) AS total
FROM cyber_security_events
GROUP BY risk_level;
```
Example result:
| risk_level | total |
|------------|------:|
| Low | 15 |
| Medium | 8 |
| High | 3 |
---
## Step 2 - Retrieve the Data with PHP
```php
query($sql);
$data = [];
while($row = $result->fetch())
{
$data[] = [
$row['risk_level'],
(int)$row['total']
];
}
?>
```
---
## Step 3 - Create the Chart Container
```html
```
---
## Step 4 - Create the Bar Chart
```html
```
[](https://mr.napper.au/uploads/images/gallery/2026-06/image-1782085906217.png)
## Changing the Chart Type
Only one line of code needs to change.
Pie Chart:
```javascript
new google.visualization.PieChart()
```
Bar Chart:
```javascript
new google.visualization.BarChart()
```
Column Chart:
```javascript
new google.visualization.ColumnChart()
```
Line Chart:
```javascript
new google.visualization.LineChart()
```
---
## Complete Example
```php
query($sql);
$data = [];
while($row = $result->fetch())
{
$data[] = [
$row['risk_level'],
(int)$row['total']
];
}
?>
```
---
## Next Tutorial
**Line Charts from SQL Data**
Learn how to display trends and changes over time using a line chart.
# Line Charts from SQL Data
Line charts are used to display trends and changes over time.
In this tutorial, the number of security events per day will be displayed using a line chart.
---
## Step 1 - Create the SQL Query
The following query counts the number of events recorded each day.
```sql
SELECT
DATE(event_timestamp) AS event_date,
COUNT(*) AS total
FROM cyber_security_events
GROUP BY DATE(event_timestamp)
ORDER BY event_date;
```
Example result:
| event_date | total |
|------------|------:|
| 2026-06-01 | 12 |
| 2026-06-02 | 18 |
| 2026-06-03 | 9 |
| 2026-06-04 | 15 |
---
## Step 2 - Retrieve the Data with PHP
```php
query($sql);
$data = [];
while($row = $result->fetch())
{
$data[] = [
$row['event_date'],
(int)$row['total']
];
}
?>
```
---
## Step 3 - Create the Chart Container
```html
```
---
## Step 4 - Create the Line Chart
```html
```
[](https://mr.napper.au/uploads/images/gallery/2026-06/image-1782086063395.png)
---
## Understanding the Chart
The horizontal axis displays:
```text
Date
```
The vertical axis displays:
```text
Number of Security Events
```
This makes it easier to identify:
- Busy periods
- Trends over time
- Sudden increases in activity
- Patterns in the data
---
## Complete Example
```php
query($sql);
$data = [];
while($row = $result->fetch())
{
$data[] = [
$row['event_date'],
(int)$row['total']
];
}
?>
```