Google Charts - Google Charts tutorial - Google Charts Configuration Syntax - chart js - google graphs - google charts examples




Steps to Configure to draw a chart using Google Chart API

Step 1: Create HTML Page

  • We need to create HTML page with Google Chart Libraries.
  • Container div is used to contain the chart which is drawn using Google Chart library.
  • We are loading the latest version of corecharts API by using google.charts.load method.
  • Here is the sample code for configuration of drawing a chart using Google Chart API.

googlecharts_configuration.html

<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>
</body>
</html>
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Step 2: Create configurations

  • Google Chart library uses configurations which is done using json syntax.
  • Data represents the json data and the options represents the configuration in which Google Chart library is used to draw a chart within the container div by using draw() method.
  • We configure various parameters to create the required json string and the options of the chart.

Sample code:

// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014',
   'width':550,
   'height':400};
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Step 3: Define the chart to be drawn

  • addColumn() method is used to add a column where the first parameter represents the data type whereas the second parameter represents the legend.
  • addRows() method is used to add rows according to the data which is given..

Sample Code:

// 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]
]);
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Step 4: Draw the chart

  • We need to instantiate the chart and draw the chart using Google Chart API.
  • Here is a code which is given below to instantiate and draw the chart

Sample Code:

// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team
  • Here is an complete program of configuring to draw a chart using Google Chart API

Sample Code:

googlecharts_configuration.html

 Tryit<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>
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team
  • The syntax which is given below call drawChart function to draws chart when Google Chart library get loaded completely.

google.charts.setOnLoadCallback(drawChart);
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Output:


Related Searches to Google Charts Configuration Syntax

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×