<style> #wpBayar { min-width: 600px; max-width:auto; height: 600px; margin: 0 auto; } </style> <?php $tahun2 = date('Y'); $rentang_tahun = range($tahun2, 2022); $dataraporkwl = "["; foreach ($raporbyr as $row) { $x = (($row->WPBYR/$row->JMLWP ?: 1)) *100; $y = (($row->WPBYRTERATUR/$row->JMLWP ?: 1)) *100; $dd = $row->KD_KANWIL; $z =1; $dataraporkwl = $dataraporkwl . "{x: " . $x . ", y:".$y.",z:".$z.", name : '" . $row->NAMA . "',kanwil : '".$row->NAMA."', drilldown: '".$dd."' },"; } $dataraporkwl = $dataraporkwl . "]"; ?> <div class="main-content"> <div class="container-fluid"> <div class="row"> <div class="col-sm-12 mb-2"> <form class="form-inline" action="<?php base_url('rapor/wpbyr') ?>" method="post"> <label class="my-1 mr-2">Tahun :</label> <select class="custom-select my-1 mr-sm-2" id="tahun" name="tahun"> <?php foreach ($rentang_tahun as $tahun) { if ($tahun == $tahunx) { $sel = "selected"; } else { $sel = ""; } echo "<option value=\"" . $tahun . "\" " . $sel . ">" . $tahun . "</option>"; } ?> </select> <label class="my-1 mr-2">s.d. Bulan :</label> <select class="custom-select my-1 mr-sm-2" id="bulan" name="bulan"> <?php foreach ($refbulan as $rowb) { if ($rowb->KODE == $bulanx) { $isSelected = ' selected="selected"'; } else { $isSelected = ''; } echo "<option value='" . $rowb->KODE . "'" . $isSelected . ">" . ucfirst(strtolower($rowb->NM_PANJANG)) . "</option>"; } ?> </select> <button type="submit" class="btn btn-primary my-1">Proses</button> </form> </div> </div> <div class="row clearfix"> <div class="col-md-12"> <div class="card"> <div class="card-header"> <h3 class="text-center">WP Bayar dan WP Bayar Rutin</h3> <div class="card-header-right"> <ul class="list-unstyled card-option"> <li><i class="ik ik-chevron-left action-toggle"></i></li> <li><i class="ik ik-minus minimize-card"></i></li> <li><i class="ik ik-x close-card"></i></li> </ul> </div> </div> <div class="card-body"> <div id="wpBayar" style="height:600px"></div> </div> </div> </div> </div> <div class="row clearfix"> <div class="col-md-12"> <div class="card"> <div class="card-header"> <h3 class="text-center">Data</h3> <div class="card-header-right"> <ul class="list-unstyled card-option"> <li><i class="ik ik-chevron-left action-toggle"></i></li> <li><i class="ik ik-minus minimize-card"></i></li> <li><i class="ik ik-x close-card"></i></li> </ul> </div> </div> <div class="card-body"> <table class="table table-hover"> <thead> <tr> <th class="text-center">No</th> <th class="text-center">Unit</th> <th class="text-center">Jumlah WP</th> <th class="text-center">WP Bayar <?=$tahunx?></th> <th class="text-center">WP Bayar <?=$tahunx -1?></th> <th class="text-center">WP Bayar Teratur<?=$tahunx?></th> <th class="text-center">WP Bayar Teratur<?=$tahunx -1?></th> </tr> </thead> <tbody> <?php $no = 1; foreach ($raporbyr as $row) {?> <tr> <td><?= $no ++?></td> <td><?= $row->KD_KANWIL?>-<?= $row->NAMA?></td> <td class="text-right"><?= number_format($row->JMLWP,0,',','.')?></td> <td class="text-right"><?= number_format($row->WPBYR,0,',','.')?></td> <td class="text-right"><?= number_format($row->WPBYRL,0,',','.')?></td> <td class="text-right"><?= number_format($row->WPBYRTERATUR,0,',','.')?></td> <td class="text-right"><?= number_format($row->WPBRYTERATURL,0,',','.')?></td> </tr> <?php } ?> </tbody> </table> </div> </div> </div> </div> </div> </div> <?php echo view('inc/js.php') ?> <script> Highcharts.chart('wpBayar', { chart: { type: 'bubble', plotBorderWidth: 1, zooming: { type: 'xy' } }, legend: { enabled: false }, title: { text: '' }, credits:{ enabled: false }, accessibility: { point: { valueDescriptionFormat: '{index}. {point.name}, WPbayar: {point.x}%, WPBayarT: {point.y}%, index: {point.z}%.' } }, xAxis: { gridLineWidth: 1, type: 'logarithmic', title: { text: 'WP Bayar Rutin' }, labels: { format: '{value:.2f}%' }, accessibility: { rangeDescription: 'Range: 0 to 100 %.' } }, yAxis: { startOnTick: false, endOnTick: false, type: 'logarithmic', title: { text: 'WP Bayar' }, labels: { format: '{value:.2f}%' }, maxPadding: 0.2, accessibility: { rangeDescription: 'Range: 0 to 100 persen.' }, }, tooltip: { useHTML: true, headerFormat: '<table>', pointFormat: '<tr><th colspan="2"><h5>{point.kanwil}</h5></th></tr>' + '<tr><th>WP Bayar:</th><td>{point.x:.2f}%</td></tr>' + '<tr><th>WP Bayar Rutin:</th><td>{point.y:.2f}%</td></tr>', footerFormat: '</table>', followPointer: true }, plotOptions: { bubble: { minSize: 5, maxSize: 15 }, series: { dataLabels: { enabled: true, format: '{point.name}', allowOverlap: true } } }, series: [{ data:<?php echo $dataraporkwl?>, colorByPoint: true }], drilldown: { breadcrumbs: { position: { align: 'right' } }, series: [{ name: 'Aceh', id: 'Aceh', data: [{ x: 65.5, y: 126.4, z: 1, name: 'KPP Pratama Banda Aceh', country: 'KPP Pratama Banda Aceh' }, { x: 65.4, y: 50.8, z: 1, name: 'Sumatera Utara II', country: 'Sumatera Utara II' }, { x: 63.4, y: 51.8, z: 1, name: 'Riau', country: 'Riau' }, { x: 64, y: 82.9, z: 1, name: 'Kep. Riau', country: 'Kep. Riau' } ] }] } }); </script>