Google Charts

From simple line charts to complex hierarchical tree diagrams, Google Charts library provides a wide variety of chart types that are always ready to use:

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

How to use Google Chart?

If you want to use Google Chart in your web page, pleaseAdd a link to the chart loader:

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

Google Charts are easy to use.

Just add a <div> The element can display the chart:

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

The <div> element must have a unique ID.

Then load Google Graph API:

  1. Load Visualization API and corechart package
  2. Set a callback function to be called after the API is loaded
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

That's it!

Line Chart

Source Code

function drawChart() {
// Set data
var 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
var options = {
  title: 'House Price vs. Area',
  hAxis: {title: 'Square Meters'},
  vAxis: {title: 'Price in Millions'},
  legend: 'none'
};
// Draw the chart
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Try It Yourself

Scatter Plot

to generate the same data asScatter PlotPlease change google.visualization Change to ScatterChart:

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

Try It Yourself

Bar Chart

Source Code

function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['Italy', 55],
  ['France', 49],
  ['Spain', 44],
  ['United States', 24],
  ['Argentina', 15]
]);
var options = {
  title: 'Global Wine Production'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Try It Yourself

Pie Chart

To convert the bar chart toPie Chartwith:

google.visualization.PieChart

Replace:

google.visualization.BarChart

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

Try It Yourself

3D Pie Chart

To display the pie chart in 3D form, simply set is3D: true Add to options:

var options = {
  title: 'Global Wine Production',
  is3D: true
};

Try It Yourself