Pada Postingan kali ini Saya ingin berbagi tutorial cara membuat grafik dengan tipe line chart menggunakan moris Js.mungkin sobat pernah melihat beberapa situs menampilkan sebuah grafik seperti contoh nya website desa yang menampilkan jumlah penduduk nya dalam bentuk grafik ataupun website website penjualan yang memperlihatkan hasil penjualan nya berdasarkan kurun waktu tertentu
Line chart meyrupakan tipe grafik yang tepat dalam menampilkan data dalam kurun waktu terytentu atau dalam interval atau range yang sama. Line chart ini saya terapkan pada website Laundry yang saya buat untuk menghitung hasil pendapatan perbulan untuk Scren Schot nya bisa anda lihat seperti gambar di bawah :
Donlod file moris js di sini
Langsung saja pertama anda buat dulu database dengan name nhgroup terus buat table seperti ini
CREATE TABLE IF NOT EXISTS `cucianpelanggan` (
`id` int(30) NOT NULL AUTO_INCREMENT,
`idpelanggan` int(30) NOT NULL,
`hargatotal` varchar(30) DEFAULT NULL,
`status` varchar(35) DEFAULT NULL,
`tgl_masuk` date NOT NULL,
`tgl_kembali` year(4) DEFAULT NULL,
`status_cucian` varchar(15) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=37 ;
terus buat file index.php copi code di bawah
<script src="jquery.min.js"></script>
<script src="raphael.min.js"></script>
<script src="morris.min.js"></script>
<link href="morris.css" rel="stylesheet" type="text/css" />
<!—buat code Javascript -->
<script>
function realisasi(){
$("#response").hide(); //sebagai div response
$.ajax({
url: "data.php", //ambil data dari data.php
cache: false, //data ga di simpan ke browser
type: "GET", //tipe sinkron GET
dataType: "json", //data tipe nya sebagai json
timeout:3000, //set 3 detik respon, jika lama berarti gagal
beforeSend: function() {
$("#response").show(); // munculkan image loading
$('#response').html("<img src='ajax-loader.gif' />");
},
success : function (data) {
$("#response").hide(); //image loading dimatikan :(
var graph = Morris.Line({ //inisialkan graph sebagai morris chart area
element: 'contoh-chart', //masukin chart nya nanti di div id=contoh-chart
data: data, //set data dari callback success function
xkey: 'y', //ini yang tadi sebagai data x (bawah)
ykeys: ['jumlah'], //datanya berupa jumlah penjualan tadi, json data
labels: ['Penjualan'], //Label data dibikin Penjualan
lineColors: ['#2b44d2'], //bikin warna line nya
});
}
});
}
$(document).ready(function()
{
realisasi(); // nanti dipanggil di sini
});
</script>
<div class="row">
<div class="box-header">
<h3 class="box-title"></h3>
</div>
<div class="box-body chart-responsive">
<div id="response"></div>
<div class="chart" id="contoh-chart" style="height: 300px;"></div>
</div>
</div>
Buat file data.php copi kode di bawah
<?php
$host = "localhost";
$user = "root";
$pass = "";
$name = "nhgroup";
$db=mysqli_connect($host,$user,$pass,$name) or die (mysqli_error());
//ambil data bulan dan tahun
$sql="Select SUM(hargatotal) as m, date_format(tgl_masuk,'%Y-%m')as d from cucianpelanggan GROUP BY date_format(tgl_masuk,'%Y %m')";
$rs = mysqli_query($db,$sql);
//jalankan query
//bikin variabel sebagai array untuk menampung data nantinya
$data=array();
//loping sebagai object, bisa pake fetch_array $row['field']
while ($row = mysqli_fetch_object($rs)) {
$data[]=array(
'y'=>$row->d, //y sebagai kata kunci nya (tahun)
'jumlah'=>$row->m, //jumlah penjualan
);
}
//outputkan sebagai json
echo json_encode($data);
?>
Sekian tutorial kali ini semoga bermanpaat (
0 Komentar