Google Charts

By the end, you can embed Google Charts in a JavaScript page, load a chart package, prepare data, and draw a line chart into a page element.

What it is

Google Charts is a hosted JavaScript charting library. The mental model is: load the library, wait until it is ready, create a data table, create a chart object, and draw it into a DOM element. Related terms include google.charts.load, google.charts.setOnLoadCallback, DataTable, and chart packages such as corechart.

Why it matters

• It lets you add charts without installing a local charting package.
• It supports common chart types such as line, bar, column, pie, area, and scatter charts.
• It uses a simple data-table model that maps naturally to rows and columns.
• It is useful for quick dashboards, reports, and internal tools.
• It handles rendering into a page element after you provide data and options.

Syntax or steps

1. Load the Google Charts loader script from https://www.gstatic.com/charts/loader.js.
2. Call google.charts.load("current", { packages: ["corechart"] }); to request the chart package.
3. Register a callback with google.charts.setOnLoadCallback(drawChart);.
4. Create chart data, often with google.visualization.arrayToDataTable.
5. Create a chart object, such as google.visualization.LineChart, and pass it a DOM element.
6. Call chart.draw(data, options); to render the chart.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Google Charts Example</title>
</head>
<body>
  <div id="chart_div" style="width: 600px; height: 400px;"></div>

  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load("current", { packages: ["corechart"] });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Month", "Sales", "Expenses"],
        ["Jan", 1000, 400],
        ["Feb", 1170, 460],
        ["Mar", 660, 1120]
      ]);

      var options = {
        title: "Monthly Performance",
        curveType: "function",
        legend: { position: "bottom" }
      };

      var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
      chart.draw(data, options);
    }
  </script>
</body>
</html>

Part-by-part explanation:

• The loader.js script provides the google.charts namespace.
• google.charts.load requests the current version and the corechart package.
• setOnLoadCallback waits until the library is ready before drawing.
• arrayToDataTable converts a simple array into chart data.
• options controls the chart title, line style, and legend position.
• LineChart creates a line chart bound to the page element with id chart_div.
• chart.draw renders the chart using the data and options.

Common mistakes

• Drawing before the library is ready. Fix it by calling google.charts.setOnLoadCallback instead of drawing immediately.
• Missing or zero-size container. Give the target element a width and height, or the chart may not appear.
• Using the wrong package. Choose a package that includes the chart type you need; corechart covers many common charts.
• Using old loader code. Prefer loader.js and google.charts.load over older Google AJAX API patterns.

When to use it

Google Charts is a good fit when you want a quick hosted charting solution. Chart.js is a closer alternative when you want a local npm package, canvas rendering, and more direct control over chart configuration.

Practice

Guided exercise: Change the example from a line chart to a bar chart by replacing LineChart with BarChart and updating the title to "Monthly Totals".

Challenge: Add an April row with sales of 1300 and expenses of 500.

Expected output: The chart should show four months instead of three. Hint: Add ["Apr", 1300, 500] to the array passed to arrayToDataTable.

Quick check

Why should you call google.charts.setOnLoadCallback(drawChart)?

Because it ensures the Google Charts library has finished loading before your code tries to create and draw a chart.

Summary

Google Charts works by loading a hosted library, waiting for it to be ready, preparing data, and drawing a chart into a DOM element. The key transferable idea is that charting libraries usually separate data preparation, chart creation, and rendering.