Google Chart

From simple line charts to complex hierarchical tree maps, the Google Chart gallery offers a wide range of ready-to-use chart types:

• Scatter Chart
• Line Chart
• Bar / Column Chart
• Area Chart
• Pie Chart
• Donut Chart
• Org Chart
• Map / Geo Chart

How to Use Google Chart

1. Add a <div> element (with a unique id) in the HTML where you want to display the chart:

<div id="myChart" style="max-width:700px; height:400px"></div>

‍

Add a link to the charts loader:

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

‍

Load the Google Chart API and add the function to run when the API is loaded:

<script>google.charts.load('current', {packages: ['corechart']});google.charts.setOnLoadCallback(drawChart);‍// Your functionfunction drawChart() {  ...}</script>

‍

Bar Charts

Example: World Wide Wine Production

function drawChart() {  // Set Data  const data = google.visualization.arrayToDataTable([    ['Country', 'Mhl'],    ['Italy', 55],    ['France', 49],    ['Spain', 44],    ['USA', 24],    ['Argentina', 15]  ]);‍  // Set Options  const options = {title: 'World Wide Wine Production'};‍  // Draw Chart  const chart = new google.visualization.BarChart(document.getElementById('myChart'));  chart.draw(data, options);}

‍

Pie Charts

To convert a bar chart to a pie chart, change google.visualization.BarChart to google.visualization.PieChart:

const chart = new google.visualization.PieChart(document.getElementById('myChart'));

‍

3D Pie

To display a pie chart in 3D, add is3D: true to the options:

const options = {  title: 'World Wide Wine Production',  is3D: true};

‍

Line Graph

Example: House Prices vs. Size

function drawChart() {
  // Set Data
  const data = google.visualization.arrayToDataTable([
    ['Square Meters', 'Price in Millions'],
    [50, 7], [60, 8], [70, 8], [80, 9], [90, 9], [100, 9],
    [110, 10], [120, 11], [130, 14], [140, 14], [150, 15]
  ]);

  // Set Options
  const options = {
    title: 'House Prices vs Size',
    hAxis: {title: 'Square Meters'},
    vAxis: {title: 'Price in Millions'},
    legend: 'none'
  };

  // Draw Chart
  const chart = new google.visualization.LineChart(document.getElementById('myChart'));
  chart.draw(data, options);
}

‍

Scatter Plots

To scatter plot the same data, change google.visualization.LineChart to google.visualization.ScatterChart:

const chart = new google.visualization.ScatterChart(document.getElementById('myChart'));

‍