Google Charts
Google Charts Introduction Getting Started Area Charts Bar Charts Bubble Charts Calendar Charts Candlestick Charts Column Charts Combination Chart Gauge Chart Geo Charts Histogram Charts Line Charts Maps Organization Chart Pie Charts Sankey Charts Scatter Charts Stepped Area Charts Table Chart Trendline Charts Wordtree Charts

Google Charts Getting Started

Google Charts is a pure JavaScript based library meant to enhance web applications by adding interactive charting capability.

Google Charts provides wide variety of charts for example, line charts, bubble charts, area charts, bar charts, pie charts and so on.


Where to Get Google Charts?

To start using Google Charts on your own web site include Google Charts from a CDN.

The CDN will give you access around the world to regional data centers.

<script src="https://www.gstatic.com/charts/loader.js"></script>

Google Charts Configuration

The following configuration required to draw a chart using Google Chart API:

  1. Create HTML Page
  2. Set a Callback Function
  3. Create DataTable
  4. Set Chart Options
  5. Draw the Chart

Step 1: Create HTML Page

Create an HTML page with the Google Chart libraries:

<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load('current', {packages: ['corechart']}); </script> </head> <body> <div id="chart-div" style="width:100%; height:350px;"></div> </body> </html>

The google.charts.load method loads the latest version of corecharts package.

The chart-div element is used to contain the chart drawn using Google Chart library.


Step 2: Set a Callback Function

The google.charts.setOnLoadCallback() set a callback to run when the Google Visualization API is loaded.

google.charts.setOnLoadCallback(drawChart); function drawChart() { // Create configurations... }

Step 3: Create a DataTable

A DataTable is a two-dimensional table with rows and columns.

Google charts require data to be wrapped in a JavaScript class called google.visualization.DataTable.

google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['City', '2019 Population'], ['Mumbai', 20185064], ['Delhi', 29399141], ['Chennai', 10711243], ['Jaipur', 3812262], ['Bengaluru', 11882666] ]); }

Step 4: Set Chart Options

Every chart has many customizable options, including title, colors, line thickness, background fill, and so on.

Specify custom options for your chart by defining a JavaScript object with option_name/option_value properties.

google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['City', '2019 Population'], ['Mumbai', 20185064], ['Delhi', 29399141], ['Chennai', 10711243], ['Jaipur', 3812262], ['Bengaluru', 11882666] ]); var options = { title: 'Population of Largest Indian Cities' }; }

Step 5: Instantiate and Draw Chart

The last step is to draw the chart.

First you must instantiate an instance of the chart class that you want to use, and then you must call draw() method.

google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['City', '2019 Population'], ['Mumbai', 20185064], ['Delhi', 29399141], ['Chennai', 10711243], ['Jaipur', 3812262], ['Bengaluru', 11882666] ]); var options = { title: 'Population of Largest Indian Cities' }; var chart = new google.visualization.BarChart(document.getElementById('chart-div')); chart.draw(data, options); }

Each chart type is based on a different class. For instance, the pie chart is based on the google.visualization.PieChart class, the bar chart is based on the google.visualization.BarChart class, and so on.


Example

Here's a simple example of a page that displays a bar chart: