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">
<!--Nanti chart akan tampil di dalam tag ini-->
<div id="chart_rencana"></div>
<!-- Modal -->
<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.
EmoticonEmoticon