Line Chart Tutorial in javascript using Google API

This tutorial explains how to implement Line Chart using Google API.




linechart_php

Introduction

A Line chart or Line graph is a type of chart, represented by series of data points and connected by straight line.

Create Line Chart

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

Loading

The google.charts.load package name is "line"
google.charts.load("current", {packages: ["line"]});

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

var chart = new google.charts.Line(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':['line']});
            // 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':['line']});
            // 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 Line Chart

We will create a variable to store title, legends, subtitle, width, height. Pass the div id where Line Chart to be display into new google.charts.Line() object. Now finally to create Line 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':['line']});
            // 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.Line(document.getElementById('line_chart'));
      chart.draw(data, options);
            }
       </script>
    </head>
    <body>
      <div id="line_chart"></div>
    </body>
</html>

linechart_javascript

Multi Series Line Chart

If we want to create Multi-Series Line 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':['line']});
            // 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'), 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.Line(document.getElementById('line_chart'));
         chart.draw(data, options);
   }
       </script>
    </head>
    <body>
      <div id="line_chart"></div>
    </body>
</html>

linechart_php

Define Color

We can set color of line in the Line chart by using colors: [‘green’, ‘red’] in variable option

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

linechart_color



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