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

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 google.charts.load package name is "bar"
google.charts.load("current", {packages: ["bar"]});

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



The following two tabs change content below.
Abhay Anand has experience in the field of Software Development. He can program Android, PHP, JavaScript, Html, Css. He develops web and Android applications. You can reach him at anand.abhay1910@gmail.com