Cara Membuat Data Chart Line Dengan Menggunakan AngularJs

Pada artikel sebelumnya saya sudah membahas tentang Cara Membuat Data Chart Pie Dengan Menggunakan AngularJs dan kali ini masih berhubungan dengan data chart, yaitu tentang Cara Membuat Data Chart Line Dengan Menggunakan AngularJs. Data Chart Line yaitu tampilan data dengan chart seperti garis dimana titik satu dengan titik lainnya menyambung sehingga membentuk seperti line atau garis.

Cara Membuat Data Chart Line Dengan Menggunakan AngularJs tidak jauh beda dengan chart pie kemarin. Dan berikut ini adalah struktur htmlnya seperti di bawah ini.

<!DOCTYPE html>

<html>

<head>

               <title>Cara Membuat Data Chart Line Dengan Menggunakan AngularJs</title>

               <style>

                              .container{

                                             width: 500px;

                                             margin:auto;

                                             text-align: center;

                              }

               </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 Line Dengan Menggunakan AngularJs</h1>

               <canvas id="line" class="chart chart-line" chart-data="data"

                              chart-labels="labels" chart-series="series" chart-options="options"

                              chart-dataset-override="datasetOverride" >

               </canvas>

</div>

</body>

</html>

Jika di perhatikan dari chart pie kemarin adalah ada beberapa tambahan attribute yaitu chart-series atau bisa di katakan sebagai kategori data, kemudian ada juga atrribut $scope.datasetOverride dan $scope.options untuk mengatur skala di sisi kiri dan sisi kanan. Dan berikut ini adalh data yang akan ditampilkan beserta nilai dari attribute lainnya.

<script>

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

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

                 $scope.labels = ["Januari", "Februari", "Maret", "April", "Mai", "Juni", "Juli"];

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

                 $scope.data = [

                   [22, 28, 25, 26, 29, 25, 28],

                   [28, 25, 30, 25, 35, 20, 30]

                 ];

                 $scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];

                 $scope.options = {

                   scales: {

                     yAxes: [

                       {

                         id: 'y-axis-1',

                         type: 'linear',

                         display: true,

                         position: 'left'

                       },

                       {

                         id: 'y-axis-2',

                         type: 'linear',

                         display: true,

                         position: 'right'

                       }

                     ]

                   }

                 };

               });

</script>

Jika teman-teman buka di browser maka tampilannya akan seperti pada gambar berikut ini.

Demikian artikel tentang Cara Membuat Data Chart Line Dengan Menggunakan AngularJs. Semoga bermanfaat.