Google Charts

From simple line charts to complex hierarchical tree diagrams, the Google Charts library offers a wide variety of chart types that are ready to use at any time:

  • 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 on 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 the Google Graph API:

  1. Load the 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. Square Footage'
  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

the same data to generateScatter Plot, please replace 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

If you want to convert a bar chart toPie ChartJust use:

google.visualization.PieChart

Replace with:

google.visualization.BarChart

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

Try It Yourself

3D Pie Chart

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

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

Try It Yourself