Pusat Ilmu Secara Detil

Membuat Grafik Web Pie Chart Dengan AngularJS dan Highcharts

Membuat Grafik Web Pie Chart Dengan AngularJS dan Highcharts

Tutorial pemrograman web tentang AngularJS kali ini masih membahas seputaran tentang pembuatan grafik. Grafik yang akan kita buat dalam tutorial ini tentang pie chart atau grafik lingkaran dengan menggunakan AngularJS dan librari Highcharts.

Tutorial pembuatan grafik pie chart sebelumnya, kita menggunakan php dan database MySQL, silahkan baca : "Membuat Grafik Pie Chart dengan menggunakan PHP dan Database MySQL". Jika pada tutorial sebelumnya hasil pemanggilan data dari database MySQL dirubah ke JSON. Maka dalam tutorial ini, kita langsung memanggil data JSON (tanpa menggunakan MySQL dan PHP).

Hasil akhir dari tutorial ini ditunjukkan oleh Gambar.1 dibawah ini :
(Gambar.1 )

Seperti yang terlihat dari gambar diatas, grafik lingkaran (pie chart) menampilkan persentase penggunaan browser yang paling banyak digunakan dalam tahun 2015, dimana data-datanya dideskripsikan oleh tabel berikut :
Nama Browser Total
Chrome 50
Firefox 25
Safari 15
Opera 5
Konqueror 5

Dari tabel diatas, jika kita jumlahkan total dari browser Chrome sampai dengan Kongueror, maka akan didapatkan jumlah total=100, maka
Persentasi Browser Chrome= 50 100 x100% = 50%
Persentasi Browser Firefox= 25 100 x100% = 25%
Persentasi Browser Safari= 15 100 x100% = 15%
Persentasi Browser Opera = 5 100 x100% = 5%
Persentasi Browser Konqueror= 5 100 x100% = 5%

Langkah-langkahnya

1. Create file angularpiechart.html
Silahkan berinama file sesuka anda.Dalam file ini, kita definisikan nama module untuk directive ng-app, yaitu chartApp. Kemudian kita juga kita definisikan controllernya dengan nama ng-controller="myController". Kode-kode program lainnya adalah interface untuk navigation bar (menggunakan bootstrap). Berikut ini adalah kode program dalam file angularpiechart.html:
<!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 >
<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" ng-controller="myController">
 <div class="col-md-10">
  <div class="panel panel-primary">
   <div class="panel-heading">The Graph of Browser Trends January 2015</div>
    <div class="panel-body">
     <div id ="mygraph"></div>
   </div>
  </div>
 </div>
</div>
<script src = "chart.js"> </script>
</body>
</html>

Pada bagian kode terakhir, kita memanggil file chart.js, file inilah yang nantinya akan memproses untuk pembuatan grafik pie chart

2. Create file chart.js
Dalam file ini, kita menentukan tipe grafiknya dengan mengeset type: 'pie' untuk memberitahukan bahwa grafik tersebut adalah pie chart.
angular.module('chartApp', [])
.controller('myController', function ($scope) {
 Highcharts.chart('mygraph', {

    chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
   },
  title: {
    text: 'Internet Browser Statistics '
      },
   plotOptions: {
   pie: {
    allowPointSelect: true,
    cursor: 'pointer',
    dataLabels: {
     enabled: true,
     color: '#000000',
     connectorColor: 'green',
     formatter: function() 
     {
      return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.percentage, 2) +' % ';
     }
    },
    showInLegend: true
   }
  },

  series: [{
     name: 'Brands',
     data: [{
      name: 'Chrome',
      y: 50,
      sliced: true,
      selected: true
     }, {
      name: 'Firefox',
      y: 25
      
     }, {
      name: 'Safari',
      y: 15
     }, {
      name: 'Opera',
      y: 5
     },  {
      name: 'Konqueror',
      y: 5
     }]
    }]
 });
});

Perhatikan bagian potongan kode program berikut :
formatter: function() 
{
 return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.percentage, 2) +' % ';
}

Kode program tersebut akan menampilkan nilai persentase dalam bentuk dua(2) decimal dibelakang. Jika hasil persentasenya adalah bilangan bulat positif , misalnya menginginkan penulisan 50,00% ditampilkan menjadi 50% (tanpa nilai dibelakang koma), maka dirubah menjadi : Highcharts.numberFormat(this.percentage, 0)


Share this:

You Might Also Like:

Disqus Comments