JavaScript

coding learning websites codepractice

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 Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JS Google Chart


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.

What is Google Charts?

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.

Setting Up Google Charts

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.

Creating a Basic Line Chart

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.

Creating a Bar Chart

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.

Pie and 3D Pie Charts

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

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.

Interactive Features

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.

Advanced Tips

  • 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.

Real-World Use Cases

  • 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.

Summary of the Tutorial

  • 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.


Practice Questions

  1. Create a basic line chart showing monthly sales for a year with smooth curves and custom axis titles.

  2. Create a bar chart comparing the number of students in 5 different classes, with different colors for each bar.

  3. Build a pie chart representing the distribution of website traffic sources (Direct, Organic, Referral, Social).

  4. Create a 3D pie chart showing the revenue distribution of 4 products with tooltips enabled.

  5. Make a combo chart combining bars for revenue and a line for profit over 6 months.

  6. Implement a scatter chart showing student scores in Math vs Science with customized marker colors and sizes.

  7. Create a geo chart showing the population of different countries with color gradients.

  8. Add dynamic updates to a line chart using new monthly data every 5 seconds.

  9. Create a column chart with stacked bars showing male vs female students in 5 classes.

  10. Build a gauge chart to show website performance score with a color-coded range.


JavaScript

online coding class codepractice

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 Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

Go Back Top