Cara Membuat Chart Menggunakan Morris

Banyak cara untuk membuat chart, salah satunya adalah menggunakan morris. Berikut saya contohkan cara membuatnya:

1. Download pluginnya disini!
2. Buat view, dan buat seperti ini:

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


<div id="chart_rencana"></div>


<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>

</div>

<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>

<script type="text/javascript">
Morris.Donut({
element: 'chart_rencana',
colors: ['#31C0BE', '#D58665', '#37619d'],
data: [{
label: "Pendapatan",
value: 55
}, {
label: "Belanja Langsung",
value: 30
}, {
label: "Belanja Tidak Langsung",
value: 15
}],
resize: true,
}).on('click', function (i, row) {
if (i == 1) {
window.location.href = 'urlnya1';
} else if (i == 2) {
window.location.href = 'urlnya2';
} else {
//kalau pakai modal bootstrap
$('#myModal').modal({show: true});
}
});

</script>

3. Selesai

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.