HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
From simple line charts to complex hierarchical tree maps,the Google Chart gallery provides a large number of ready-to-use chart types
To use Google Chart in your web page, add a link to the charts loader:
<script
src="https://www.gstatic.com/charts/loader.js">
</script>
Google Chart is easy to use.
Just add a <div> element to 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 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);
That's all!
function drawChart12() { 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] ]); var options = { title: 'House Prices vs. Size', hAxis: {title: 'Square Meters'}, vAxis: {title: 'Price in Millions'}, legend: 'none' }; var chart = new google.visualization.LineChart(document.getElementById('myChart12')); chart.draw(data, options); }
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 Prices vs Size',
hAxis: {title: 'Square Meters'},
vAxis: {title: 'Price in Millions'},
legend: 'none'
};
// Draw Chart
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}
To scatter plot the same data, change google.visualization to ScatterChart:
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
function drawChart11() { 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] ]); var options = { title: 'House Prices vs. Size', hAxis: {title: 'Square Meters'}, vAxis: {title: 'Price in Millions'}, legend: 'none' }; var chart = new google.visualization.ScatterChart(document.getElementById('myChart11')); chart.draw(data, options); }
function drawChart21() { var data = google.visualization.arrayToDataTable([ ['Contry', 'Mhl'], ['Italy',55], ['France',49], ['Spain',44], ['USA',24], ['Argentina',15] ]); var options = { title:'World Wide Wine Production', is3D:true }; var chart = new google.visualization.BarChart(document.getElementById('myChart21')); chart.draw(data, options); }
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Contry', 'Mhl'],
['Italy', 55],
['France', 49],
['Spain', 44],
['USA', 24],
['Argentina', 15]
]);
var options = {
title: 'World Wide Wine Production'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}
To convert a Bar Chart to a Pie chart, just replace:
google.visualization.BarChart
with:
google.visualization.PieChart
var chart = new google.visualization.PieChart(document.getElementById('myChart'));
function drawChart22() { var data = google.visualization.arrayToDataTable([ ['Contry', 'Mhl'], ['Italy', 55], ['France', 49], ['Spain',44], ['USA',24], ['Argentina',15] ]); var options = { title:'World Wide Wine Production' }; var chart = new google.visualization.PieChart(document.getElementById('myChart22')); chart.draw(data, options); }
To display the Pie in 3D, just add is3D: true to the options:
var options = {
title: 'World Wide Wine Production',
is3D: true
};
function drawChart23() { var data = google.visualization.arrayToDataTable([ ['Contry', 'Mhl'], ['Italy',55], ['France',49], ['Spain',44], ['USA',24], ['Argentina',15] ]); var options = { title:'World Wide Wine Production', is3D:true }; var chart = new google.visualization.PieChart(document.getElementById('myChart23')); chart.draw(data, options); }