Cara menggunakan charts in html css

Hai sobat yadishare, di artikel kali ini saya akan membahas dan memberikan sedikit tutorial tentang bagaimana cara membuat grafik garis atau line chart menggunakan php, database mysql dan chartjs. Tema grafik atau chart yang akan kita buat kali ini adalah mengenai penjualan suatu barang di sebuah perusahaan.

Untuk lebih memudahkan dalam pemahaman cara membuat grafik menggunakan chartjs ini, data yang akan kita tampilkan akan kita buat dengan sangat sederhana sekali. Untuk teman-teman yang belum mengetahui mengenai apa itu chartjs saya akan ulas sedikit disini. Chart.js adalah perpustakaan JavaScript (open source) yang memungkinkan anda untuk menggambar berbagai jenis bagan/grafik/chart dengan menggunakan elemen kanvas HTML5.

Disini penulis menganggap bahwa teman-teman sudah mengerti dasar-dasar cara membuat aplikasi web menggunakan html dan php, sudah tahu mengenai webserver dan tahu mengenai cara membuat database, table dan query menggunakan database mysql. Versi PHP yang saya gunakan disini adalah versi 7. Jadi driver mysql yang digunakan adalah driver mysqli. Oke langsung saja kita masuk ke tahap tutorialnya.

Pertama kita buat sebuah folder dengan nama linechartjs terlebih dahulu di dalam folder htdocs karena saya menggunakan xampp sebagai webserver disini dan kebetulan saya menyimpan folder xampp di drive D. Terus download library chartjs di sini. Buat sebuah folder dengan nama js di dalam folder linechartjs tadi dan letakkan library chartjs tadi ke dalam folder js tersebut. Hasil akhirnya akan menjadi seperti ini :

Sekarang kita buat database baru dengan nama grafik dan table dengan nama salespermonth di mysql dan teman-teman bisa langsung copy script sql berikut ini agar lebih cepat dan tidak perlu mengisikan datanya satu per satu :

</pre>
/* SQLyog Ultimate v11.11 (64 bit) MySQL - 5.5.5-10.1.36-MariaDB : Database - grafik ********************************************************************* */ /*!40101 SET NAMES utf8 */; /*!40101 SET SQL_MODE=''*/; /*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */; /*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */; /*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */; /*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */; CREATE DATABASE /*!32312 IF NOT EXISTS*/`grafik` /*!40100 DEFAULT CHARACTER SET latin1 */; USE `grafik`; /*Table structure for table `sales` */ DROP TABLE IF EXISTS `sales`; CREATE TABLE `sales` ( `id` int(11) NOT NULL AUTO_INCREMENT, `merk` varchar(50) DEFAULT NULL, `penjualan` int(11) DEFAULT '0', PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1; /*Data for the table `sales` */ insert into `sales`(`id`,`merk`,`penjualan`) values (1,'Laptop',90),(2,'PC',80),(3,'Monitor',70),(4,'Printer',60),(5,'Accessories',50),(6,'Hard Disk',40); /*Table structure for table `salespermonth` */ DROP TABLE IF EXISTS `salespermonth`; CREATE TABLE `salespermonth` ( `produk` varchar(50) DEFAULT NULL, `jan` int(11) DEFAULT NULL, `feb` int(11) DEFAULT NULL, `mar` int(11) DEFAULT NULL, `apr` int(11) DEFAULT NULL, `may` int(11) DEFAULT NULL, `jun` int(11) DEFAULT NULL, `jul` int(11) DEFAULT NULL, `aug` int(11) DEFAULT NULL, `sep` int(11) DEFAULT NULL, `oct` int(11) DEFAULT NULL, `nov` int(11) DEFAULT NULL, `dec` int(11) DEFAULT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; /*Data for the table `salespermonth` */ insert into `salespermonth`(`produk`,`jan`,`feb`,`mar`,`apr`,`may`,`jun`,`jul`,`aug`,`sep`,`oct`,`nov`,`dec`) values ('Laptop',100,200,500,800,1000,1200,1150,950,850,650,400,230),('PC',60,150,180,190,200,210,220,230,240,250,260,270),('Monitor',50,90,120,130,140,150,160,170,180,190,200,210),('Printer',40,45,50,55,60,65,70,75,80,85,90,95),('Accessories',500,250,300,150,400,600,800,600,400,200,400,600); /*!40101 SET SQL_MODE=@OLD_SQL_MODE */; /*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */; /*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */; /*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
<pre>

Kalau sudah sekarang kita buat sebuah file dengan nama index.php dan simpan di dalam folder linechartjs tadi. Agar lebih cepat teman-teman juga dapat langsung mengcopy script php yang sudah saya siapkan berikut ini :

Chartjs, PHP dan MySQL Demo Grafik Garis

.container {
width: 40%;
margin: 15px auto;
}</pre>
<div class="container"></div>
<pre>

var ctx = document.getElementById("linechart").getContext("2d");
var data = {
labels: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
datasets: [
{
label: "Laptop",
fill: false,
lineTension: 0.1,
backgroundColor: "#29B0D0",
borderColor: "#29B0D0",
pointHoverBackgroundColor: "#29B0D0",
pointHoverBorderColor: "#29B0D0",
data: []
},
{
label: "PC",
fill: false,
lineTension: 0.1,
backgroundColor: "#2A516E",
borderColor: "#2A516E",
pointHoverBackgroundColor: "#2A516E",
pointHoverBorderColor: "#2A516E",
data: []
},
{
label: "Monitor",
fill: false,
lineTension: 0.1,
backgroundColor: "#F07124",
borderColor: "#F07124",
pointHoverBackgroundColor: "#F07124",
pointHoverBorderColor: "#F07124",
data: []
},
{
label: "Printer",
fill: false,
lineTension: 0.1,
backgroundColor: "#CBE0E3",
borderColor: "#CBE0E3",
pointHoverBackgroundColor: "#CBE0E3",
pointHoverBorderColor: "#CBE0E3",
data: []
},
{
label: "Accessories",
fill: false,
lineTension: 0.1,
backgroundColor: "#979193",
borderColor: "#979193",
pointHoverBackgroundColor: "#979193",
pointHoverBorderColor: "#979193",
data: []
}
]
};

var myBarChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
legend: {
display: true
},
barValueSpacing: 20,
scales: {
yAxes: [{
ticks: {
min: 0,
}
}],
xAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}]
}
}
});

Untuk koneksi database saya tidak menggunakan password mysql. Jadi teman-teman akan menemukan script seperti ini :

$koneksi = mysqli_connect("localhost", "root", "", "grafik");

Silahkan teman-teman sesuaikan saja dengan konfigurasi koneksi database mysql yang teman-teman gunakan. Apabila menggunakan password silahkan diisikan saja password yang teman-teman gunakan.

Kalau sudah selesai silahkan teman-teman buka browser dengan cara mengetikkan link seperti berikut ini http://localhost/linechartjs/ dan berikut hasilnya jika semua step dilakukan dengan benar.

Oke sobat yadishare sekian dulu tutorial cara membuat chart menggunakan library chartjs kali ini, semoga ada manfaatnya buat kita semua, sampai jumpa di tutorial-tutorial berikutnya, jangan lupa di like, comment dan subscribe channel youtube saya yah… 🙂

Download source code disini