November 2016 - Fadlur Rohman

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>

</div>

<h3 class="panel-title"><span class="glyphicon glyphicon-list"></span> Data Jalan</h3>

</div>

<th>Nama Jalan</th>

<?php

$no = 1;

foreach($itemjalan->result() as $jalan){

<tr>

<td><?php echo $jalan->namajalan;?></td>

</tr>

<?php

$no++;

}

</tbody>

</table>

</div>

<h3 class="panel-title"><span class="glyphicon glyphicon-list"></span> Data Jembatan</h3>

</div>

<th>Nama Jalan</th>

<?php

$no = 1;

foreach($itemjembatan->result() as $jembatan){

<tr>

<td><?php echo $jembatan->namajembatan;?></td>

</tr>

<?php

$no++;

}

</tbody>

</table>

</div>

<button type="button" name="loadgrafik" class="btn btn-primary" id="loadgrafik"><span class="glyphicon glyphicon-refresh"></span> Grafik</button>

</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);
    }

}

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

<!DOCTYPE html>

<head>

<title>Simple Gis</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<h1 class="text-center">Simple Gis</h1>

</div>

<h3 class="panel-title"><span class="glyphicon glyphicon-list"></span> Data Jalan</h3>

</div>

<th>Nama Jalan</th>

<?php

$no = 1;

foreach($itemjalan->result() as $jalan){

<tr>

<td><?php echo $jalan->namajalan;?></td>

</tr>

<?php

$no++;

}

</tbody>

</table>

</div>

<h3 class="panel-title"><span class="glyphicon glyphicon-list"></span> Data Jembatan</h3>

</div>

<th>Nama Jalan</th>

<?php

$no = 1;

foreach($itemjembatan->result() as $jembatan){

<tr>

<td><?php echo $jembatan->namajembatan;?></td>

</tr>

<?php

$no++;

}

</tbody>

</table>

</div>

<button type="button" name="loadgrafik" class="btn btn-primary" id="loadgrafik"><span class="glyphicon glyphicon-refresh"></span> Grafik</button>

</div>

$(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)));
    }
}

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.

Terima kasih telah ikut mencoba membuat. 😀

Bulan: November 2016

Sistem registrasi menggunakan codeigniter ion auth

Membuat sistem login menggunakan codeigniter ion auth

Membuat Grafik Menggunakan CanvasJs