Cara Membuat Chart Morris.js Dengan PHP & Mysql

06/03/2019    Shelli Ripati    64     Website

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.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More