Cara Membuat Data Chart Bar Dengan Menggunakan AngularJs

07/02/2019    Shelli Ripati    163     Website

Data Chart Bar adalah suatu tampilan data dengan chart seperti bar yang berbentuk persegi panjang. Dimana untuk chart bar ini ada dua tipe. Tipe pertama adalah chart bar dengan posisi vertical dan chart bar dengan posisi horizontal. Dan kali ini akan saya bahas pada artikel tentang Cara Membuat Data Chart Bar Dengan Menggunakan AngularJs.

Cara Membuat Data Chart Bar Dengan Menggunakan AngularJs sangat mudah. Pertama kita cantumkan 2 link angularjs dan chartjs seperti di bawah ini.

<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>

 

Dan selanjutnya teman-teman bisa download file angular.chart.min.js di http://jtblin.github.io/angular-chart.js/ . Jika sudah maka kita akan membuat struktur htmlnya dengan dua canvas. Dimana canvas tersebut akan kita buat tampilan chart bar secara vertical dan horizontal.

 

<!DOCTYPE html>

<html>

<head>

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

                <p>Chart Bar Vertical</p>

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

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

                </canvas>

                <br>

                <p>Chart Bar Horizontal</p>

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

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

                </canvas>

</div>

</body>

</html>

Yang membedakan canvas chart bar vertical dan horizontal adalah penamaan dari classnya dan untuk parameter attribute yang lainnya saya samakan karena satu data yang akan saya tampilkan dengan type chart bar yang berbeda.

Jika sudah selesai maka langkah terakhir untuk membuat Data Chart Bar yaitu kita akan buat variable di dalam controller yang berisi data yang akan di tampilkan dengan chart bar.

<script>

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

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

                  $scope.labels = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Juni', 'Juli'];

                  $scope.series = ['Web Design', 'Web Programming'];

 

                  $scope.data = [

                    [63, 59, 80, 71, 56, 55, 65],

                    [28, 50, 40, 19, 90, 27, 100]

                  ];

                });

</script>

Jika ditampilkan di halaman browser maka akan tampil seperti pada gambar berikut ini.

Cara Membuat Data Chart Bar Dengan AngularJs

Demikian artikel tentang Cara Membuat Data Chart Bar Dengan Menggunakan AngularJs. Semoga dapat bermanfaat dan selamat mencoba.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More