Membuat Grafik Menggunakan CanvasJs

Grafik digunakan untuk menampilkan ringkasan dari sekumpulan data, biasanya sering kita temui di dalam aplikasi excel, word dll. Untuk menampilkan data di sebuah halaman website bisa digunakan sebuah plugin jquery, salah satunya adalah canvasJs.

Beberapa waktu sebelumnya telah kita buat sebuah aplikasi pemetaan dengan nama Simple Gis yang didalamnya terdapat data jalan dan juga data jembatan yang akan kita tampilkan grafiknya ke halaman depan dari aplikasi tersebut.

Sebelumnya download canvasJs, exstract dan copy paste file canvasjs.min.js ke dalam folder assets/js.

Bagi yang sudah membuat aplikasi Simple Gis silahkan buka dan edit file view/homepage.php dengan menambahkan script pada bagian bawah dari “<h1 class=”text-center”>Simple Gis</h1>” seperti berikut :

          <div class="row">
              <div class="col-md-12 col-sm-12" id="grafik" style="height: 300px; width: 100%;">

              </div>
          </div>
          <div class="row">
              <div class="col-md-6 col-sm-6">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h3 class="panel-title"><span class="glyphicon glyphicon-list"></span> Data Jalan</h3>
                    </div>
                    <div class="panel-body">
                        <table class="table table-striped">
                          <th>No</th>
                          <th>Nama Jalan</th>
                          <th></th>
                          <tbody id="datajalan">
                              <?php
                              $no = 1;
                              foreach($itemjalan->result() as $jalan){
                                  ?>
                                  <tr>
                                      <td><?php echo $no;?></td>
                                      <td><?php echo $jalan->namajalan;?></td>
                                      <td></td>
                                  </tr>
                                  <?php
                                  $no++;
                              }
                              ?>
                          </tbody>
                        </table>
                    </div>
                  </div>
              </div>
              <div class="col-md-6 col-sm-6">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h3 class="panel-title"><span class="glyphicon glyphicon-list"></span> Data Jembatan</h3>
                    </div>
                    <div class="panel-body">
                        <table class="table table-striped">
                          <th>No</th>
                          <th>Nama Jalan</th>
                          <th></th>
                          <tbody id="datajembatan">
                              <?php
                              $no = 1;
                              foreach($itemjembatan->result() as $jembatan){
                                  ?>
                                  <tr>
                                      <td><?php echo $no;?></td>
                                      <td><?php echo $jembatan->namajembatan;?></td>
                                      <td></td>
                                  </tr>
                                  <?php
                                  $no++;
                              }
                              ?>
                          </tbody>
                        </table>
                    </div>
                  </div>
                  <button type="button" name="loadgrafik" class="btn btn-primary" id="loadgrafik"><span class="glyphicon glyphicon-refresh"></span> Grafik</button>
              </div>
          </div>

Biar tidak terjadi error edit juga file Home.php di folder controller.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Home extends CI_Controller{

    public function __construct(){
        parent::__construct();
        //Codeigniter : Write Less Do More
        $this->load->model(array('model_jalan',
        'model_jembatan'));
        $this->load->helper('url');
    }

    function index(){
        $data = array('itemjalan' => $this->model_jalan->getAll(),
        'itemjembatan'=>$this->model_jembatan->getAll());
        $this->load->view('homepage',$data);
    }

}

Kemudian buka dengan mengakses http://localhost/simplegis sehingga tampak 2 buah tabel jalan dan jembatan.

homepage simplegis
homepage simple gis menampilkan data jalan dan jembatan

Untuk menampilkan grafik dari data di database kita akan menambahkan sebuah function loadgrafik dan function buatgrafik sehingga keseluruhan file homepage menjadi seperti berikut ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Simple Gis</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="<?php echo base_url('assets/js/canvasjs.min.js')?>"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
      <div class="container">
          <h1 class="text-center">Simple Gis</h1>
          <div class="row">
              <div class="col-md-12 col-sm-12" id="grafik" style="height: 300px; width: 100%;">

              </div>
          </div>
          <div class="row">
              <div class="col-md-6 col-sm-6">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h3 class="panel-title"><span class="glyphicon glyphicon-list"></span> Data Jalan</h3>
                    </div>
                    <div class="panel-body">
                        <table class="table table-striped">
                          <th>No</th>
                          <th>Nama Jalan</th>
                          <th></th>
                          <tbody id="datajalan">
                              <?php
                              $no = 1;
                              foreach($itemjalan->result() as $jalan){
                                  ?>
                                  <tr>
                                      <td><?php echo $no;?></td>
                                      <td><?php echo $jalan->namajalan;?></td>
                                      <td></td>
                                  </tr>
                                  <?php
                                  $no++;
                              }
                              ?>
                          </tbody>
                        </table>
                    </div>
                  </div>
              </div>
              <div class="col-md-6 col-sm-6">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h3 class="panel-title"><span class="glyphicon glyphicon-list"></span> Data Jembatan</h3>
                    </div>
                    <div class="panel-body">
                        <table class="table table-striped">
                          <th>No</th>
                          <th>Nama Jalan</th>
                          <th></th>
                          <tbody id="datajembatan">
                              <?php
                              $no = 1;
                              foreach($itemjembatan->result() as $jembatan){
                                  ?>
                                  <tr>
                                      <td><?php echo $no;?></td>
                                      <td><?php echo $jembatan->namajembatan;?></td>
                                      <td></td>
                                  </tr>
                                  <?php
                                  $no++;
                              }
                              ?>
                          </tbody>
                        </table>
                    </div>
                  </div>
                  <button type="button" name="loadgrafik" class="btn btn-primary" id="loadgrafik"><span class="glyphicon glyphicon-refresh"></span> Grafik</button>
              </div>
          </div>
      </div>
      <script>
      $(document).on('click','#loadgrafik',loadgrafik);
      function loadgrafik(){
          /*var jalan = '';
          var jembatan = '';
          buatgrafik(jalan,jembatan);*/
          $.ajax({
              url : '<?php echo site_url("home/loaddata");?>',
              dataType : 'json',
              type : 'POST',
              success : function(data,status){
                  if (data.status!='error') {
                      buatgrafik(data.jalan,data.jembatan);
                  }else{
                      buatgrafik(data.jalan,data.jembatan);
                  }
              },
              error : function(x,t,m){
                  alert(x.responseText);
              }
          })
      }
      function buatgrafik(jalan,jembatan){
          var chart = new CanvasJS.Chart("grafik",
          {
            title:{
              text: "Data Jalan dan Jembatan"
            },
            animationEnabled: true,
            axisY: {
              title: "Jumlah Jalan dan Jembatan"
            },
            legend: {
              verticalAlign: "bottom",
              horizontalAlign: "center"
            },
            theme: "theme2",
            data: [

            {
              type: "column",
              showInLegend: true,
              legendMarkerColor: "grey",
              //legendText: "MMbbl = one million barrels",
              dataPoints: [
              {y: jalan,  label: "Jalan"},
              {y: jembatan,  label: "Jembatan"}
              ]
            }
            ]
          });

          chart.render();
      }
      </script>
  </body>
</html>

Dan juga untuk file controller Home.php tambahkan satu function yaitu function loaddata().

function loaddata(){
    if (!$this->input->is_ajax_request()) {
        show_404();
    }else{
        $status = 'success';
        $jalan = $this->model_jalan->getAll()->num_rows();
        $jembatan = $this->model_jembatan->getAll()->num_rows();
        $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'jalan'=>$jalan,'jembatan'=>$jembatan)));
    }
}

Hasil akhirnya akan tampak seperti berikut ini.

tampilan grafik simplegis
Tampilan grafik simplegis,

Terima kasih telah ikut mencoba membuat. 😀

1 thought on “Membuat Grafik Menggunakan CanvasJs

  1. Pingback: Membuat sistem login menggunakan codeigniter ion auth - Fadlur Rohman

Tinggalkan Balasan

This site uses Akismet to reduce spam. Learn how your comment data is processed.