TUTORIAL MEMBUAT GRAFIK DENGAN PHP MYSQL DAN CHARTJS
1,007 Comments
ChartJS adalah salah satu library yang memanfaatkan element canvas untuk membuat grafik yang akan ditampilkan melalui web browser, kita bisa memanfaatkan library ChartJS untuk menampilkan informasi laporan dalam bentuk grafik sehingga lebih mudah dipahami oleh orang lain dari pada menampilkan data dalam bentuk tabel. ChartJS sendiri mendukung 6 jenis chart sebagai berikut :
Tipe 1 – Line Chart
Tipe 2 – Bar Chart
Type 3 – Radar Chart
Type 4 – Polar Area Chart
Type 5 – Pie Dan Dognut Chart
Type 6 – Buble Charts
Membuat Folder Dan File Latihan
sekarang buatlah sebuah folder baru dengan nama charts pada folder C:\xampp\htdocs, kemudian buatlah sebuah file baru dengan nama index.php dan simpan di dalam folder chartjs. ada 2 cara untuk memanggil library ChartJS. Cara pertama adalah mengdownload ChartJS Secara Manual dan ikuti langkah langkah berikut :
- download library ChartJS chartjs.org
- extrack file Chart.js.zip ke folder C:\xampp\htdocs\chartjs
- Kemudian buka lagi file index.php dan tulis script ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<html>
<head>
<title>Belajarphp.net - ChartJS</title>
<script src="Chart.bundle.js"></script>
<style type="text/css">
.container {
width: 50%;
margin: 15px auto;
}
</style>
</head>
<body>
<div class="container">
<canvas id="myChart" width="100" height="100"></canvas>
</div>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 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>
|
Cara kedua kita bisa menggunakan CDN sehingga kita tidak perlu mengdownload library ChartJS secara manual, hal ini tentu lebih mudah dan performance nya jadi lebih cepat. sehingga implementasi nya anda bisa mengganti script index.php pada line 4 menjadi seperti ini :
1
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
|
Uji Coba Hasil Generate ChartJS
sekarang waktunya melakukan ujicoba untuk melihat hasilnya, silahkan buka web browser anda dan masukan alamat http://localhost/chartjs/ pada address bar web browser.
Penawaran Spesial Untuk Anda, Promo Berakhir 11 January 2019
Membuat Data Dinamis Dari Database MySQL
sekarang kita akan membuat sebuah tabel dengan nama penjualan yang akan digunakan untuk menyimpan informasi hasil penjualan sebuah perusahaan, berikut field field nya :
lalu kita akan menginsert beberapa data kedalam tabel penjualan
1
2
3
4
5
6
7
8
9
10
11
12
|
INSERT INTO `penjualan` VALUES (1,'January',2016,10);
INSERT INTO `penjualan` VALUES (2,'February',2016,12);
INSERT INTO `penjualan` VALUES (3,'Maret',2016,13);
INSERT INTO `penjualan` VALUES (4,'April',2016,18);
INSERT INTO `penjualan` VALUES (5,'May',2017,16);
INSERT INTO `penjualan` VALUES (6,'Juni',2016,14);
INSERT INTO `penjualan` VALUES (7,'July',2016,15);
INSERT INTO `penjualan` VALUES (8,'Agustus',2016,12);
INSERT INTO `penjualan` VALUES (9,'September',2016,19);
INSERT INTO `penjualan` VALUES (10,'Oktober',2016,12);
INSERT INTO `penjualan` VALUES (11,'November',2016,12);
INSERT INTO `penjualan` VALUES (12,'Desember',2016,20);
|
sehingga sekarang jika kita menjalankan query untuk melihat semua data yang sudah masuk maka akan muncul seperti ini :
lalu kita akan modifikasi script index.php yang sebelumnya data statis akan kita ubah menjadi data dinamis berdasarkan hasil dari tabel penjualan.
lalu kita akan modifikasi script index.php yang sebelumnya data statis akan kita ubah menjadi data dinamis berdasarkan hasil dari tabel penjualan.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<?php
$koneksi = mysqli_connect("localhost", "root", "", "latihan");
$bulan = mysqli_query($koneksi, "SELECT bulan FROM penjualan WHERE tahun='2016' order by id asc");
$penghasilan = mysqli_query($koneksi, "SELECT hasil_penjualan FROM penjualan WHERE tahun='2016' order by id asc");
?>
<html>
<head>
<title>Belajarphp.net - ChartJS</title>
<script src="Chart.bundle.js"></script>
<style type="text/css">
.container {
width: 50%;
margin: 15px auto;
}
</style>
</head>
<body>
<div class="container">
<canvas id="myChart" width="100" height="100"></canvas>
</div>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [<?php while ($b = mysqli_fetch_array($bulan)) { echo '"' . $b['bulan'] . '",';}?>],
datasets: [{
label: '# of Votes',
data: [<?php while ($p = mysqli_fetch_array($penghasilan)) { echo '"' . $p['hasil_penjualan'] . '",';}?>],
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)',
'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)',
'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)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
</html>
|
Lalu silahkan save untuk menyimpan perubahan dan silahkan refresh web browser anda.
sekian artikel membuat grafik menggunakan bahasa pemograman PHP MySQL dan ChartJS.
