engineN/app/Views/rapor/wpbayar.php

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