Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add Google Charts to your web page?
Google Charts is a powerful JavaScript library that allows you to create interactive charts for web pages. You can add Google Charts to your web page using the google.charts.load() method and display various chart types like bar charts, pie charts, and line charts.
Syntax
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// Chart configuration and drawing code
}
Configure the Chart Data
First, create a function to configure the chart data. The data is structured using Google's DataTable format −
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Year", "India"],
["2019", 500],
["2020", 800],
["2021", 1000],
["2022", 1200],
["2023", 1400]
]);
}
Set Chart Options
Configure the chart options including title and other styling properties −
var options = {
title: "Educated people(in millions)",
backgroundColor: '#f9f9f9'
};
Draw the Chart
Use the BarChart class to create and render the chart in the specified container −
var chart = new google.visualization.BarChart(
document.querySelector(".barchartContainer")
);
chart.draw(data, options);
Example: Complete Google Charts Implementation
Here's a complete example showing how to add Google Charts to your web page −
<!DOCTYPE html>
<html>
<head>
<title>Google Charts Tutorial</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<style>
.barchartContainer {
width: 550px;
height: 400px;
margin: 20px auto;
border: 1px solid #ddd;
border-radius: 8px;
padding: 10px;
}
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #333;
margin-bottom: 30px;
}
</style>
</head>
<body>
<h1>Google Charts Example</h1>
<div class="barchartContainer"></div>
<script>
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Year", "Educated People"],
["2019", 500],
["2020", 800],
["2021", 1000],
["2022", 1200],
["2023", 1400]
]);
var options = {
title: "Educated People (in millions)",
backgroundColor: '#f9f9f9',
titleTextStyle: { fontSize: 16, bold: true },
hAxis: { title: 'Count (millions)' },
vAxis: { title: 'Year' }
};
var chart = new google.visualization.BarChart(
document.querySelector(".barchartContainer")
);
chart.draw(data, options);
}
</script>
</body>
</html>
A horizontal bar chart displaying "Educated People (in millions)" with years 2019-2023 on the vertical axis and corresponding values (500, 800, 1000, 1200, 1400) represented as horizontal bars. The chart has a light gray background with a styled border container.
Key Steps
- Load the Library: Include the Google Charts loader script
- Load Packages: Use google.charts.load() to load required chart packages
- Set Callback: Use setOnLoadCallback() to trigger chart drawing when ready
- Create Data: Structure your data using arrayToDataTable()
- Configure Options: Set chart title, styling, and other properties
- Draw Chart: Create chart instance and call draw() method
Conclusion
Google Charts provides an easy way to create interactive charts for web pages. By following the load-configure-draw pattern, you can quickly integrate various chart types into your websites with minimal code and excellent cross-browser compatibility.
508 Views
