Line Chart Tutorial in javascript using Google API

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

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

Don't Miss

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

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