Bar Chart Tutorial in javascript using Google API

This tutorial explains how to implement Bar Chart, Multi Series bar Chart, Horizontal Bar Chart using Google API.

barchart

Introduction

Don't Miss

A Bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent. The bars can be plotted vertically or horizontally. A vertical bar chart is sometimes called a column bar chart.

Create Bar Chart

To create Bar Chart, we will pass package name bar in the google.charts.load() object. It will help to display Bar Chart.

Loading

The <strong>google.charts.load</strong> package name is "<strong>bar</strong>"
<strong>google.charts.load</strong>("<span style="color: green;font-weight: bold;">current</span>", {packages: ["<span style="color: green;font-weight: bold;">bar</span>"]});

The visualization’s class name is google.charts.Bar.

var chart = new google.charts.Bar(container);

We are going to create a drawChart() method in js. In this method, we will initialize a object( Google visualization datatable) to create our data table out of JSON data loaded from server. To add legends to call addColumn() method. We need to pass data type and legends into addColumn() method.
drawChart() function called by callback google.charts.setOnLoadCallback().

<html>
   <head>
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
      <script type="text/javascript">
         // Load the Visualization API and the line package.
         google.charts.load('current', {'packages':['bar']});
         // Set a callback to run when the Google Visualization API is loaded.
         google.charts.setOnLoadCallback(drawChart);
         
         function drawChart() {
         var data = new google.visualization.DataTable();
         // Add legends with data type
         data.addColumn('string', 'Year');
         data.addColumn('number', 'Sales');
         }
      </script>
   </head>
</html>

Add Data Values

To add data values into Bar Chart, we need to pass data values in addRow() method.

<html>
   <head>
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
      <script type="text/javascript">
         // Load the Visualization API and the line package.
         google.charts.load('current', {'packages':['bar']});
         // Set a callback to run when the Google Visualization API is loaded.
         google.charts.setOnLoadCallback(drawChart);
         
         function drawChart() {
         var data = new google.visualization.DataTable();
         // Add legends with data type
         data.addColumn('string', 'Year');
         data.addColumn('number', 'Sales');
         
         data.addRow(['2016', parseInt('1000')]);
         data.addRow(['2015', parseInt('880')]);
         data.addRow(['2014', parseInt('960')]);
         data.addRow(['2013', parseInt('660')]);
         data.addRow(['2012', parseInt('1120')]);
         data.addRow(['2011', parseInt('1500')]);
         
         }
      </script>
   </head>
</html>

Finally create Bar Chart

We will create a variable to store title, legends, subtitle, width, height. Pass the div id where Bar Chart to be display into new google.charts.Bar() object. Now finally to create Bar chart, call draw() method with data table object and option variable.

<html>
   <head>
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
      <script type="text/javascript">
         // Load the Visualization API and the line package.
         google.charts.load('current', {'packages':['bar']});
         // Set a callback to run when the Google Visualization API is loaded.
         google.charts.setOnLoadCallback(drawChart);
         
         function drawChart() {
         var data = new google.visualization.DataTable();
         // Add legends with data type
         data.addColumn('string', 'Year');
         data.addColumn('number', 'Sales');
         
         data.addRow(['2016', parseInt('1000')]);
         data.addRow(['2015', parseInt('880')]);
         data.addRow(['2014', parseInt('960')]);
         data.addRow(['2013', parseInt('660')]);
         data.addRow(['2012', parseInt('1120')]);
         data.addRow(['2011', parseInt('1500')]);
         
         var options = {
         chart: {
         title: 'Company Performance',
         subtitle: 'Show Sales of Company'
         },
         width: 900,
         height: 500,
         axes: {
         x: {
         0: {side: 'bottom'}
         }
         }
         };
         var chart = new google.charts.Bar(document.getElementById('bar_chart'));
         chart.draw(data, options);
         
         }
         
      </script>
   </head>
   <body>
      <div id="bar_chart"></div>
   </body>
</html>

simple bar chart

Define Color

We can set custom color of column by using colors: [‘green’, ‘red’] in the variable option.

var options = {
chart: {
title: 'Company Performance',
subtitle: 'Show Sales and Expense of Company'
},
width: 900,
height: 500,
axes: {
x: {
0: {side: 'bottom'}
}
},
colors: ['green']
};

bar chart with color

Multi Series Bar Chart

If we want to create multi-series Bar chart then we need to pass multiple legends and its data type into addColumn() method and its data values into addRow() method.

<html>
   <head>
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
      <script type="text/javascript">
         // Load the Visualization API and the line package.
         google.charts.load('current', {'packages':['bar']});
         // Set a callback to run when the Google Visualization API is loaded.
         google.charts.setOnLoadCallback(drawChart);
         
         function drawChart() {
         var data = new google.visualization.DataTable();
         // Add legends with data type
         data.addColumn('string', 'Year');
         data.addColumn('number', 'Sales');
         data.addColumn('number', 'Expense');
         
         data.addRow(['2016', parseInt('1000'), parseInt('400')]);
         data.addRow(['2015', parseInt('880'), parseInt('600')]);
         data.addRow(['2014', parseInt('960'), parseInt('400')]);
         data.addRow(['2013', parseInt('660'), parseInt('1200')]);
         data.addRow(['2012', parseInt('1120'), parseInt('700')]);
         data.addRow(['2011', parseInt('1500'), parseInt('550')]);
         
         var options = {
         chart: {
         title: 'Company Performance',
         subtitle: 'Show Sales and Expense of Company'
         },
         width: 900,
         height: 500,
         axes: {
         x: {
         0: {side: 'bottom'}
         }
         }
         };
         var chart = new google.charts.Bar(document.getElementById('bar_chart'));
         chart.draw(data, options);
         
         }
         
      </script>
   </head>
   <body>
      <div id="bar_chart"></div>
   </body>
</html>

barchart

Horizontal Bar Chart

If we want to create horizontal Bar Chart then we need to define bars: ‘horizontal’ in ‘option’ variable in js script as a given below:

var options = {
chart: {
title: 'Company Performance',
subtitle: 'Show Sales and Expense of Company'
},
width: 900,
height: 500,
axes: {
x: {
0: {side: 'bottom'}
}
},
bars: 'horizontal'
};

horizontal_barchart

LEAVE A REPLY

Please enter your comment!
Please enter your name here

564FansLike

Recent Posts

Concept of Session in Laravel Tutorial

Sessions are used to store details about the user throughout the requests. Laravel supplies various drivers like file, cookie, apc, array, Memcached, Redis, and database to handle session data. By default, file driver is used as a result of it's light-weight....

Laravel Url Generation Tutorial

Our web application revolves around routes and URLs. After all, they're what direct our users to our pages. At the end of the day, serving pages is what any web application should do. Our users may...

Concept of Laravel Views Tutorial

In MVC framework, the letter "V" stands for Views. It separates the application logic and presentation logic. Views are saved in resources/views listing. Generally, the view contains the HTML which might be served by the application.

Related Articles

Concept of Session in Laravel Tutorial

Sessions are used to store details about the user throughout the requests. Laravel supplies various drivers like file, cookie, apc, array, Memcached, Redis, and database to handle session data. By default, file driver is used as a result of it's light-weight....

Laravel Url Generation Tutorial

Our web application revolves around routes and URLs. After all, they're what direct our users to our pages. At the end of the day, serving pages is what any web application should do. Our users may...

Concept of Laravel Views Tutorial

In MVC framework, the letter "V" stands for Views. It separates the application logic and presentation logic. Views are saved in resources/views listing. Generally, the view contains the HTML which might be served by the application.
WP2Social Auto Publish Powered By : XYZScripts.com