API tools faq
paste
Advertisement
DwikyAnggarda

View Chart

DwikyAnggarda
Nov 21st, 2019
368
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 5.60 KB | None | 0 0
raw download clone embed print report
  1. <!-- <html>
  2.  
  3. <head>
  4.     <title>Dynamic Column Chart in Codeigniter using Ajax</title>
  5.  
  6.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  9. </head>
  10.  
  11. <body> -->
  12. <style>
  13.     div#example1_filter {
  14.         float: right;
  15.     }
  16. </style>
  17. <section class="content container-fluid">
  18.     <div class="box">
  19.         <div class="box-header with-border">
  20.             <h3 class="box-title">Grafik Kegiatan Per Sekolah</h3>
  21.             <div class="box-tools pull-right">
  22.                 <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
  23.                     <i class="fa fa-minus"></i></button>
  24.             </div>
  25.         </div>
  26.         <div class="box-body">
  27.             <div style="margin-bottom: 20px;">
  28.                 <div class="panel panel-default">
  29.                     <div class="panel-heading">
  30.                         <div class="row">
  31.                             <div class="col-md-3">
  32.                                 <small class="text-muted">Nama Sekolah</small>
  33.                                 <select name="id_sekolah" id="id_sekolah" class="form-control">
  34.                                     <option value="">Select Id sekolah</option>
  35.                                     <?php
  36.                                     foreach ($id_sekolah->result_array() as $row) {
  37.                                         echo '<option name="' . $row["nama_sekolah"] . '" value="' . $row["id_sekolah"] . '">' . $row["nama_sekolah"] . '</option>';
  38.                                     }
  39.                                     ?>
  40.  
  41.                                 </select>
  42.                             </div>
  43.                             <div class="col-md-3">
  44.                                 <small class="text-muted">Tanggal Awal</small>
  45.                                 <input type="date" name="tgl_awal" id="tgl_awal" class="form-control">
  46.                             </div>
  47.                             <div class="col-md-3">
  48.                                 <small class="text-muted">Tanggal Akhir</small>
  49.                                 <input type="date" name="tgl_akhir" id="tgl_akhir" class="form-control">
  50.                             </div>
  51.                             <div class="col-md-3">
  52.                                 <small class="text-muted"><br></small>
  53.                                 <input type="submit" class="btn btn-primary" value="filter" name="filter" id="filter">
  54.                             </div>
  55.                         </div>
  56.                     </div>
  57.                     <div class="panel-body">
  58.                         <div id="chart_area" style="width: 1000px; height: 620px;"></div>
  59.                     </div>
  60.                 </div>
  61.             </div>
  62.         </div>
  63.     </div>
  64. </section>
  65. <!-- </body>
  66.  
  67. </html> -->
  68.  
  69. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  70. <script type="text/javascript">
  71.     google.charts.load('current', {
  72.         'packages': ['corechart', 'line']
  73.     });
  74.     google.charts.setOnLoadCallback();
  75.  
  76.     function load_monthwise_data(id_sekolah, tgl_awal, tgl_akhir, title) {
  77.         var temp_title = title + ' ' + id_sekolah + ' ' + tgl_awal + ' ' + tgl_akhir;
  78.         $.ajax({
  79.             url: "<?php echo base_url('grafik/fetch_data'); ?>",
  80.             method: "POST",
  81.             data: {
  82.                 id_sekolah: id_sekolah,
  83.                 tgl_awal: tgl_awal,
  84.                 tgl_akhir: tgl_akhir
  85.             },
  86.             dataType: "JSON",
  87.             success: function(data) {
  88.                 drawMonthwiseChart(data, temp_title);
  89.             }
  90.         });
  91.     }
  92.  
  93.     function drawMonthwiseChart(chart_data, chart_main_title) {
  94.         var jsonData = chart_data;
  95.         var data = new google.visualization.DataTable();
  96.         data.addColumn('string', 'Tgl Kegiatan');
  97.         data.addColumn('number', 'Nilai');
  98.  
  99.         $.each(jsonData, function(i, jsonData) {
  100.             var label = 1;
  101.             // rowCount = jsonData.id_sekolah.length - 1;
  102.             // for (var i = 1; i < jsonData.id_sekolah.length; i++) {
  103.             //     sumVal = label + parseInt(jsonData.nilai[i]);
  104.             // }(jsonData.nilai + jsonData.nilai) / (label += jsonData.id_sekolah - 1);
  105.             // hasil = parseInt(sumVal / rowCount);
  106.             var tgl_kegiatan = jsonData.tgl_kegiatan;
  107.             var nilai = jsonData.nilai;
  108.             data.addRows([
  109.                 [tgl_kegiatan, nilai]
  110.             ]);
  111.         });
  112.  
  113.         var options = {
  114.             title: chart_main_title,
  115.             hAxis: {
  116.                 title: "Tgl"
  117.             },
  118.             vAxis: {
  119.                 title: 'Nilai'
  120.             },
  121.             chartArea: {
  122.                 width: '80%',
  123.                 height: '85%'
  124.             }
  125.         }
  126.  
  127.         var chart = new google.visualization.LineChart(document.getElementById('chart_area'));
  128.  
  129.         chart.draw(data, options);
  130.     }
  131. </script>
  132.  
  133. <script type="text/javascript">
  134.     $(document).ready(function() {
  135.         $('#filter').click(function() {
  136.             var id_sekolah = $('#id_sekolah').val();
  137.             var tgl_awal = $('#tgl_awal').val();
  138.             var tgl_akhir = $('#tgl_akhir').val();
  139.             if (id_sekolah != '' & tgl_awal != '' & tgl_akhir != '') {
  140.                 load_monthwise_data(id_sekolah, tgl_awal, tgl_akhir);
  141.             }
  142.         });
  143.     });
  144. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!