Google Charts – JavaScript Data Visualization
Google Charts is a powerful, free JavaScript library for creating interactive charts and dashboards that run in any modern browser. It uses SVG and HTML5 to render graphics, making charts responsive, interactive, and visually appealing.
Getting Started
1. Load Google Charts Library
<script type="text/javascript" src="<https://www.gstatic.com/charts/loader.js>"></script>
2. Load Specific Chart Packages
google.charts.load('current', {packages: ['corechart', 'bar']});
3. Set a Callback
google.charts.setOnLoadCallback(drawChart);
Creating a Basic Chart
Example: Column Chart
<div id="columnChart" style="width: 600px; height: 400px;"></div>
<script>
function drawChart() {
// Data
var data = google.visualization.arrayToDataTable([
['Month', 'Sales'],
['Jan', 1000],
['Feb', 1170],
['Mar', 660],
['Apr', 1030]
]);
// Options
var options = {
title: 'Monthly Sales',
hAxis: { title: 'Month' },
vAxis: { title: 'Sales' },
legend: 'none',
colors: ['#1b9e77']
};
// Draw chart
var chart = new google.visualization.ColumnChart(document.getElementById('columnChart'));
chart.draw(data, options);
}
</script>
Supported Chart Types
| Type | Description |
|---|---|
| Line Chart | Trends over time or continuous data |
| Column/Bar | Compare quantities across categories |
| Pie Chart | Show percentage distribution |
| Area Chart | Highlight cumulative trends |
| Scatter Chart | Correlation between two variables |
| Combo Chart | Combine bar & line charts |
| Geo Chart | Visualize data on maps |
| Gauge Chart | Display numeric value within a range |
| Timeline Chart | Show events over time |
Customizing Charts
Colors & Fonts
var options = {
colors: ['#e2431e', '#6f9654'],
fontName: 'Arial',
fontSize: 14
};
Titles and Labels
var options = {
title: 'Revenue Growth',
hAxis: { title: 'Quarter' },
vAxis: { title: 'Revenue ($)' }
};
Legends & Tooltips
var options = {
legend: { position: 'top' },
tooltip: { isHtml: true }
};
3D & Stacked Charts
var options = {
is3D: true, // For Pie Charts
isStacked: true // For Bar/Column Charts
};
Dynamic Data Update
data.setValue(1, 1, 1250); // Update Feb sales
chart.draw(data, options); // Redraw chart
Or load data from JSON/Google Sheets using google.visualization.DataTable().
Advantages of Google Charts
- Free and easy to use
- Highly interactive (zoom, hover, click events)
- Works well with dynamic data from APIs or Google Sheets
- Supports responsive and mobile-friendly charts
- Wide variety of chart types and customization options
When to Use Google Charts
- Web dashboards
- Reports with interactive visualizations
- Business or finance applications
- Real-time data monitoring and analytics