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.

Cara Membuat Dinamis Chart Dengan AngularJs

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

Cara Membuat Dinamis Chart Dengan AngularJs

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

12 Februari 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat