PHP

Membuat Grafik Dari Database MySQL

Dan PHP Dengan Chart.js

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.
 Formatted: Font: (Default) Segoe UI, 12 pt, Font color:
Custom Color(RGB(33,37,41))

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
1 -- phpMyAdmin SQL Dump

2 -- version 4.8.0.1

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

4 --

5 -- Host: localhost

6 -- Generation Time: Sep 14, 2018 at 12:13 PM

7 -- Server version: 10.1.32-MariaDB

8 -- PHP Version: 5.6.36

10 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

11 SET AUTOCOMMIT = 0;

12 START TRANSACTION;

13 SET time_zone = "+00:00";

14

15

16 /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

17 /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

18 /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

19 /*!40101 SET NAMES utf8mb4 */;

20

21 --

22 -- Database: `grafik_mahasiswa`

23 --
24

25 -- --------------------------------------------------------

26

27 --

28 -- Table structure for table `mahasiswa`

29 --

30

31 CREATE TABLE `mahasiswa` (

32 `id` int(11) NOT NULL,

33 `nama` varchar(100) NOT NULL,

34 `nim` varchar(100) NOT NULL,

35 `jenis_kelamin` varchar(1) NOT NULL,

36 `fakultas` varchar(50) NOT NULL

37 ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

38

39 --

40 -- Dumping data for table `mahasiswa`

41 --

42

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

64

65 --

66 -- Indexes for dumped tables

67 --

68

69 --

70 -- Indexes for table `mahasiswa`

71 --

72 ALTER TABLE `mahasiswa`

73 ADD PRIMARY KEY (`id`);

74

75 --

76 -- AUTO_INCREMENT for dumped tables

77 --
78

79 --

80 -- AUTO_INCREMENT for table `mahasiswa`

81 --

82 ALTER TABLE `mahasiswa`

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

84 COMMIT;

85

86 /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

87 /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

88 /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

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)
 Formatted: Font: (Default) Segoe UI, 12 pt, Font color:
Custom Color(RGB(33,37,41))

membuat grafik dengan php dan mysql

Koneksi.php

1 <?php

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

3 ?>
Index.php

1 <!DOCTYPE html>

2 <html>

3 <head>

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

5 <script type="text/javascript" src="chartjs/Chart.js"></script>

6 </head>

7 <body>

8 <style type="text/css">

9 body{

10 font-family: roboto;

11 }

12

13 table{

14 margin: 0px auto;

15 }

16 </style>

17

18

19 <center>

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

21 </center>

22
23

24 <?php

25 include 'koneksi.php';

26 ?>

27

28 <div style="width: 800px;margin: 0px auto;">

29 <canvas id="myChart"></canvas>

30 </div>

31

32 <br/>

33 <br/>

34

35 <table border="1">

36 <thead>

37 <tr>

38 <th>No</th>

39 <th>Nama Mahasiswa</th>

40 <th>NIM</th>

41 <th>Fakultas</th>

42 </tr>

43 </thead>

44 <tbody>

45 <?php

46 $no = 1;

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

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

49 ?>
50 <tr>

51 <td><?php echo $no++; ?></td>

52 <td><?php echo $d['nama']; ?></td>

53 <td><?php echo $d['nim']; ?></td>

54 <td><?php echo $d['fakultas']; ?></td>

55 </tr>

56 <?php

57 }

58 ?>

59 </tbody>

60 </table>

61

62

63 <script>

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

65 var myChart = new Chart(ctx, {

66 type: 'bar',

67 data: {

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

69 datasets: [{

70 label: '',

71 data: [

72 <?php

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

74 echo mysqli_num_rows($jumlah_teknik);

75 ?>,

76 <?php
77 $jumlah_ekonomi = mysqli_query($koneksi,"select * from mahasiswa where fakultas='ekonomi'");

78 echo mysqli_num_rows($jumlah_ekonomi);

79 ?>,

80 <?php

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

82 echo mysqli_num_rows($jumlah_fisip);

83 ?>,

84 <?php

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

86 echo mysqli_num_rows($jumlah_pertanian);

87 ?>

88 ],

89 backgroundColor: [

90 'rgba(255, 99, 132, 0.2)',

91 'rgba(54, 162, 235, 0.2)',

92 'rgba(255, 206, 86, 0.2)',

93 'rgba(75, 192, 192, 0.2)'

94 ],

95 borderColor: [

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

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

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

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

100 ],

101 borderWidth: 1

102 }]

103 },
104 options: {

105 scales: {

106 yAxes: [{

107 ticks: {

108 beginAtZero:true

109 }

110 }]

111 }

112 }

113 });

114 </script>

115 </body>

116 </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.
 Formatted: Font: (Default) Segoe UI, 12 pt, Font color:
Custom Color(RGB(33,37,41))

cara membuat grafik dari database

Grafik pun langsung jadi. lengkap dengan animasi pada grafik atau chart nya.
 Formatted: Font: (Default) Segoe UI, 12 pt, Font color:
Custom Color(RGB(33,37,41))

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.

1 $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.
1 <script type="text/javascript" src="chartjs/Chart.js"></script>

kemudian lagi, kita buat element <canvas>..</canvas> dengan memberikan id juga

untuk membuat grafik menggunakan chart.js (sudah dijelaskan juga pada tutorial
sebelumnya).

1 <div style="width: 800px;margin: 0px auto;">

2 <canvas id="myChart"></canvas>

3 </div>

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

1 <table border="1">

2 <thead>

3 <tr>

4 <th>No</th>

5 <th>Nama Mahasiswa</th>

6 <th>NIM</th>

7 <th>Fakultas</th>

8 </tr>
9 </thead>

10 <tbody>

11 <?php

12 $no = 1;

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

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

15 ?>

16 <tr>

17 <td><?php echo $no++; ?></td>

18 <td><?php echo $d['nama']; ?></td>

19 <td><?php echo $d['nim']; ?></td>

20 <td><?php echo $d['fakultas']; ?></td>

21 </tr>

22 <?php

23 }

24 ?>

25 </tbody>

26 </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.

1 <script>

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

3 var myChart = new Chart(ctx, {

4 type: 'bar',

5 data: {

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

7 datasets: [{

8 label: '',

9 data: [

10 <?php

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

12 echo mysqli_num_rows($jumlah_teknik);

13 ?>,

14 <?php

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

16 echo mysqli_num_rows($jumlah_ekonomi);

17 ?>,

18 <?php

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

20 echo mysqli_num_rows($jumlah_fisip);

21 ?>,

22 <?php

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

24 echo mysqli_num_rows($jumlah_pertanian);

25 ?>

26 ],

27 backgroundColor: [

28 'rgba(255, 99, 132, 0.2)',

29 'rgba(54, 162, 235, 0.2)',

30 'rgba(255, 206, 86, 0.2)',

31 'rgba(75, 192, 192, 0.2)'

32 ],

33 borderColor: [

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

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

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

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

38 ],

39 borderWidth: 1

40 }]

41 },

42 options: {

43 scales: {

44 yAxes: [{

45 ticks: {

46 beginAtZero:true

47 }

48 }]

49 }

50 }

51 });

52 </script>

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

2 <?php

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

4 echo mysqli_num_rows($jumlah_teknik);

5 ?>,

6 <?php

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

8 echo mysqli_num_rows($jumlah_ekonomi);

9 ?>,

10 <?php

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

12 echo mysqli_num_rows($jumlah_fisip);

13 ?>,

14 <?php

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

16 echo mysqli_num_rows($jumlah_pertanian);

17 ?>

18 ],

misal, kita ambil data dari table mahasiswa yang mana fakultasnya adalah “teknik”.
kemudian kita hitung jumlah nya dengan fungsi mysqli_num_rows().
1 $jumlah_teknik = mysqli_query($koneksi,"select * from mahasiswa where fakultas='teknik'");

2 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 :

1. Membuat Koneksi Database Dengan PHP dan MySQLi

2. Membuat CRUD dengan PHP dan MySQLi – Menampilkan Data
3. Membuat Grafik Dengan Chart.js

DOWNLOAD SOURCE CODE

Incoming search terms:

 membuat grafik dinamis di php dengan mysql
 buat table sql berdasarkan grafik
 Cara membuat grafik php
 grafik dinamis
 cara membuat tabel php morris js
 membuat chart di php web
 coding membuat grafik
 membuat grafik dari database menggunakan php
 cara membuat grafik executive menggunakan php
 coding untuk menampilkan grafik dari data mengggunakan php