Membuat grafik di php mysql


Membuat grafik di php mysql


Selamat datang di blog Mari belajar coding. Setelah artikel sebelumnya kita belajar membuat sebuah grafik dengan chart.js, pada tutorial kali ini kita akan mengintegerasikannya dengan PHP dan database Mysql. Dengan menggunakan sebuah grafik, kita dapat membuat sebuah laporan seperti laporan data produk, data penjualan, dan sebagainya yang akan di tampilkan dalam bentuk visual.

 Membuat Grafik dengan Chart.js PHP dan MySQL

1. Di tutorial membuat grafik dengan chart.js php dan mysql ini, kita akan membuat sebuah grafik laporan data produk. Maka dari itu pertama kita buat sebuah database dan tabel. Contoh buat database penjualan dan tabel produk

CREATE DATABASE penjualan;
USE penjualan;

CREATE TABLE `produk` (
`IdProduk` int(11) PRIMARY KEY AUTO_INCREMENT,
`NamaProduk` varchar(255),
`Jml` int(11)
);

Membuat grafik di php mysql

2. Insert data kedalam tabel produk.

INSERT INTO `produk` (`IdProduk`, `NamaProduk`, `Jml`) VALUES
(9, 'Asus', 18),
(10, 'Apple', 25),
(11, 'Xiomi', 13),
(12, 'Oppo', 5),
(13, 'Vivo', 7),
(14, 'Samsung', 30);

Membuat grafik di php mysql

3. Setelah berhasil membuat sebuah database dan insert data kedalam tabel, sekarang kita telah mempunyai data produk dengan field idProduk, NamaProduk dan Jml. Selanjutnya buat sebuah file json dari data produk. Salin kode berikut ini kemudian simpan dengan nama data-produk.php di directory xampp/htdocs/latihan-chartjs.


Tampilan jika data-produk.php di jalankan. Pastikan services apache dan mysql  di xampp control panel dalam keadaan start.

Membuat grafik di php mysql

4. Download plugin chart.js. Chart.js.zip , Extrak hasil download menggunakan winrar atau winzip kemudian pindahkan folder chartjs ke directory xampp/htdocs/latihan-chartjs

Membuat grafik di php mysql


5. Untuk mengintegerasikan dengan plugin chartjs, panggil file js dan css nya. Ada dua  tipe file js yaitu chart.js dan Chart.bundle.js. Untuk versi bundle sudah include dengan moment.js. Sertakan juga jquery.js untuk menggunakan fungsi getJSON, karena kita akan merequest data file data-produk.php dengan fungsi getJSON.




6. Tambahkan tag canvas untuk menampilkan grafik di body html.


7 Buat fungsi dengan javascript untuk request data-produk.php dengan getJSON.


8. Untuk integerasi data json dengan plugin chartjs seperti dibawah ini.


9. Kode lengkapnya seperti ini, simpan file dengan nama index.php.




 maribelajarcoding.com
 
    
 


Membuat Grafik dengan Chart.js PHP dan MySQL

maribelajarcoding.com

Untuk menjalankan program, pastikan services apache dan mysql pada xampp control panel dalam keadaan start serta gunakan koneksi internet karena file jquery.js langsung di panggil menggunakan CDN.

Membuat grafik di php mysql


Kita juga bisa mengganti tipe grafiknya dengan mengubah variabel type, contoh jika kita akan menampilkan grafik tipe pie.

Membuat grafik di php mysql


Tutorial membuat grafik dengan chartjs PHP dan Mysql sampai disini. Sekian semoga bermanfaat.

Baca juga Membuat grafik grouping dengan chartjs



Related search:
Membuat grafik dengan PHP dan MySQL
Membuat chart dengan PHP dan MySQL