Membuat diagram dengan php

PHP

Table of Contents Show

Membuat Grafik Dari Database MySQL Dan PHP Dengan Chart.js
Membuat Grafik Dari Database MySQL Dan PHP Dengan Chart.js
TUTORIAL MENARIK LAINNYA
Membuat Laporan PDF Dengan PHP dan MySQLi
Export Data ke Excel Dengan PHP dan MySQLi
Membuat QR Code Dengan PHP
Menghitung Jumlah Baris dalam File Pada PHP

By
14 September 2018
PHP

Membuat Grafik Dari Database MySQL Dan PHP Dengan Chart.js

Membuat Grafik Dari Database MySQL Dan PHP Dengan Chart.js – Seperti yang saya singgung sebelumnya di tutorial cara membuat grafik dengan chart.js, kita akan membahas tentang Cara Membuat Grafik Dari Database MySQL Dan PHP Dengan Chart.js.

Jika sebelumnya kita telah belajar tentang cara membuat grafik atau chart dengan chart.js, pada tutorial ini tidak lagi kita bahas tentang cara membuat grafik, tapi lebih ke cara menerapkan data dari database ke dalam grafik yang kita buat. Membuat Grafik Dari Database MySQL Dan PHP Dengan Chart.js

Jadi di tutorial ini kita akan belajar menampilkan data dari database ke dalam data grafik. dengan cara mengambil data dari database. kemudian kita tampilkan dalam bentuk grafik atau chart.

Saya rekomendasikan untuk teman-teman membaca tutorial berikut sebelum membaca tutorial ini.

Membuat grafik dengan chart.js
Menampilkan data dari database dengan PHP dan MySQLi

Membuat Grafik Dari Database MySQL Dan PHP Dengan Chart.js

Pertama-tama kita siapkan dulu sebuah database dan sebuah tabel. dimana data yang akan kita tampilkan pada grafik adalah data yang berasal dan tersimpan pada database dan table ini.

Persiapan database

Di contoh kasus Tutorial Membuat Grafik Dari Database MySQL Dan PHP Dengan Chart.js ini kita akan membuat sebuah database dengan nama “grafik_mahasiswa”, dan membuat sebuah table dengan nama “mahasiswa” dengan column id, nama, nim dan fakultas. seperti pada gambar berikut.

Membuat Grafik Dari Database MySQL Dan PHP Dengan Chartjs

Seperti yang terlihat pada gambar di atas, saya telah membuat database dengan nama “grafik_mahasiswa” dan sebuah table dengan nama “mahasiswa”. dan saya juga telah mengisi 20 data mahasiswa untuk kita jadikan data sampel pada contoh kasus tutorial membuat chart dari database dengan PHP ini.

Jika teman-teman ingin membuat table dan menginput data mahasiswa nya dengan cepat, silahkan teman-teman import file sql berikut setelah membuat database dengan nama “grafik_mahasiswa”.

sql

--phpMyAdmin SQL Dump

--version4.8.0.1

--https://www.phpmyadmin.net/

--Host:localhost

--Generation Time:Sep14,2018 at12:13PM

--Server version:10.1.32-MariaDB

--PHP Version:5.6.36

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

SET AUTOCOMMIT= 0;

START TRANSACTION;

SET time_zone="+00:00";

/*!40101 SET NAMES utf8mb4 */;

--Database:`grafik_mahasiswa`

----------------------------------------------------------

--Table structure for table`mahasiswa`

CREATE TABLE`mahasiswa`(

`id`int(11)NOT NULL,

`nama`varchar(100)NOT NULL,

`nim` varchar(100)NOT NULL,

`jenis_kelamin`varchar(1)NOT NULL,

`fakultas`varchar(50)NOT NULL

)ENGINE=InnoDB DEFAULT CHARSET=latin1;

--Dumping data for table`mahasiswa`

INSERT INTO`mahasiswa`(`id`,`nama`,`nim`,`jenis_kelamin`,`fakultas`)VALUES

(1, 'Johny Pambudi','1234567890','L','Teknik'),

(2,'Maya Rahmaniah','1234456667','P','Ekonomi'),

(3,'Diki ALfarabi Hadi','123345678887','L','Teknik'),

(4, 'Suamtono','123456789','L','Fisip'),

(5,'Jamludin Syah','12345663536','L','Teknik'),

(6,'Rahmaniah','212111231133','P','Ekonomi'),

(7, 'Qiano Arfabian Putra','1123555365','L','Teknik'),

(8,'Gibran','1122432434','L','Ekonomi'),

(9,'Johny','12363377332','L','Pertanian'),

(10, 'Muhammad Riski','12837373839','L','Fisip'),

(11,'Rahmat Syah Alub','122652626252','L','Fisip'),

(12,'Mahmud Amir','123455467464','L','Pertanian'),

(13, 'Aminah','123112342','P','Teknik'),

(14,'Putri Aladin','213114324234','P','Ekonomi'),

(15,'Lubis','11231334234','P','Pertanian'),

(16, 'Iqlima','12312423423','P','Pertanian'),

(17,'Rahman Muhammad','121312438','L','Pertanian'),

(18,'Muhammad Ikbal','12387448844','L','Teknik'),

(19, 'Monika','1223244344','P','Fisip'),

(20,'Haris Aziz','1123834748','L','Teknik');

--Indexes for dumped tables

--Indexes for table`mahasiswa`

ALTER TABLE`mahasiswa`

ADD PRIMARY KEY(`id`);

--AUTO_INCREMENT for dumped tables

--AUTO_INCREMENT for table `mahasiswa`

ALTER TABLE`mahasiswa`

MODIFY`id`int(11)NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=21;

COMMIT;

Oke sampai disini kita telah punya 1 database dan 1 table mahasiswa. nah sekarang tugas kita adalah menampilkan data mahasiswa berdasarkan fakultas pada sebuah grafik. misalnya mahasiswa fakultas teknik ada berapa orang, mahasiswa fakultas ekonomi berapa orang, begitu juga dengan mahasiswa pertanian dan fisip.

Membuat Grafik Data Mahasiswa Dari Database

Setelah kita mempunyai data yang ingin kita buatkan grafiknya, langsung saja kita buat grafiknya seperti yang telah kita pelajari di tutorial cara membuat grafik dengan chart.js.

Project ini saya buat dalam folder “grafik_mahasiswa“. kemudian langsung saja masukkan chart.js nya ke dalam folder grafik_mahasiswa. seperti yang sudah di jelaskan di tutorial membuat grafik dengan chart.js sebelumnya. dimana sebelumnya kita telah belajar menginstalasi dan menggunakan chart.js

Dan buat 2 buah file PHP. yaitu :

koneksi.php (untuk membuat koneksi database php dan mysql)
index.php (untuk membuat grafik dan menampilkan data grafik mahasiswa)

membuat grafik dengan php dan mysql

Koneksi.php

<?php

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

Index.php

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

<!DOCTYPE html>

<html>

<head>

<title>MEMBUAT GRAFIK DARI DATABASE MYSQL DENGAN PHP DAN CHART.JS- www.malasngoding.com</title>

</head>

<body>

body{

font-family:roboto;

}

table{

margin:0pxauto;

}

</style>

<h2>MEMBUAT GRAFIK DARI DATABASE MYSQL DENGAN PHP DAN CHART.JS<br/>-www.malasngoding.com-</h2>

</center>

<?php

include'koneksi.php';

</div>

<br/>

<thead>

<tr>

<th>NamaMahasiswa</th>

<th>Fakultas</th>

</tr>

</thead>

<tbody>

<?php

$no=1;

$data=mysqli_query($koneksi,"select * from mahasiswa");

while($d=mysqli_fetch_array($data)){

<tr>

</tr>

<?php

}

</tbody>

</table>

var ctx=document.getElementById("myChart").getContext('2d');

var myChart=new Chart(ctx,{

type:'bar',

data:{

labels:["Teknik","Fisip","Ekonomi","Pertanian"],

datasets:[{

label:'',

data:[

<?php

$jumlah_teknik=mysqli_query($koneksi,"select * from mahasiswa where fakultas='teknik'");

echo mysqli_num_rows($jumlah_teknik);

?>,

<?php

$jumlah_ekonomi= mysqli_query($koneksi,"select * from mahasiswa where fakultas='ekonomi'");

echo mysqli_num_rows($jumlah_ekonomi);

?>,

<?php

$jumlah_fisip=mysqli_query($koneksi,"select * from mahasiswa where fakultas='fisip'");

echo mysqli_num_rows($jumlah_fisip);

?>,

<?php

$jumlah_pertanian=mysqli_query($koneksi,"select * from mahasiswa where fakultas='pertanian'");

echo mysqli_num_rows($jumlah_pertanian);

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)'

borderColor: [

'rgba(255,99,132,1)',

'rgba(54, 162, 235, 1)',

'rgba(255, 206, 86, 1)',

'rgba(75, 192, 192, 1)'

borderWidth:1

}]

options:{

scales:{

yAxes:[{

ticks:{

beginAtZero:true

}

}]

}

});

</script>

</body>

</html>

Oke coba kita jalankan dulu pada browser. setelah melihat hasilnya akan saya jelaskan step by step cara kerjanya.

Buka localhost/grafik_mahasiswa pada browser. maka hasilnya seperti berikut. keren dan mudah kan.

cara membuat grafik dari database

Grafik pun langsung jadi. lengkap dengan animasi pada grafik atau chart nya.

membuat grafik dari database mysql dengan php dan chart.js

Penjelasan Membuat Grafik Dari Database MySQL Dan PHP Dengan Chart.js

Coba teman-teman perhatikan. pada file koneksi.php kita telah membuat koneksi database php dan mysqli. seperti yang telah kita pelajari sebelumnya di www.malasngoding.com yang tercinta ini.

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

Kemudian lanjut ke file index.php. pada file index.php yang pertama kali kita lakukan adalah menghubungkan file index.php dengan file chart.js seperti yang sudah dijelaskan juga pada tutorial sebelumnya.

kemudian lagi, kita buat element <canvas>..</canvas> dengan memberikan id juga untuk membuat grafik menggunakan chart.js (sudah dijelaskan juga pada tutorial sebelumnya).

</div>

kita juga menampilkan data mahasiswa dari database di dalam tabel. untuk caranya juga sudah di jelaskan pada tutorial sebelumnya.

<thead>

<tr>

<th>Nama Mahasiswa</th>

<th>Fakultas</th>

</tr>

</thead>

<tbody>

<?php

$no=1;

$data=mysqli_query($koneksi,"select * from mahasiswa");

while($d=mysqli_fetch_array($data)){

<tr>

</tr>

<?php

}

</tbody>

</table>

Baca : Tutorial Menampilkan data dari database dengan PHP dan MySQLi

dan terakhir pada inti dari pembuatan grafik ini yaitu pada fungsi chart.js yang berguna untuk membuat chart atau grafik nya.

var ctx=document.getElementById("myChart").getContext('2d');

var myChart=new Chart(ctx,{

type:'bar',

data:{

labels:["Teknik","Fisip","Ekonomi","Pertanian"],

datasets:[{

label:'',

data:[

<?php

$jumlah_teknik=mysqli_query($koneksi,"select * from mahasiswa where fakultas='teknik'");

echo mysqli_num_rows($jumlah_teknik);

?>,

<?php

$jumlah_ekonomi= mysqli_query($koneksi,"select * from mahasiswa where fakultas='ekonomi'");

echo mysqli_num_rows($jumlah_ekonomi);

?>,

<?php

$jumlah_fisip=mysqli_query($koneksi,"select * from mahasiswa where fakultas='fisip'");

echo mysqli_num_rows($jumlah_fisip);

?>,

<?php

$jumlah_pertanian=mysqli_query($koneksi,"select * from mahasiswa where fakultas='pertanian'");

echo mysqli_num_rows($jumlah_pertanian);

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)'

borderColor: [

'rgba(255,99,132,1)',

'rgba(54, 162, 235, 1)',

'rgba(255, 206, 86, 1)',

'rgba(75, 192, 192, 1)'

borderWidth:1

}]

options:{

scales:{

yAxes:[{

ticks:{

beginAtZero:true

}

}]

}

});

</script>

Pada array data, jika kita tampilkan jumlah dari data mahasiswa berdasarkan fakultas nya masing-masing.

data:[

<?php

$jumlah_teknik=mysqli_query($koneksi,"select * from mahasiswa where fakultas='teknik'");

echomysqli_num_rows($jumlah_teknik);

?>,

<?php

$jumlah_ekonomi=mysqli_query($koneksi,"select * from mahasiswa where fakultas='ekonomi'");

echomysqli_num_rows($jumlah_ekonomi);

?>,

<?php

$jumlah_fisip= mysqli_query($koneksi,"select * from mahasiswa where fakultas='fisip'");

echomysqli_num_rows($jumlah_fisip);

?>,

<?php

$jumlah_pertanian=mysqli_query($koneksi,"select * from mahasiswa where fakultas='pertanian'");

echomysqli_num_rows($jumlah_pertanian);

misal, kita ambil data dari table mahasiswa yang mana fakultasnya adalah “teknik”. kemudian kita hitung jumlah nya dengan fungsi mysqli_num_rows().

$jumlah_teknik=mysqli_query($koneksi,"select * from mahasiswa where fakultas='teknik'");

echo mysqli_num_rows($jumlah_teknik);

begitu juga dengan data mahasiswa fakultas ekonomi, fisip dan pertanian.

nah sangat mudah kan teman-teman.

Oke sekian dulu Tutorial Membuat Grafik Dari Database MySQL Dan PHP Dengan Chart.js ini. semoha dapat bermanfaat untuk teman-teman. pada tutorial selanjutnya kita akan membuat grafik lagi, tapi dengan contoh kasus yang berbeda, yaitu kita akan membuat grafik yang menghitung jumlah mahasiswa berdasarkan jenis kelamin dalam bentuk grafik pie.

Kita lanjutkan ke part 2

Membuat Grafik Dari Database Dengan PHP Part 2

Pada part 2 kita akan belajar membuat grafik dinamis dengan php. dan membuat grafik pie. serta membuat grafik mahasiswa berdasarkan jenis kelamin.

Tutorial Yang Berkaitan dengan tutorial ini :

Membuat Koneksi Database Dengan PHP dan MySQLi
Membuat CRUD dengan PHP dan MySQLi – Menampilkan Data
Membuat Grafik Dengan Chart.js

DOWNLOAD SOURCE CODE

Incoming search terms:

membuat grafik realtime di php
membuat grafik dinamis di php dengan mysql
grafik php
membuat grafik dengan php
membuat grafik php
Cara membuat grafik php
Membuat Grafik Dari Database MySQL Dan PHP Dengan Chart js – Malas Ngoding
cara membuat laporan grafik dengan php
buat table sql berdasarkan grafik
Cara membuat chart php

Tags: cara membuat grafik batang di html, cara membuat grafik dengan bootstrap, chart html, chart js codeigniter, grafik html, membuat grafik batang dengan php dan mysql, membuat grafik chart menggunakan php + highchart, membuat grafik dari database menggunakan php, membuat grafik di codeigniter dari database, membuat grafik di web, membuat grafik dinamis dengan php, membuat grafik dinamis di php dengan mysql, membuat grafik garis dengan php, membuat grafik pie dengan php dan mysql, membuat grafik realtime dengan php, membuat grafik sederhana dengan php, membuat line chart dengan php

TUTORIAL MENARIK LAINNYA

PHP

Membuat Laporan PDF Dengan PHP dan MySQLi

3 September 2022

Membuat laporan dalam bentuk PDF merupakan merupakah salah satu materi yang harus kita kuasai dalam proses pembuatan aplikasi. Kenapa demikian ? Hal ini karena hampir ...

PHP

Export Data ke Excel Dengan PHP dan MySQLi

23 August 2022

Export data ke excel dengan PHP dalah salah satu model yang biasanya digunakan dalam membuat laporan berdasarkan referensi data dari MySQL. Export data ke excel ...

PHP

Membuat QR Code Dengan PHP

3 August 2022

Membuat QR Code Dengan PHP – Halo teman-teman, Selamat datang kembali di malasngoding.com. Pada materi tutorial ini kita akan belajar tentang Membuat QR Code Dengan ...

PHP

Menghitung Jumlah Baris dalam File Pada PHP

18 June 2022

Menghitung jumlah baris adalah salah satu teknik yang penting dalam berbagai bidang terutama dalam bidang pemrograman. Dalam pemrograman web, disini saya menggunakan pemrograman PHP untuk ...