cara membuat grafik chart codeigniter 3 dengan morris js
Pada kesempatan ini saya akan berbagi bagaimana cara membuat grafik chart dengan menggunakan morris js yaitu merupakan sebuah library javascript untuk menampilkan grafik atau chart bisa berupa bar, step bar, line, pie dan lain-lain.
untuk membuat grafik maka di perlukan data bisa dari database or data yang bisa di custom sendiri.. dan di sini saya mengambil data dari database berupa kategori dan tahun serta peningkatan
disini saya mengguanakan table dengan menampilkan field tahun, profit serta purchase dan data harus dalam bentuk ordinal
data table berikut di sini saya menggukanan laragon dengan adminer :
Silahkan buat install dan buat konfigurasi codeIgniter, terlebih dahulu, untuk bagian controller sebagai berikut :
dan untuk tampilan view sebagai berikut :
Untuk mengganti tipe char pada bagian file js ubah bagian
terima kasih itulah sedikit cara menggukanan chart grafik dengan CodeIgniter 3, semoga bermanfaat
link download file sebagai berikut :
download
 |
| chart codeigniter morris js |
untuk membuat grafik maka di perlukan data bisa dari database or data yang bisa di custom sendiri.. dan di sini saya mengambil data dari database berupa kategori dan tahun serta peningkatan
disini saya mengguanakan table dengan menampilkan field tahun, profit serta purchase dan data harus dalam bentuk ordinal
data table berikut di sini saya menggukanan laragon dengan adminer :
 |
| data table laragon morris js |
<?php
class Chart extends CI_Controller{
function __construct(){
parent::__construct();
$this->load->model('chart_model');
}
function index(){
$da = $this->chart_model->tampil_data('account');
$x['car'] = json_encode($da);
$this->load->view('chart_view',$x);
}
}
dan untuk tampilan view sebagai berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chart using codeigniter and morris.js</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>
<h2 style="text-align:center">Chart using Codeigniter and Morris.js</h2>
<div id="graph"></div>
<p style="text-align:center">Tahun</p>
<script>
Morris.Bar({
element: 'graph',
barGap:4,
barSizeRatio:0.30,
preUnits:"%",
data: <?php echo $car;?>,
xkey: 'year',
ykeys: ['purchase','sale', 'profit'],
labels: ['Purchase','Sale','Profit'],
barColors:['#f00', '#efff00','#009aff'],
stacked:true
});
</script>
</body>
</html>
<script>
Morris.Line // untuk chart line
Morris.Pie // untuk Chart Pie
Morris.Bar({
element: 'graph', // elemnt id html yang di panggil
barGap:4,
barSizeRatio:0.30, // size width bar yang di tentukan
preUnits:"%", // menampilkan berdasarkan persantese y bar
data: <?php echo $car;?>, // data yang sudah di jadikan json
xkey: 'year', // data yang akan di tampilkan di bagian horisontal x
ykeys: ['purchase','sale', 'profit'], // data yang di tampilkan sesuikan nama field table database
labels: ['Purchase','Sale','Profit'], // Label nama yang akan di tampilkan
barColors:['#f00', '#efff00','#009aff'], /warna data bar yang di tampilkan
stacked:true
});
</script>
terima kasih itulah sedikit cara menggukanan chart grafik dengan CodeIgniter 3, semoga bermanfaat
link download file sebagai berikut :
download
This comment has been removed by a blog administrator.
ReplyDelete