Curriculum
Course: JavaScript Basic
Login

Curriculum

JavaScript Basic

JSHome

0/216

JS Versions

0/36

JS Objects

0/15

JS Funtions

0/22

JS Classes

0/3

JS Async

0/10

JS HTML DOM

0/25

JS Browser BOM

0/17

JS Web APIs

0/7

JS AJAX

0/11

JS JSON

0/16

JS vs jQuery

0/4

JS Graphics

0/7
Text lesson

JS Google Chart

The Google Chart gallery offers a wide range of ready-to-use chart types, from basic line charts to complex hierarchical tree maps, including:

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

How to Use Google Chart?

1. Insert a <div> element (with a unique id) in the HTML at the location where you want the chart to appear.

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

2. Include a link to the chart loader.

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

3. Load the Graph API and define the function to execute once the API has finished loading.

<script>
google.charts.load(‘current’,{packages:[‘corechart’]});
google.charts.setOnLoadCallback(drawChart);

// Your Function
function drawChart() {
…
}
</script>

Bar Charts

bar charts

Source Code

function drawChart() {

// Set Data
const data = google.visualization.arrayToDataTable([
  [‘Contry’, ‘Mhl’],
  [‘Italy’, 55],
  [‘France’, 49],
  [‘Spain’, 44],
  [‘USA’, 24],
  [‘Argentina’, 15]
]);

// Set Options
const options = {
  title: ‘World Wide Wine Production’
};

// Draw
const chart = new google.visualization.BarChart(document.getElementById(‘myChart’));
chart.draw(data, options);

}

Pie Charts

google chart

To change a Bar Chart to a Pie Chart, simply replace:

 

google.visualization.BarChart

 

with:

 

google.visualization.PieChart

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

3D Pie

3D pie

To display the Pie chart in 3D, simply add is3D: true to the options.

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

Line Graph

line graph 2

Source Code

function drawChart() {
// Set Data
const data = google.visualization.arrayToDataTable([
  [‘Price’, ‘Size’],
  [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

scatter plots

To display the same data as a scatter plot, change google.visualization to ScatterChart.

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

 

 

Previous
Next