Pusat Ilmu Secara Detil

Membuat Grafik Line Chart Dengan AngularJS dan Highcharts

Membuat Grafik Line Chart Dengan AngularJS dan Highcharts

Dalam tutorial pemrograman web tentang AngularJS kali ini, kita akan membahas bagaimana caranya membuat grafik garis atau yang biasa diistilahkan Line Chart dengan menggunakan AngularJS.

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 :
(Gambar.1 )

Dari Gambar.1 diatas, kita memiliki tiga komoditi :
  • Sugar (Gula), 
  • Rice (Beras) 
  • dan Wheat Flour (Tepung Terigu). 
Grafik garis (line chart) menunjukkan perbandingan harga untuk masing-masing komoditas dalam rentang bulang Jan sampai Dec, tahun 2008. Data-data dalam grafik tersebut hanya permisalan saja.

Langkah-langkahnya

1. Menginisialisasi aplikasi AngularJS
Untuk 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>


Share this:

You Might Also Like:

Disqus Comments