Cara Membuat Tipe Chart Campuran Dengan Menggunakan AngularJs

Membuat data chart membantu kita dalam membaca sebuah data menjadi lebih mudah. Tipe tipe chart yang bisa kita gunakan pun banyak sekali variasinya. Dan kali ini saya akan Membuat Tipe Chart Campuran Dengan Menggunakan AngularJs, dimana tipe chart yang ditampilkan dalam satu grafik data ada dua variasi atau lebih.

Langkah pertama Cara Membuat Tipe Chart Campuran Dengan Menggunakan AngularJs adalah saya akan membuat struktur htmlnya seperti di bawah ini.

<!DOCTYPE html>

<html>

<head>

               <title>Cara Membuat Tipe Chart Campuran 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 Tipe Chart Campuran Dengan Menggunakan AngularJs</h1>

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

                 chart-data="data" chart-labels="labels" chart-colors="colors"

                 chart-dataset-override="datasetOverride" >

               </canvas>

</div>

</body>

</html>

Untuk script di bawah ini, teman-teman bisa mendownloadnya terlebih dahulu di sini. http://jtblin.github.io/angular-chart.js/ . Jika sudah maka teman-teman koneksikan filenya berdasarkan letak file.

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

Langkah selanjutnya saya akan membuat suatu controller dengan angularjs yang di dalamnya berisi data yang akan saya tampilkan dan juga data array untuk membuat jenis chart yang berbeda.

<script>

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

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

    $scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];

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

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

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

    $scope.data = [

                     [45, -59, 90, 81, -50, 65, -70],

                     [8, 58, -40, 29, 76, 37, 70]

                   ];

                   $scope.datasetOverride = [

                     {

                       label: "Bar chart",

                       borderWidth: 1,

                       type: 'bar'

                     },

                     {

                       label: "Line chart",

                       borderWidth: 3,

                       hoverBackgroundColor: "rgba(255,99,132,0.4)",

                       hoverBorderColor: "rgba(255,99,132,1)",

                       type: 'line'

                     }

                   ];

               });

</script>

Jika teman-teman buka filenya di browser, maka akan tampil seperti gambar di bawah ini. Dimana data chart yang tampil dengan tipe bar dan line.

Demikian artikel tentang Cara Membuat Tipe Chart Campuran Dengan Menggunakan AngularJs. Sampai jumpa di pembahasan selanjutnya. Semoga dapat bermanfaat dan selamat mencoba.