-
Hajipur, Bihar, 844101
Hajipur, Bihar, 844101
JS Basics
JS Variables & Operators
JS Data Types & Conversion
JS Numbers & Math
JS Strings
JS Dates
JS Arrays
JS Control Flow
JS Loops & Iteration
JS Functions
JS Functions
Function Definitions
Function Parameters
Function Invocation
Function Call
Function Apply
Function Bind
Function Closures
JS Arrow Function
JS Objects
JS Objects
JS Object Properties
JS Object Methods
JS Object Display
JS Object Constructors
Object Definitions
Object Get / Set
Object Prototypes
Object Protection
JS Classes & Modules
JS Async Programming
JS Advanced
JS Destructuring
JS Bitwise
JS RegExp
JS Precedence
JS Errors
JS Scope
JS Hoisting
JS Strict Mode
JS this Keyword
JS HTML DOM
DOM Intro
DOM Methods
DOM Document
DOM Elements
DOM HTML
DOM Forms
DOM CSS
DOM Animations
DOM Events
DOM Event Listener
DOM Navigation
DOM Nodes
DOM Collections
DOM Node Lists
JS BOM (Browser Object Model)
JS Web APIs
Web API Intro
Web Validation API
Web History API
Web Storage API
Web Worker API
Web Fetch API
Web Geolocation API
JS AJAX
AJAX Intro
AJAX XMLHttp
AJAX Request
AJAX Response
AJAX XML File
AJAX PHP
AJAX ASP
AJAX Database
AJAX Applications
AJAX Examples
JS JSON
JSON Intro
JSON Syntax
JSON vs XML
JSON Data Types
JSON Parse
JSON Stringify
JSON Objects
JSON Arrays
JSON Server
JSON PHP
JSON HTML
JSON JSONP
JS Graphics & Charts
Google Charts is a free, powerful JavaScript library for creating interactive, feature-rich charts and visualizations in web applications. It provides a wide variety of charts, including line, bar, column, pie, area, scatter, geo, gauge, combo, timeline, and annotation charts. Google Charts is widely used in dashboards, reports, and analytics applications because it supports interactive features, responsive layouts, and cross-browser compatibility.
Google Charts allows developers to visualize data from multiple sources in a browser-friendly way. Charts are rendered using SVG or VML, ensuring high-quality, scalable graphics that look great on any device. Google Charts integrates easily with HTML, CSS, and JavaScript, providing interactive features like tooltips, legends, zooming, animations, and data filtering.
Key Features:
Supports multiple chart types: line, bar, column, pie, scatter, combo, geo, gauge, area, bubble, and more.
Highly customizable: colors, labels, axes, tooltips, and legends.
Interactive charts with built-in hover effects, zooming, and panning.
Cross-browser and responsive charts for desktop and mobile.
Can fetch data from Google Sheets, JSON files, or custom JavaScript arrays.
Supports animations for better visual appeal and engagement.
Include the Google Charts loader script:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
Load the required chart packages and define a callback function:
google.charts.load('current', {'packages':['corechart','geochart']});
google.charts.setOnLoadCallback(drawChart);
'corechart'
includes common charts like line, bar, column, and pie charts.
'geochart'
is used for geographic visualizations.
drawChart
is the callback function that will create the chart once the library is loaded.
Create a container for your chart:
<div id="chart_div" style="width: 900px; height: 500px;"></div>
The <div>
acts as a placeholder for your chart.
Width and height can be customized or left responsive.
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month', 'Sales'],
['Jan', 1000],
['Feb', 1170],
['Mar', 660],
['Apr', 1030],
['May', 1200]
]);
var options = {
title: 'Monthly Sales Overview',
curveType: 'function', // Smooth curve
legend: { position: 'bottom' },
width: 900,
height: 500,
animation: {
startup: true,
duration: 1000,
easing: 'out'
},
hAxis: { title: 'Month' },
vAxis: { title: 'Sales' }
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Explanation:
arrayToDataTable()
converts a JavaScript array into a Google Charts-compatible data table.
curveType: 'function'
makes the line smooth.
animation
triggers a dynamic appearance on load.
hAxis
and vAxis
define axis titles.
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Fruit', 'Quantity'],
['Apples', 10],
['Bananas', 15],
['Oranges', 7],
['Grapes', 12]
]);
var options = {
title: 'Fruit Sales Comparison',
legend: { position: 'none' },
width: 900,
height: 500,
colors: ['#1E88E5']
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Bar charts are ideal for categorical comparisons.
Colors can be customized per dataset or individual bar.
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Fruit', 'Quantity'],
['Apples', 30],
['Bananas', 50],
['Oranges', 20]
]);
var options = {
title: 'Fruit Distribution',
is3D: true, // Adds 3D effect
width: 900,
height: 500
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Pie charts are perfect for showing proportions of a whole.
Hovering over slices shows dynamic tooltips with values and percentages.
Combo charts allow you to combine different chart types in one visualization:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month', 'Revenue', 'Profit'],
['Jan', 1000, 400],
['Feb', 1170, 460],
['Mar', 660, 112],
['Apr', 1030, 540]
]);
var options = {
title: 'Revenue vs Profit',
seriesType: 'bars',
series: {1: {type: 'line'}}, // Second series is line
width: 900,
height: 500
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Bars represent Revenue, and the line represents Profit.
Useful for comparing related datasets on a single chart.
Google Charts supports rich interactivity:
Tooltips: Show detailed information on hover.
Legends: Toggle visibility of series dynamically.
Zoom & Pan: Enable explorer
mode for interactive charts:
explorer: { actions: ['dragToZoom', 'rightClickToReset'] }
Charts can be dynamically updated by redrawing with new data.
Use google.visualization.DataView
to filter or modify data dynamically.
Fetch data from Google Sheets or JSON endpoints for live dashboards.
Combine multiple chart types for advanced analytics, like combo charts or annotations.
Adjust colors, font sizes, and axis labels for professional reports.
Dashboard analytics for sales, marketing, or website traffic.
Visualizing financial reports with line, bar, and combo charts.
Comparing product or service performance across multiple months.
Creating interactive geographic visualizations with GeoCharts.
Integrating live data for real-time monitoring applications.
Google Charts is a robust and interactive library for web data visualization.
Supports line, bar, pie, scatter, combo, geo, gauge, and more.
Charts are interactive, responsive, and highly customizable.
Ideal for dashboards, reporting, analytics, and live visualizations.
Integrates easily with Google Sheets, JSON, or custom data.
Mastering Google Charts allows developers to create professional, dynamic, and interactive visualizations efficiently in web applications, making it a top choice for developers working on dashboards or analytics platforms.
Create a basic line chart showing monthly sales for a year with smooth curves and custom axis titles.
Create a bar chart comparing the number of students in 5 different classes, with different colors for each bar.
Build a pie chart representing the distribution of website traffic sources (Direct, Organic, Referral, Social).
Create a 3D pie chart showing the revenue distribution of 4 products with tooltips enabled.
Make a combo chart combining bars for revenue and a line for profit over 6 months.
Implement a scatter chart showing student scores in Math vs Science with customized marker colors and sizes.
Create a geo chart showing the population of different countries with color gradients.
Add dynamic updates to a line chart using new monthly data every 5 seconds.
Create a column chart with stacked bars showing male vs female students in 5 classes.
Build a gauge chart to show website performance score with a color-coded range.
JS Basics
JS Variables & Operators
JS Data Types & Conversion
JS Numbers & Math
JS Strings
JS Dates
JS Arrays
JS Control Flow
JS Loops & Iteration
JS Functions
JS Functions
Function Definitions
Function Parameters
Function Invocation
Function Call
Function Apply
Function Bind
Function Closures
JS Arrow Function
JS Objects
JS Objects
JS Object Properties
JS Object Methods
JS Object Display
JS Object Constructors
Object Definitions
Object Get / Set
Object Prototypes
Object Protection
JS Classes & Modules
JS Async Programming
JS Advanced
JS Destructuring
JS Bitwise
JS RegExp
JS Precedence
JS Errors
JS Scope
JS Hoisting
JS Strict Mode
JS this Keyword
JS HTML DOM
DOM Intro
DOM Methods
DOM Document
DOM Elements
DOM HTML
DOM Forms
DOM CSS
DOM Animations
DOM Events
DOM Event Listener
DOM Navigation
DOM Nodes
DOM Collections
DOM Node Lists
JS BOM (Browser Object Model)
JS Web APIs
Web API Intro
Web Validation API
Web History API
Web Storage API
Web Worker API
Web Fetch API
Web Geolocation API
JS AJAX
AJAX Intro
AJAX XMLHttp
AJAX Request
AJAX Response
AJAX XML File
AJAX PHP
AJAX ASP
AJAX Database
AJAX Applications
AJAX Examples
JS JSON
JSON Intro
JSON Syntax
JSON vs XML
JSON Data Types
JSON Parse
JSON Stringify
JSON Objects
JSON Arrays
JSON Server
JSON PHP
JSON HTML
JSON JSONP
JS Graphics & Charts