Cara Membuat Data Chart Line Dengan Menggunakan AngularJs

06/02/2019    Shelli Ripati    154     Website

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.

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