Membuat Grafik Menggunakan Angular Chart

Pada kesempatan ini saya ingin berbagi tips membuat grafik menggunakan angular chart. Beberapa waktu yang lalu saya diminta untuk menampilkan grafik dari data yang telah di dapat dari backend. Namun saya mengalami kendala ketika akan menampilkan grafik dikarenakan perbedaan format data.

Yuk kita langsung saja. Pertama-tama kita install dahulu angular-chart.js menggunakan bower.

 bower install angular-chart.js --save  

Selanjutnya tambahkan code berikut pada index.html yang telah anda buat.

   <script src="bower_components/angular/angular.min.js"></script>  
   <script src="bower_components/Chart.js/Chart.min.js"></script>  
   <script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>  

Jangan lupa mengdeclare dependency pada module kalian.

 angular.module('myModule', ['chart.js']);  

Secara default chart.js membutuhkan 3 buah data. Nama item, jumlah item, dan scale waktu. Sebagai contoh saya menggunakan code berikut di dalam controller nya.

 angular.module("app", ["chart.js"]).controller("LineCtrl", function ($scope) {  
  $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];  
  $scope.series = ['Series C', 'Series D'];  
  $scope.data = [  
   [65, 59, 80, 81, 56, 55, 40],  
   [28, 48, 40, 19, 86, 27, 90]  
  ];  
  $scope.onClick = function (points, evt) {  
   console.log(points, evt);  
  };  
 });  

Untuk menampilkan grafik nya kita tinggal memanggil code berikut pada halaman yang kalian inginkan.

 <canvas id="line" class="chart chart-line" chart-data="data"  
  chart-labels="labels" chart-legend="true" chart-series="series"  
  chart-click="onClick" >  
 </canvas>  

Maka grafik yang akan muncul akan seperti berikut.

Sampai step ini pasti kalian bisa menampilkan nya, namun bagaimana kalau data yg di peroleh berupa array dan kita harus menampilkan grafik per index nya?
Let's say data nya berupa seperti ini.

  $scope.series1 =   
  [[14-03-2014,14-03-2014,14-03-2014],  
  [14-03-2014,14-03-2014,14-03-2014],  
  [14-03-2014,14-03-2014,14-03-2014],  
  [14-03-2014,14-03-2014,14-03-2014]];  
  $scope.label1 =   
  [["Systolic blood pressure (observable entity)","Systolic blood pressure (observable entity)","Systolic blood pressure (observable entity)"],  
  ["Body height measure (observable entity)","Body height measure (observable entity)","Body height measure (observable entity)"],  
  ["Body weight (observable entity)","Body weight (observable entity)","Body weight (observable entity)","Body weight (observable entity)"],  
  ["Diastolic blood pressure (observable entity)","Diastolic blood pressure (observable entity)","Diastolic blood pressure (observable entity)"]  
  ];  
  $scope.data1 = [  
   [44,99,126],  
   [66,77,172],  
   [55,65,88],  
   [33,99,82]  
  ];  

Bagaimana kita mengakali agar bisa muncul di setiap ng-repeat yang ada didalam tabel?
Oke, mari kita ubah canvas yang telah kita buat menjadi seperti ini.

  <canvas id="line" class="chart chart-line" data-ng-init="olah($index,data1,series1,label1)" data="vitaldata[$index]"  
  labels="vitallabels[$index]" legend="true" series="vitalseries[$index]"  
  click="onClick">  

data-data yang kita sudah dapat kita olah terlebih dahulu untuk mengambil value per index.
di dalam controller tambahkan code berikut.

     $scope.vitaldata = [];  
     $scope.vitallabels = [];  
     $scope.vitalseries = [];  
     $scope.olah = function(index,dataOlah,labelsOlah,dateOlah){  
       var data = [dataOlah[index]];  
       var label = labelsOlah[index];  
       var series = dateOlah[index];  
       $scope.vitaldata[index] = data;  
       $scope.vitallabels[index] = label;  
       $scope.vitalseries[index] = series;  
     }  

Sedikit penjelasan, bentuk array yang diminta oleh angular chart untuk data nya harus berbentuk array of array, sedangkan untuk label dan series hanya berupa array saja. Oleh karena itu pada var data, saya membuat [dataOlah[index]]; Index disini merupakan index yang di dapat dari hasil looping size array sehingga amat sangat membantu.

Dengan menggunakan trik seperti diatas maka grafik nya akan muncul seperti ini.

Semoga bermanfaat !