Cara Membuat Dinamis Chart Dengan Menggunakan AngularJs

Pada pembahasan kali ini masih tentang chart, yang membedakan adalah saya akan membuat type chart yang ditampilkan menjadi dinamis atau berubah-ubah. Cara Membuat Dinamis Chart Dengan Menggunakan AngularJs sangat mudah.

Langkah pertama Cara Membuat Dinamis Chart Dengan Menggunakan AngularJs yaitu teman.teman download terlebih dahulu file angular-chart.min.js disini. Jika sudah maka kita akan lanjutkan untuk membuat struktur htmlnya seperti di bawah ini.

<!DOCTYPE html>

<html>

<head>

               <title>Cara Membuat Dinamis Chart Dengan Menggunakan AngularJs</title>

               <style>

                              .container{

                                             width: 500px;

                                             margin:auto;

                                             text-align: center;

                              }

                              canvas{float: left}

               </style>

               <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>         

               <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

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

</head>

<body ng-app="myApp" ng-controller="myCtrl">

<div class="container">

               <h1>Cara Membuat Dinamis Chart Dengan Menggunakan AngularJs</h1>

               <button ng-click="toggle()">Ubah</button>

               <canvas id="base" class="chart-base" chart-type="type"

      chart-data="data" chart-labels="labels" >

    </canvas>

</div>

</body>

</html>

Untuk library angularjs dan chartjs saya menggunakan versi online seperti yang saya cantumkan di dalam tag head pada struktur html.

Jika sudah kita akan lanjutkan untuk membuat script angularjs yang berisi controller, data dan satu fungsi yang akan dijalankan ketika event klik.

<script>

               var app = angular.module("myApp", ["chart.js"]);

               app.controller("myCtrl", function ($scope) {

                              $scope.labels = ["Web Design", "Web Programming",

                                                                                          "Digital Marketing", "Design Graphic", "Mobile Apps",

                                                                                          "Coding For Kids", "Motion Graphic"];

                              $scope.data = [300, 500, 100, 200, 500, 450, 350];

                            $scope.type = 'polarArea';

 

                   $scope.toggle = function () {

                     $scope.type = $scope.type === 'polarArea' ?

                       'radar' : 'polarArea';

                   };

               });

</script>

Nah disini saya membuat suatu fungsi dengan nama toggle yang didalamnya ada kondisi if ternary untuk melakukan pengecekan dari type chart. Dan dijalankan dengan direktir ng-click pada tag button. Jika ditampilkan di browser maka tampilan awal akan seperti pada gambar di bawah ini.

Dan jika sudah di klik akan tampil gambar seperti di bawah, begitu seterusnya.

Demikian artikel tentang Cara Membuat Dinamis Chart Dengan Menggunakan AngularJs. Semoga Bermanfaat dan Selamat Mencoba