Membuat Grafik Dengan Chart.js - Pengertian Grafik adalah kumpulan data dari beberapa tabel yang disajikan atau ditampilkan dalam bentuk gambar, seperti persegi, lingkaran, tabung, segitiga, balok, kerucut dan lain-lain. Grafik juga biasa diartikan sebagai suatu kerangka atau gambar yang digunakan untuk membuat objek visualisasi dari data-data pada tabel dengan tujuan memberikan informasi mengenai suatu data dari penyaji / pemberi materi kepada penerima materi. Selain itu, grafik juga dapat diartikan sebagai gambaran dari pasang surut nya suatu data yang ada, dan digambarkan dengan garis atau pun gambar. Data yang digunakan untuk membuat grafik dapat berupa angka, huruf, simbol, gambar, lambang, perkataan, lukisan.
Banyak keuntungan dalam menggunakan grafik. salah satunya adalah agar aplikasi yang kita buat menjadi lebih terlihat profesional. karena data yang di tampilkan terlihat lebih visual dan menarik daripada hanya sekedar data berupa angka-angka.
Bagaimana cara membuat Grafik? banyak cara membuat grafik salah satunya adalah dengan menggunakan library atau plugin javascript yang dapat mempercepat proses pembuatan grafik dan banyak jenis grafik yang bisa teman-teman buat dengan Chart.js. Diantaranya adalah grafik bar, line, pie, donat dan lain-lain tinggal pilih saja sesuai kebutuhan teman-teman pada link berikut chart.js.
Bagaimana cara membuat Grafik dengan plugin javascript (Chart.js)? oke langsung saja kita mulai membuat grafik dengan chart.js.
Membuat Grafik Dengan Chart.js
Pada tutorial kali ini kita akan membuat beberapa jenis grafik dengan menggunakan chart.js.
Langsung saja teman-teman siapkan dulu chart.js nya dengan mendownload nya di https://github.com/chartjs/Chart.js/releases/tag/v3.6.0
Setelah file selesai di download, lalu ekstrak setelah itu kita buat folder baru bernama Project di dalam folder project kita buat folder degan nama chart dan file bernama index.html. kemudian bukan folder chart.js yang di download tadi lalu ambil file bernama chart.js di dalam folder chart.js/package/dist. Copy file chart.js kedalam folder project/chart yang telah kita buat tadi.
kemudian buka folder project lalu klik kanan pada file index.html lalu pilih edit with Notepad++ atau code editor lainnya, setelah itu isikan script berikut kedalam file index.html.
<html>
<head>
<title>Membuat Grafik Dengan Menggunakan Chart.js - https://pencurikode77.blogspot.com</title>
</head>
<body>
<style type="text/css">
body{
font-family: roboto;
}
</style>
<h2>Tutorial Membuat Grafik Dengan Chart.js - https://pencurikode77.blogspot.com/</h2>
<div style="height: 500px; width: 500px;">
<canvas id="myChart"></canvas>
</div>
<script src="Chart/Chart.js" type="text/javascript"></script>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 23, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
</body>
</html>
Jika teman-teman telah menulis/copy syntax diatas kedalam file index.html, langkah selajutnya adalah menjalankan file index.html dengan cara klik kanan pada file index.html lalu pilih open atau double klik.
<script src="Chart/Chart.js" type="text/javascript"></script> type: 'bar'
- pie = type: 'pie',
- line = type: 'line'
See the Pen Untitled by Andrian (@Andrian26) on CodePen.