Chart Js Php Mysql Tutorial

Cara Membuat Grafik bersumber
Database MySQL
dengan
Chart Js.
Assalamualaikum, halo semuanya kembali lagi di
sahretech. Kali ini mimin akan memberikan
pelajaran
mandu godok data berusul
database
menjadi grafik yang mudah dibaca. Penasaran ? Ikuti tutorialnya berikut ini.

Chart
atau tabel adalah salah satu fitur yang lazim suka-suka di petisi laporan, pasalnya dengan adanya grafik pembacaan data menjadi bertambah mudah dipahami. Bakal kamu sang
programmer, enggak lengkap rasanya jika tidak memahami cara membuat tabel di
php.
Dan untungnya sekarang ada
library javascript
nan cukup kontributif para
developer
bikin membentuk petisi yang dibangun menjadi makin interaktif ialah
chart js

Chart Js
ialah
library javascript
yang memanfaatkan
element canvas
bikin membuat tabulasi yang akan ditampilkan di
web.
Kalian bisa mengunjungi situsnya di
chartjs.org.
Suka-suka banyak sortiran
chart
atau bagan yang boleh kalian gunakan, itu semua tergantung kebutuhan kalian. Berikut beberapa daftar bagannya.

Daftar ChartJs yang bisa dimanfaatkan

Pada
tutorial
mana tahu ini kita akan menggunakan
vertical bar chart
bikin penggarapan data terbelakang. Intinya agar kalian mudah memahaminya, dan bagi nan ingin tau lebih lanjut bagaimana cara membuat grafik nan bertambah kompleks kalian dapat kuak jerambah dokumentasi
chart js.

Cara Membuat Chart Js Nisbah Jumlah Macam Kelamin

Intro
: Puas
cak bimbingan
kali ini kita akan ki menggarap data mahasiswa, dimana kita akan menyodorkan perbandingan jumlah mahasiswa keberagaman kelamin adam dan perempuan. Artinya kita membutuhkan 2 buah
bar
/ mayat yang merepresentasikan jumlah junjungan-junjungan dan jumlah pemudi. Ok kita langsung masuk :

• 1. Buatlah sebuah
  database
  baru bernama tutorial
• 2. Untuk sebuah tabel les sama dengan gambar di asal ini dan jangan pangling disi dengan beberapa
  record data

grafik mahasiswa

• Atau biar cepat buatlah sebuah
  file
  baru bernama mahasiswa.sql. Isi
  file
  tersebut dengan
  script
  di bawah ini.
• Import
  mahasiswa.sql ke
  database
  les, caranya masuk ke
  database
  pelajaran >
  import
  > pilih
  file
  > klik
  go
  bagi melanjutkan.

        
          -- phpMyAdmin SQL Dump -- version 4.9.2 -- https://www.phpmyadmin.sauk-sauk/ -- -- Host: 127.0.0.1 -- Perian pembuatan: 05 Apr 2022 pada 17.43 -- Versi peladen: 10.4.11-MariaDB -- Varian PHP: 7.3.13  SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET AUTOCOMMIT = 0; Tiba TRANSACTION; SET time_zone = "+00:00";   /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */;  -- -- Database: `tuntunan` --  -- --------------------------------------------------------  -- -- Struktur berpangkal tabel `mahasiswa` --  CREATE TABLE `mahasiswa` (   `idmahasiswa` int(11) Titinada NULL,   `merek` varchar(30) Not NULL,   `jk` enum('lelaki','gadis') NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;  -- -- Dumping data bikin tabel `mahasiswa` --  INSERT INTO `mahasiswa` (`idmahasiswa`, `etiket`, `jk`) VALUES (1, 'nabil putra', 'pria'), (2, 'nabilah putri', 'perempuan'), (3, 'bill gates', 'junjungan-suami'), (4, 'neymar', 'laki-suami'), (5, 'kevin', 'laki-laki'), (6, 'fitri', 'amoi'), (7, 'eko cahyono', 'maskulin'), (8, 'Dwi cahyani', 'putri'), (9, 'raden', 'suami-laki'), (10, 'silvia', 'perempuan'), (11, 'chen', 'laki-suami');  -- -- Indexes for dumped tables --  -- -- Indeks untuk tabulasi `mahasiswa` -- ALTER TABLE `mahasiswa`   ADD PRIMARY KEY (`idmahasiswa`);  -- -- AUTO_INCREMENT bikin tabel yang dibuang --  -- -- AUTO_INCREMENT bakal tabulasi `mahasiswa` -- ALTER TABLE `mahasiswa`   MODIFY `idmahasiswa` int(11) Titinada NULL AUTO_INCREMENT, AUTO_INCREMENT=12; COMMIT;  /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
        
      

• 4. Selepas semua data berakibat diimport
  langkah selanjutnya ialah membuat folder baru bernama latihangrafik dan lewat buatlahfile
  baru bernama index.php di dalamnya. Adv amat ikuti
  scriptnya seperti di bawah ini.

        
          <?php //melakukan koneksi ke database // host = localhost, user = root, password = '', database = tutorial $sangkutan        = mysqli_connect("localhost", "root", "", "latihan");  //ambil data mahasiswa dimana jenis kelamin adalah pria $lakilaki       = mysqli_query($kombinasi, "SELECT jk FROM mahasiswa WHERE jk = 'laki-laki' ");  //rampas data mahasiswa dimana tipe kelamin adalah kuntum $perempuan      = mysqli_query($koneksi, "SELECT jk FROM mahasiswa WHERE jk = 'perempuan' "); ?> <html>     <head>         <title>Belajar Chart</title>          <!-- import library chart memperalat cdn -->         <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>         <style type="text/css">             .container {                 width: 50%;                 margin: 15px auto;             }         </style>     </head>     <body>         <div class="container">             <canvas id="myChart" ></canvas>         </div>         <script>             var ctx = document.getElementById("myChart");             var myChart = new Chart(ctx, {                 // tipe chart                 type: 'restoran',                 data: {                      //karena semata-mata menggunakan 2 batang                     //maka buat dua lebel, yaitu lebel laki-laki dan perempuan                     labels: ['Laki-junjungan', 'Amoi'],                      //dataset adalah data yang akan ditampilkan                     datasets: [{                             label: 'jumlah mahasiswa',                              //karena hanya menggunakan 2 batang/bar                             //maka 2 sql nan dibutuhkan                             //hitung jumlah mahasiswa maskulin dan total mahasiswa perempuan                             data: [                                 <?php echo mysqli_num_rows($lakilaki); ?>,                                 <?php echo mysqli_num_rows($perempuan);?>,                             ],                              //atur background barchartnya                             //karena belaka dua, maka 2 namun nan diatur                             backgroundColor: [                                 'rgba(255, 99, 132, 0.2)',                                 'rgba(54, 162, 235, 0.2)'                             ],                              //atur border barchartnya                             //karena hanya dua, maka 2 saja yang diatur                             borderColor: [                                 'rgba(255,99,132,1)',                                 'rgba(54, 162, 235, 1)',                                 'rgba(255, 206, 86, 1)'                             ],                             borderWidth: 1                         }]                 },                 options: {                     scales: {                         yAxes: [{                                 ticks: {                                     beginAtZero: true                                 }                             }]                     }                 }             });         </script>     </body> </html>
        
      

• 5. Jalankan di browser kalian, maka hasilnya akan tampak seperti gambar di bawah ini. grafik laki-laki ditunjukkan dengan rona biram cerah dan grafik perempuan ditunjukkan dengan warna biru jikalau dikalkulasi keduanya maka jumlahnya sama dengan yang ada di database

Hasil chart dengan data mahasiswa

Penjelasan
script
di atas :

Penjelasan
script
di atas simultan menjadi indeks nan harus di isi dalam menggunakan
kedai minum chartjs.
Kalau kita simulasikan ke data tidak, yaitu menotal jumlah mahasiswa berlandaskan jurusan maka kita teristiadat

Patut sekian tutorial Cara Membuat grafik dari
Php
dan
Database MySQL
dengan
ChartJs.
Hendaknya
tutorial
ini dapat mendukung kalian semua. Invalid lebihnya saya mohon maaf, apabila ada suara miring, saran dan pertanyaan silahkan tinggalkan di kolom komentar di bawah ini.
Happy Coding
dan sebatas jumpa di
kursus
lebih jauh 🙂