Cara Membuat Chart Morris.js Dengan PHP & Mysql

Chart adalah suatu gambar dengan grafik yang menampilkan sebuah data. Tampilan chart kita bisa membuatnya dengan bantuan morris.js dimana data yang akan kita tampilkan di ambil dari database mysql. Dan akan saya bahas pada artikel tentang Cara Membuat Chart Morris.js Dengan PHP & Mysql.

Langkah pertama Cara Membuat Chart Morris.js Dengan PHP & Mysql yaitu teman-teman bisa membuat datasbasenya terlebih dahulu dimana datanya sudah terisi teman-teman bisa salin scriptnya di bawah.

CREATE TABLE IF NOT EXISTS `sales` (

  `id` int(11) NOT NULL,

  `year` int(11) NOT NULL,

  `purchase` int(11) NOT NULL,

  `sale` int(11) NOT NULL,

  `profit` int(11) NOT NULL

) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=latin1;

 

ALTER TABLE `sales`
  ADD PRIMARY KEY (`id`);

 

INSERT INTO `account` (`id`, `year`, `purchase`, `sale`, `profit`) VALUES

(1, 2010, 550000, 800000 , 250000),

(2, 2011, 678000, 1065000, 387000),

(3, 2012, 787000, 1278500, 491500),

(4, 2013, 895600, 1456000, 560400),

(5, 2014, 1050000, 1675600, 625600),

(6, 2015, 1165850, 2001542, 835692),

(7, 2016, 1205600, 3095000, 1889400),

(8, 2017, 1465000, 3256500, 1791500),

(9, 2018, 2674500, 3530000, 855500),

(10, 2019, 3500000, 5000000, 1500000);

 

Jika sudah maka kita lanjutkan untuk membuat script php untuk menampilkan data dari database.

 

<?php

$connect = mysqli_connect("localhost", "dumet", "school", "test");

$query = "SELECT * FROM sales";

$result = mysqli_query($connect, $query);

 

$data = '';

while($row = mysqli_fetch_array($result)){

  $data .= "{ year:'".$row["year"]."',

            profit:".$row["profit"].",

            purchase:".$row["purchase"].",

            sale:".$row["sale"]."}, ";

}

$data = substr($data, 0, -2);

?>

 

Jika sudah selesai, selanjutnya kita buat script untuk mengirimkan data ke dalam morris seperti berikut ini.

<script>

Morris.Bar({

 element : 'chart',

 data:[<?php echo $data; ?>],

 xkey:'year',

 ykeys:['profit', 'purchase', 'sale'],

 labels:['Profit', 'Purchase', 'Sale'],

 hideHover:'auto',

 stacked:true

});

</script>

Dan terakhir kita buat struktur html untuk menampilkan data chart bar dari morris yang sudah kita buat.

<!DOCTYPE html>

<html>

 <head>

  <title>Cara Membuat Chart Morris.js Dengan PHP & Mysql</title>

  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

  <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

  <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

 </head>

 <body>

  <div class="container" style="width:900px;">

    <h2 align="center">Cara Membuat Chart Morris.js Dengan PHP & Mysql</h2>

    <div id="chart"></div>

  </div>

 </body>

</html>

Demikian artikel tentang Cara Membuat Chart .js Dengan PHP & Mysql. Semoga bermanfaat dan selamat mencoba.

6 Maret 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat