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

<!--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">&times;</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.