{"id":2950,"date":"2022-01-11T14:02:11","date_gmt":"2022-01-11T14:02:11","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=2950"},"modified":"2023-06-12T14:35:42","modified_gmt":"2023-06-12T14:35:42","slug":"tutorial-javascript-membuat-grafik-dengan-chart-js","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/tutorial-javascript-membuat-grafik-dengan-chart-js\/","title":{"rendered":"Tutorial JavaScript – Membuat Grafik Dengan Chart.js"},"content":{"rendered":"

Rengga Dev<\/strong><\/a> <\/span>– Membuat Grafik Dengan Chart.js<\/strong>\u00a0\u2013 Grafik merupakan sebuah unsur atau fitur yang paling menambah nilai jual sebuah aplikasi. dengan adanya fitur yang menampilkan data dalam bentuk grafik sangat membantu pengguna dalam membaca jumlah persentase sebuah kumpulan data.<\/p>\n

Banyak keuntungan dalam menggunakan grafik. termasuk dapat membuat aplikasi yang kita buat menjadi lebih terlihat profesional. karena data yang awalnya hanya berupa angka bisa terlihat lebih visual. apalagi dengan adanya animasi dan efek yang keren yang membuat tampilan grafik lebih terlihat menarik.<\/p>\n

Namun yang pasti menjadi pertanyaan bagi teman-teman adalah,\u00a0sulitkah membuat grafik ?<\/em><\/p>\n

Jawabannya tidak, karena sekarang sudah ada banyak plugin javascript yang dapat membantu kita dalam membuat sebuah grafik, apalagi masing-masing plugin grafik mempunyai kelebihan dan kekurangannya masing-masing.<\/p>\n

Cara membuat grafik pada aplikasi atau website sangatlah mudah, teman-teman berada pada artikel yang tepat. Karena pada tutorial malasngoding.com kali ini kita akan belajar cara membuat grafik dengan chart.js<\/strong>.<\/p>\n

Membuat Grafik Dengan Chart.js<\/h2>\n

Teman-teman yang baru mendengar chart.js pasti bingung apa sih chart.js itu. Silahkan teman-teman simak penjelasan berikut tentang pengertian chart.js dan bagaimana cara membuat grafik dengan chart.js dengan mudah dan gratis tentunya.<\/p>\n

Chart.js<\/strong><\/a> adalah salah satu plugin javascript yang dibuat untuk memudahkan atau membantu kita dalam membuat grafik dengan sangat mudah dan cepat. Ada banyak sekali pilihan jenis grafik yang bisa kita buat dengan chart.js, diantaranya adalah grafik bar, line, pie dan banyak deh pokoknya.<\/p>\n

Teman-teman bisa langsung melihat demo dari jenis-jenis atau model grafik yang bisa kita buat dengan chart.js di website si chart.js ini yaitu di :\u00a0http:\/\/www.chartjs.org\/samples\/latest\/<\/a>.<\/p>\n

\n

\"membuat<\/p>\n

membuat grafik dengan chartjs<\/p>\n<\/div>\n

Oke langsung saja ya kita mulai tentang cara membuat grafik dengan chart.js<\/p>\n

Cara Membuat Grafik Dengan Chart.js<\/h3>\n

Pada tutorial ini kita akan membuat beberapa jenis contoh grafik dengan menggunakan chart.js.<\/p>\n

Langsung saja teman-teman download dulu chart.js nya di\u00a0https:\/\/github.com\/chartjs\/Chart.js\/releases\/tag\/v2.7.2<\/a>. pada saat tutorial ini dibuat, chartjs sudah sampai pada versi terbarunya yaitu versi v2.7.2.<\/p>\n

Saya mendownload yang chart.js nya saja. karena saya rasa kita belum membutuhkan package yang lainnya dulu.<\/p>\n

\n

\"cara<\/p>\n

Cara membuat grafik dengan chartjs<\/p>\n<\/div>\n

Setelah di download, extrak dan rename nama foldernya menjadi\u00a0chartjs<\/strong>. untuk apa kita rename? supaya lebih mudah kita hubungkan pada project kita. jadi gak perlu menulis sampai versi-versinya seperti v2.7.2 dan bla-bla .\u00a0\ud83d\ude00<\/p>\n

Oh ya karena pada contohnya ini saya hanya menggunakan HTML saja dan tidak menggunakan PHP. silahkan teman-teman sesuaikan dengan kebutuhan masing-masing ja. karena saya hanya menggunakan HTML, maka project nya saya buat di desktop saja. projectnya saya buat dalam folder \u201cgrafik\u201d. nanti teman-teman bisa mendownloadnya, link downloadnya sudah saya sertakan di bawah tutorial ini.<\/p>\n

\n

Cara install chartjs pada html atau php.<\/h3>\n<\/div>\n

Selanjutnya buat sebuah file baru dengan nama\u00a0index.html\u00a0<\/strong>dalam folder grafik.<\/p>\n

Pada file index.html ini saya akan\u00a0membuat sebuah contoh grafik<\/strong>\u00a0menggunakan\u00a0chart.js<\/strong>.<\/p>\n

index.html<\/strong><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title>Membuat Grafik Dengan Menggunakan Chart.js - Rengga Dev\/title>\r\n    <script type=\"text\/javascript\" src=\"chartjs\/Chart.js\"><\/script>\r\n<\/head>\r\n<body>\r\n    <style type=\"text\/css\">\r\n        body{\r\n            font-family: roboto;\r\n        }\r\n    <\/style>\r\n \r\n    <h2>Tutorial Membuat Grafik Dengan Chart.js - Rengga Dev<\/h2>\r\n \r\n \r\n \r\n    <div style=\"width: 500px;height: 500px\">\r\n        <canvas id=\"myChart\"><\/canvas>\r\n    <\/div>\r\n \r\n \r\n    <script>\r\n        var ctx = document.getElementById(\"myChart\").getContext('2d');\r\n        var myChart = new Chart(ctx, {\r\n            type: 'bar',\r\n            data: {\r\n                labels: [\"Red\", \"Blue\", \"Yellow\", \"Green\", \"Purple\", \"Orange\"],\r\n                datasets: [{\r\n                    label: '# of Votes',\r\n                    data: [12, 19, 3, 23, 2, 3],\r\n                    backgroundColor: [\r\n                    'rgba(255, 99, 132, 0.2)',\r\n                    'rgba(54, 162, 235, 0.2)',\r\n                    'rgba(255, 206, 86, 0.2)',\r\n                    'rgba(75, 192, 192, 0.2)',\r\n                    'rgba(153, 102, 255, 0.2)',\r\n                    'rgba(255, 159, 64, 0.2)'\r\n                    ],\r\n                    borderColor: [\r\n                    'rgba(255,99,132,1)',\r\n                    'rgba(54, 162, 235, 1)',\r\n                    'rgba(255, 206, 86, 1)',\r\n                    'rgba(75, 192, 192, 1)',\r\n                    'rgba(153, 102, 255, 1)',\r\n                    'rgba(255, 159, 64, 1)'\r\n                    ],\r\n                    borderWidth: 1\r\n                }]\r\n            },\r\n            options: {\r\n                scales: {\r\n                    yAxes: [{\r\n                        ticks: {\r\n                            beginAtZero:true\r\n                        }\r\n                    }]\r\n                }\r\n            }\r\n        });\r\n    <\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
Akan saya jelaskan dulu sedikit tentang syntax membuat grafik di atas.<\/p>\n
Pertama kita hubungkan dulu dengan file Chart.js yang sudah kita download tadi.<\/p>\n
<script type=\"text\/javascript\" src=\"chartjs\/Chart.js\"><\/script><\/pre>\n
Selanjutnya kita buat sebuah element <canvas> .. <\/canvas> dan kita beri id dengan terserah kita. di sini saya memberi nama id nya dengan \u201cmyChart\u201d.<\/p>\n
<div style=\"width: 500px;height: 500px\">\r\n    <canvas id=\"myChart\"><\/canvas>\r\n<\/div><\/pre>\n
Kemudian terakhir pada bagian deklarasi chart.js nya kita perintahkan untuk membuat grafik \u201c2d\u201d pada id \u201cmyChart\u201d.<\/p>\n
var ctx = document.getElementById(\"myChart\").getContext('2d');<\/pre>\n
Dengan detail sebagai berikut.<\/p>\n
var myChart = new Chart(ctx, {\r\n    type: 'bar',\r\n    data: {\r\n        labels: [\"Red\", \"Blue\", \"Yellow\", \"Green\", \"Purple\", \"Orange\"],\r\n        datasets: [{\r\n            label: '# of Votes',\r\n            data: [12, 19, 3, 23, 2, 3],\r\n            backgroundColor: [\r\n            'rgba(255, 99, 132, 0.2)',\r\n            'rgba(54, 162, 235, 0.2)',\r\n            'rgba(255, 206, 86, 0.2)',\r\n            'rgba(75, 192, 192, 0.2)',\r\n            'rgba(153, 102, 255, 0.2)',\r\n            'rgba(255, 159, 64, 0.2)'\r\n            ],\r\n            borderColor: [\r\n            'rgba(255,99,132,1)',\r\n            'rgba(54, 162, 235, 1)',\r\n            'rgba(255, 206, 86, 1)',\r\n            'rgba(75, 192, 192, 1)',\r\n            'rgba(153, 102, 255, 1)',\r\n            'rgba(255, 159, 64, 1)'\r\n            ],\r\n        borderWidth: 1\r\n        }]\r\n    },\r\n    options: {\r\n        scales: {\r\n            yAxes: [{\r\n                ticks: {\r\n                    beginAtZero:true\r\n                }\r\n            }]\r\n        }\r\n    }\r\n});<\/pre>\n
Kita menetapkan jenis type grafik yang akan kita buat adalah jenis grafik \u201cbar\u201d.<\/p>\n
type: 'bar',<\/pre>\n
Dan untuk data grafik nya dan pengaturan warna yang teman-teman inginkan bisa di atur juga pada datasets<\/em>\u00a0berikut.<\/p>\n
datasets: [{\r\n    label: '# of Votes',\r\n    data: [12, 19, 3, 23, 2, 3],\r\n    backgroundColor: [\r\n    'rgba(255, 99, 132, 0.2)',\r\n    'rgba(54, 162, 235, 0.2)',\r\n    'rgba(255, 206, 86, 0.2)',\r\n    'rgba(75, 192, 192, 0.2)',\r\n    'rgba(153, 102, 255, 0.2)',\r\n    'rgba(255, 159, 64, 0.2)'\r\n    ],\r\n    borderColor: [\r\n    'rgba(255,99,132,1)',\r\n    'rgba(54, 162, 235, 1)',\r\n    'rgba(255, 206, 86, 1)',\r\n    'rgba(75, 192, 192, 1)',\r\n    'rgba(153, 102, 255, 1)',\r\n    'rgba(255, 159, 64, 1)'\r\n    ],\r\nborderWidth: 1\r\n}]<\/pre>\n
Penasaran dengan hasilnya? mari kita jalankan file index.html yang sudah kita buat di atas.
\n