Clean • Professional
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.
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);
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>
| 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 |
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
};
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().