How to Create Line Chart Using AngularJS and Highcharts
If you seek tutorial about how to create line chart by using PHP and MySQL database, you can find our previous tutorial :"Create Line Chart using data from MySQ and MySQL".
The output or final result in this tutorial is shown in Figure 1 below:
From Figure 1 above, we have three commodities:
- Sugar
- Rice
- Wheat Flour
Step by Step Guide: Create Line Chart Using AngularJS
1. Using ng-app directive to initialize the AngularJS Application
The ng-app directive is a starting point of AngularJS Application. It initializes the AngularJS framework automatically. You can only have one ng-app directive in your HTML document. If more than one ng-app directive appears, the first appearance will be used.
In here we use ng-app directive with module "chartApp". We can give the module name according to our wishes.
<html ng-app="chartApp">2. Call the required library
Besides we call the AngularJS and Highcharts libraries, we also call Boostrap libary, because in this tutorial we use boostrap as front-end.
Put those libraries after tag
<head><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>AngularJS Graph Using Highcharts </title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/ilmudetil.css">
<script src="assets/js/jquery-1.11.3.min.js"></script>
<script src="assets/js/highcharts.src.js"></script>
<script src="assets/js//angular.js"></script>
<script src="assets/js/exporting.js"></script>
</head>3. Add the ng-controller
The ng-controller directive is used to specify a controller in HTML element, which will add behavior or maintain the data in that HTML element and its child elements.<body ng-controller="myController">
4. Create an id for rendering chart
In step 4 we prepare where the line chart will be displayed. In this case, the id to render (display)chart is "mygraph"
<div class="container" style="margin-top:20px" >
<div class="col-md-10">
<div class="panel panel-primary">
<div class="panel-heading">Commodity Price Graphs</div>
<div class="panel-body">
<div id ="mygraph"></div>
</div>
</div>
</div>
</div>5. Create the chart with AngularJS library
This 5th step is the core of the graph process, by calling first the module name of theng-app directive and the controller's name for the ng-controller directive, then the viewing process is done in function ($ scope)<script>
angular.module('chartApp', [])
.controller('myController', function ($scope) {
Highcharts.chart('mygraph', {
title: {
text: 'Comparison of Sugar, Rice and Wheat Flour'
},
subtitle:{
text: '(Price In 2008)'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Price (Rp)'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 120,
borderWidth: 0
},
series: [{
"name":"Sugar",
"data":[6415,6430,6437,6301,6440,6502,6441,6465,6446,6700,6650,6680]
},{
"name":"Rice",
"data":[5442,5457,5376,5398,5363,5501,5471,5400,5420,5900,5460,5789]
},{
"name":"Wheat Flour",
"data":[6759,7921,7291,7627,7641,7704,7744,7820,7790,7850,7320,7867]
}]
});
});
</script>Full Source Code
<!DOCTYPE html>
<html ng-app="chartApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>AngularJS Graph Using Highcharts </title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/ilmudetil.css">
<script src="assets/js/jquery-1.11.3.min.js"></script>
<script src="assets/js/highcharts.src.js"></script>
<script src="assets/js//angular.js"></script>
<script src="assets/js/exporting.js"></script>
</head>
<body ng-controller="myController">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
Pusat Ilmu Secara Detil</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="">Programming</a></li>
<li class="clr3"><a href="">English</a></li>
</ul>
</div>
</div>
</nav>
</br></br></br></br>
<div class="container" style="margin-top:20px" >
<div class="col-md-10">
<div class="panel panel-primary">
<div class="panel-heading">Commodity Price Graphs</div>
<div class="panel-body">
<div id ="mygraph"></div>
</div>
</div>
</div>
</div>
<script>
angular.module('chartApp', [])
.controller('myController', function ($scope) {
Highcharts.chart('mygraph', {
title: {
text: 'Comparison of Sugar, Rice and Wheat Flour'
},
subtitle:{
text: '(Price In 2008)'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Price (Rp)'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 120,
borderWidth: 0
},
series: [{
"name":"Sugar",
"data":[6415,6430,6437,6301,6440,6502,6441,6465,6446,6700,6650,6680]
},{
"name":"Rice",
"data":[5442,5457,5376,5398,5363,5501,5471,5400,5420,5900,5460,5789]
},{
"name":"Wheat Flour",
"data":[6759,7921,7291,7627,7641,7704,7744,7820,7790,7850,7320,7867]
}]
});
});
</script>
</body>
</html>