Forum | Latest web development tutorials
 

Google Charts Tutorial



Google Charts is a pure JavaScript based charting library meant to enhance web applications by adding interactive charting capability. Google Charts provides wide variety of charts. For example, line charts, spline charts, area charts, bar charts, pie charts and so on.

This tutorial will teach you basics of Google Charts. Tutorial contains chapters discussing all the basic components of Google Charts with suitable examples.


Audience

This tutorial is designed for Software Professionals who are willing to learn Google Charts in simple and easy steps. This tutorial will give you great understanding on Google Charts concepts and after completing this tutorial you will be at intermediate level of experties from where you can take yourself at higher level of expertise.


Prerequisites

Before proceeding with this tutorial you should have a basic understanding of JavaScript, html, css and any text editor.


Try Google Charts Online

For most of the examples given in this tutorial you will find Try it option, so just make use of this option to execute your programs at the spot and enjoy your learning.

Try following example using Try it option available at the top right corner of the below sample code box −

<html>
<head>
<title>Google Charts Tutorial</title>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['corechart']});     
   </script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
function drawChart() {
   // Define the chart to be drawn.
   var data = new google.visualization.DataTable();
   data.addColumn('string', 'Browser');
   data.addColumn('number', 'Percentage');
   data.addRows([
      ['Firefox', 45.0],
      ['IE', 26.8],
      ['Chrome', 12.8],
	  ['Safari', 8.5],
      ['Opera', 6.2],
      ['Others', 0.7]
   ]);
   
   // Set chart options
   var options = {'title':'Browser market shares at a specific website, 2014',
      'width':550,
      'height':400};

   // Instantiate and draw the chart.
   var chart = new google.visualization.PieChart(document.getElementById('container'));
   chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>