Membuat Grafik Line Chart Dengan AngularJS dan Highcharts
Pada tutorial sebelumnya, kita sudah pernah membuat line chart dengan menggunakan PHP dan database MySQL, silahkan baca tutorial : PHP Line Chart Dengan Database MySQL. Dalam tutorial ini kita tidak menggunakan PHP, karena data yang kita gunakan adalah JSON. Jadi dengan menggunakan AngularJS, kita juga dapat menciptkan sebuah grafik. Librari grafik yang kita gunakan adalah Highcharts.
Output atau hasil akhir yang akan kita kerjakan dalam tutorial AngularJS line chart ditunjukkan oleh Gambar.1 dibawah ini :
Dari Gambar.1 diatas, kita memiliki tiga komoditi :
- Sugar (Gula),
- Rice (Beras)
- dan Wheat Flour (Tepung Terigu).
Langkah-langkahnya
1. Menginisialisasi aplikasi AngularJSUntuk menyatakan bahwa sebuah aplikasi adalah AngularJS, maka kita perlu menggunakan directive
ng-app
dengan memberi nama module "chartApp". Kita dapat memberi nama module sesuai dengan keinginan kita.<html ng-app="chartApp">
2. Memanggil library yang diperlukan
Disamping kita memanggil library AngularJS dan Highcharts, kita juga memanggil libary Boostrap, karena dalam tutorial ini kita menggunakan boostrap sebagai front-end.
Letakkan pemanggilan library yang kita gunakan dibawah 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. Menambahkan
ng-controller
Directive
ng-controller
ini bertujuan untuk mengontrol aplikasi AngularJS. Dengan menambahkan directive ini, maka akan ada aksi (behaviour) yang kita tambahkan untuk mengendalikan atau mengontrol dari elemen HTML (tergantung pada bagian mana ditambahkan ng-controller). Jika kita tambahkan dalam tag body
, maka aksi(behaviour) hanya berlaku untuk elemen HTML dalam tag body
.<body ng-controller="myController">
4. Membuat id untuk rendering chart
Pada langkah ke-4 ini kita mempersiapkan dibagian mana line chart akan ditampilkan. Dalam hal ini, id untuk menrender chartnya adalah
"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. Mengcreate grafik dengan bantuan AngularJS
Langkah ke-5 ini adalah inti dalam proses pembuatan grafik, dengan terlebih dahulu kita memanggil nama module dari directive
ng-app
dan nama controller untuk directive ng-controller
, kemudian proses view dilakukan dalam 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>