This tutorial explains how to implement Line Chart using Google API.
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>
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>
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']
};
