JavaScript Google Chart
JavaScript Basics

JavaScript Google Chart

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=""></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'));

Take a look into your desired course