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