Membuat Grafik Menggunakan CanvasJs

31 Dec, 2020 | Ditulis oleh : Fadlur Rohman

Rekomendasi Kelas
Membangun Toko Online Menggunakan Laravel

Laravel adalah salah framework php dengan pengguna terbanyak. Dengan banyaknya pengguna otomatis ketika kita menghadapi error akan lebih mudah menemukan solusin...

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.

 




Related Post :

Restful API Menggunakan Laravel Framework

31 Dec, 2020 - Fadlur Rohman

Laravel telah dilengkapi fitur untuk membuat backend API, diantaranya:...

Sistem registrasi menggunakan codeigniter ion auth

31 Dec, 2020 - Fadlur Rohman

Sistem login untuk aplikasi simplegis sudah kita buat sebelumnya, untu...

Membuat sistem login menggunakan codeigniter ion auth

31 Dec, 2020 - Fadlur Rohman

Pada aplikasi simple gis yang kita buat, pengguna dapat mengakses hala...

Membuat Grafik Menggunakan CanvasJs

31 Dec, 2020 - Fadlur Rohman

Grafik digunakan untuk menampilkan ringkasan dari sekumpulan data, bia...

Rest Web Service Codeigniter Bagian Keempat (API KEY)

31 Dec, 2020 - Fadlur Rohman

Setelah kita membuat&nbsp;database&nbsp;untuk menyimpan data hasil mon...

Rest Web Service Codeigniter Bagian Ketiga (Database)

31 Dec, 2020 - Fadlur Rohman

Bagian Pertama Bagian Kedua Pada bagian ini kita akan mensetting konek...

Mau Bikin Aplikasi Web & Aplikasi Android?

Saya membuka jasa pembuatan aplikasi web dan android untuk aplikasi seperti toko online, monitoring (IoT), interface mesin absensi atau kasir

Silahkan kontak link di bawah ini untuk teknis dan harganya