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.

Cara Membuat Data Chart Line Dengan AngularJs

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

6 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