Membuat Grafik Line Chart Dengan AngularJS dan Highcharts - Hallo sahabat Kodenyekrip, Pada Artikel yang anda baca kali ini dengan judul Membuat Grafik Line Chart Dengan AngularJS dan Highcharts, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel AngularJS,
Artikel Bootstrap,
Artikel Pemrograman Web,
Artikel Web Programming, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Membuat Grafik Line Chart Dengan AngularJS dan Highcharts
link : Membuat Grafik Line Chart Dengan AngularJS dan Highcharts
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-controllerDirective
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>
Demikianlah Artikel Membuat Grafik Line Chart Dengan AngularJS dan Highcharts
Sekianlah artikel Membuat Grafik Line Chart Dengan AngularJS dan Highcharts kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Membuat Grafik Line Chart Dengan AngularJS dan Highcharts dengan alamat link https://kodenyekrip.blogspot.com/2017/01/membuat-grafik-line-chart-dengan.html
