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.

Cara Membuat Tipe Chart Campuran Dengan AngularJs

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

13 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