<style> .highcharts-figure, .highcharts-data-table table { min-width: 320px; max-width: 800px; margin: 1em auto; } .highcharts-data-table table { font-family: Verdana, sans-serif; border-collapse: collapse; border: 1px solid #ebebeb; margin: 10px auto; text-align: center; width: 100%; max-width: 500px; } .highcharts-data-table caption { padding: 1em 0; font-size: 1.2em; color: #555; } .highcharts-data-table th { font-weight: 600; padding: 0.5em; } .highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption { padding: 0.5em; } .highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) { background: #f8f8f8; } .highcharts-data-table tr:hover { background: #f1f7ff; } </style> <?php $tahun2 = date('Y'); $rentang_tahun = range($tahun2, 2022); $hariini = date('d-m-y'); ?> <?php $tgt = 0; $pennow = 0; $penpast = 0; foreach ($penerimaan as $row) { $tgt += $row->TARGET; $pennow += $row->PENB; $penpast += $row->PENL; $capaian = ($pennow / $tgt) * 100; $growth = (($pennow - $penpast) / $penpast) * 100; $selisih = $pennow - $penpast; $carryover = $pennow - $tgt; } $jml_penerimaan = 0; $jml_penlalu = 0; $jml_penerimaantot = 0; $pentotlalu = 0; foreach ($pie_penerimaan as $_junk => $data) { $jml_penerimaan = $jml_penerimaan + $data->PENERIMAAN; $jml_penerimaantot = $data->PENERIMAAN_TOT; $pentotlalu = $data->PENERIMAAN_TOTL; $jml_penlalu = $jml_penlalu + $data->PENL; } $jml_penerimaan = $jml_penerimaantot - $jml_penerimaan; $jml_penlalu = $pentotlalu - $jml_penlalu; $gwpiepenl = (($jml_penerimaan - $jml_penlalu) / $jml_penlalu) * 100; $row = 0; $datanya_penerimaan = "["; foreach ($pie_penerimaan as $_junk => $data) { $gwpiepen = (($data->PENERIMAAN - $data->PENL) / $data->PENL) * 100; $datanya_penerimaan = $datanya_penerimaan . "{name :'" . $data->NM_PAJAK . "',y: " . $data->PENERIMAAN . " , gw:" . $gwpiepen . "}"; break; } foreach ($pie_penerimaan as $_junk => $data) { if ($row <> 0) { $gwpiepen = (($data->PENERIMAAN - $data->PENL) / $data->PENL) * 100; $datanya_penerimaan = $datanya_penerimaan . ",{name :'" . $data->NM_PAJAK . "',y: " . $data->PENERIMAAN . ", gw:" . $gwpiepen . "}"; } $row = $row + 1; } $datanya_penerimaan = $datanya_penerimaan . ",{name: 'Lainnya',y:" . $jml_penerimaan . ", gw: " . $gwpiepenl . "}]"; $datapaycomp = "["; foreach ($paycomp as $rowp) { $datapaycomp = $datapaycomp . "{name : 'Jmlbln : " . $rowp->JMLBULAN . "',y: " . $rowp->JUMLAHWP . "},"; } $datapaycomp = $datapaycomp . "]"; ?> <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('Kanwil/index') ?>" method="post"> <label class="my-1 mr-2">Kanwil :</label> <select class="custom-select my-1 mr-sm-2" id="kwl" name="kwl"> <? foreach ($selkwl as $row) { if ($row->KODE == $kwlx) { $sel = "selected"; } else { $sel = ""; } echo "<option value=\"" . $row->KODE . "\" " . $sel . ">" . $row->KODE . " - " . $row->NAMA . "</option>"; } ?> </select> <label class="my-1 mr-2">Tahun :</label> <select class="custom-select my-1 mr-sm-2" id="tahun" name="tahun"> <? 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-lg-3 col-md-6 col-sm-12"> <div class="widget"> <div class="widget-body"> <div class="d-flex justify-content-between align-items-center"> <div class="state"> <h6>Target Kanwil</h6> <h6><b><?= number_format($tgt, 0, ',', '.') ?></b></h6> </div> <div class="icon"> <i class="ik ik-award"></i> </div> </div> <small class="text-small mt-10 d-block">Capaian <?= number_format($capaian, 2) ?>%</small> </div> <div class="progress progress-sm"> <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="<?= number_format($capaian, 2) ?>" aria-valuemin="0" aria-valuemax="100" style="width: <?= number_format($capaian, 2) ?>%;"></div> </div> </div> </div> <div class="col-lg-3 col-md-6 col-sm-12"> <div class="widget"> <div class="widget-body"> <div class="d-flex justify-content-between align-items-center"> <div class="state"> <h6>Penerimaan sd <?= $tahunx ?></h6> <h6><b><?= number_format($pennow, 0, ',', '.') ?></b></h6> </div> <div class="icon"> <i class="ik ik-thumbs-up"></i> </div> </div> <small class="text-small mt-10 d-block">Growth <?= number_format($growth, 2) ?>%</small> </div> <div class="progress progress-sm"> <div class="progress-bar bg-success" role="progressbar" aria-valuenow="<?= number_format($growth, 2) ?>" aria-valuemin="0" aria-valuemax="100" style="width: <?= number_format($growth, 2) ?>%;"></div> </div> </div> </div> <div class="col-lg-3 col-md-6 col-sm-12"> <div class="widget"> <div class="widget-body"> <div class="d-flex justify-content-between align-items-center"> <div class="state"> <h6>Penerimaan <?= $tahunx - 1 ?></h6> <h6><b><?= number_format($penpast, 0, ',', '.') ?></b></h6> </div> <div class="icon"> <i class="ik ik-calendar"></i> </div> </div> <small class="text-small mt-10 d-block">Selisih <?= number_format($selisih, 0, ',', '.') ?></small> </div> <div class="progress progress-sm"> <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="<?= ($selisih / $penpast) * 100 ?>" aria-valuemin="0" aria-valuemax="100" style="width: <?= ($selisih / $penpast) * 100 ?>%;"></div> </div> </div> </div> <div class="col-lg-3 col-md-6 col-sm-12"> <div class="widget"> <div class="widget-body"> <div class="d-flex justify-content-between align-items-center"> <div class="state"> <h6>Delta</h6> <h6><b><?= number_format($carryover, 0, ',', '.') ?></b></h6> </div> <div class="icon"> <i class="ik ik-alert-triangle"></i> </div> </div> <small class="text-small mt-10 d-block">update <?= $updatex['UPD'] ?></small> </div> <div class="progress progress-sm"> <div class="progress-bar bg-info" role="progressbar" aria-valuenow="<?= idate('d') ?>" aria-valuemin="1" aria-valuemax="<?= date('t', strtotime($hariini)) ?>" style="width: <?= idate('d') / date('t', strtotime($hariini)) * 100 ?>%;"></div> </div> </div> </div> </div> <div class="row"> <div class="col-md-8"> <div class="card"> <div class="card-body"> <div class="row align-items-center"> <div class="col-lg-8 col-md-12"> <h3 class="card-title">Breakdown Penerimaan</h3> <?php $totwpskbyr = $wp_sk['WPSWP'] + $wp_sk['WPKWP']; $totwpskbyrl = $wp_sk['WPSWPL'] + $wp_sk['WPKWPL']; $wpsktbyrn = $wp_sk['WPSBYRN'] + $wp_sk['WPKBYRN']; $wpsktbyrl = $wp_sk['WPSBYRP'] + $wp_sk['WPKBYRP']; $totwpall = $wp_terdaftar['WPS'] + $wp_terdaftar['WPK']; ?> </div> <div class="col-lg-6 col-md-12"> <div class="col text-center"> <h5><ion-icon name="people"></ion-icon>Strategis</h5> </div> <div class="row mb-15"> <div class="col-8">Penerimaan</div> <div class="col-4 text-right"><?= number_format($wp_sk['WPSBYRN'], 0, ',', '.') ?></div> <div class="col-12"> <div class="progress progress-sm mt-5"> <div class="progress-bar-striped progress-bar-animated bg-green" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> <div class="row mb-15"> <div class="col-9">Growth</div> <div class="col-3 text-right"><?= number_format(($wp_sk['WPSBYRN'] - $wp_sk['WPSBYRP']) / $wp_sk['WPSBYRP'] * 100, 2) ?>%</div> <div class="col-12"> <div class="progress progress-sm mt-5"> <div class="progress-bar-striped progress-bar-animated bg-green" role="progressbar" style="width: <?= number_format(($wp_sk['WPSBYRN'] - $wp_sk['WPSBYRP']) / $wp_sk['WPSBYRP'] * 100, 2) ?>%" aria-valuenow="<?= number_format(($wp_sk['WPSBYRN'] - $wp_sk['WPSBYRP']) / $wp_sk['WPSBYRP'] * 100, 2) ?>" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> <div class="row mb-15"> <div class="col-9">Peranan</div> <div class="col-3 text-right"><?= number_format($wp_sk['WPSBYRN'] / $wpsktbyrn * 100, 2) ?>%</div> <div class="col-12"> <div class="progress progress-sm mt-5"> <div class="progress-bar-striped progress-bar-animated bg-green" role="progressbar" style="width: <?= number_format($wp_sk['WPSBYRN'] / $wpsktbyrn * 100, 2) ?>%" aria-valuenow="<?= number_format($wp_sk['WPSBYRN'] / $wpsktbyrn * 100, 2) ?>" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> <div class="row mb-15"> <div class="col-9">WP Terdaftar</div> <div class="col-3 text-right"><?= number_format($wp_terdaftar['WPS'], 0, ',', '.') ?></div> <div class="col-12"> <div class="progress progress-sm mt-5"> <div class="progress-bar-striped progress-bar-animated bg-green" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> <div class="row mb-15"> <div class="col-9">WP Bayar</div> <div class="col-3 text-right"><?= number_format($wp_sk['WPSWP'], 0, ',', '.') ?></div> <div class="col-12"> <div class="progress progress-sm mt-5"> <div class="progress-bar-striped progress-bar-animated bg-green" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> <div class="row mb-15"> <div class="col-9">Ratio(%)</div> <div class="col-3 text-right"><?= number_format($wp_sk['WPSWP'] / $wp_terdaftar['WPS'] * 100, 2) ?></div> <div class="col-12"> <div class="progress progress-sm mt-5"> <div class="progress-bar-striped progress-bar-animated bg-green" role="progressbar" style="width: <?= number_format($wp_sk['WPSWP'] / $wp_terdaftar['WPS'] * 100, 2) ?>%" aria-valuenow="<?= number_format(($wp_sk['WPSWP'] / $wp_terdaftar['WPS']) * 100, 2) ?>" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> </div> <div class=" col-lg-6 col-md-12"> <div class="col text-center"> <h5><ion-icon name="aperture"></ion-icon>Kewilayahan</h5> </div> <div class="row mb-15"> <div class="col-8">Penerimaan</div> <div class="col-4 text-right"><?= number_format($wp_sk['WPKBYRN'], 0, ',', '.') ?></div> <div class="col-12"> <div class="progress progress-sm mt-5"> <div class="progress-bar-striped progress-bar-animated bg-primary " role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> <div class="row mb-15"> <div class="col-9">Growth</div> <div class="col-3 text-right"><?= number_format(($wp_sk['WPKBYRN'] - $wp_sk['WPKBYRP']) / $wp_sk['WPKBYRP'] * 100, 2) ?>%</div> <div class="col-12"> <div class="progress progress-sm mt-5"> <div class="progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: <?= number_format(($wp_sk['WPKBYRN'] - $wp_sk['WPKBYRP']) / $wp_sk['WPKBYRP'] * 100, 2) ?>%" aria-valuenow="<?= number_format(($wp_sk['WPKBYRN'] - $wp_sk['WPKBYRP']) / $wp_sk['WPKBYRP'] * 100, 2) ?>" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> <div class="row mb-15"> <div class="col-9">Peranan</div> <div class="col-3 text-right"><?= number_format($wp_sk['WPKBYRN'] / $wpsktbyrn * 100, 2) ?>%</div> <div class="col-12"> <div class="progress progress-sm mt-5"> <div class="progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: <?= number_format($wp_sk['WPKBYRN'] / $wpsktbyrn * 100, 2) ?>%" aria-valuenow="<?= number_format($wp_sk['WPKBYRN'] / $wpsktbyrn * 100, 2) ?>" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> <div class="row mb-15"> <div class="col-9">WP Terdaftar</div> <div class="col-3 text-right"><?= number_format($wp_terdaftar['WPK'], 0, ',', '.') ?></div> <div class="col-12"> <div class="progress progress-sm mt-5"> <div class="progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> <div class="row mb-15"> <div class="col-9">WP Bayar</div> <div class="col-3 text-right"><?= number_format($wp_sk['WPKWP'], 0, ',', '.') ?></div> <div class="col-12"> <div class="progress progress-sm mt-5"> <div class="progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> <div class="row mb-15"> <div class="col-9">Ratio(%)</div> <div class="col-3 text-right"><?= number_format($wp_sk['WPKWP'] / $wp_terdaftar['WPK'] * 100, 2) ?>%</div> <div class="col-12"> <div class="progress progress-sm mt-5"> <div class="progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: <?= number_format($wp_sk['WPKWP'] / $wp_terdaftar['WPK'] * 100, 2) ?>%" aria-valuenow="<?= number_format($wp_sk['WPKWP'] / $wp_terdaftar['WPK'] * 100, 2) ?>" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="card" style="min-height: 422px;"> <div class="card-header"> <h3>Info Wajib Pajak</h3> </div> <div class="card-body"> <table class="table table-hover"> <thead> <tr> <th class="text-center">Tahun</th> <th class="text-center">WP Terdaftar</th> <th class="text-center">WP Bayar</th> <th class="text-center">Ratio (%)</th> </tr> </thead> <tbody> <tr> <td class="text-center"><?php echo $tahunx ?></td> <td class="text-center"><?= number_format($wpadm['WPADMNOW'], 0, ',', '.') ?></td> <td class="text-center"><?= number_format($totwpskbyr, 0, ',', '.') ?></td> <td class="text-center"> <?= number_format(($totwpskbyr / $totwpall) * 100, 2) ?></td> </tr> <tr> <td class="text-center"><?php echo $tahunx - 1 ?></td> <td class="text-center"><?= number_format($wpadm['WPADMPAST'], 0, ',', '.') ?></td> <td class="text-center"><?= number_format($totwpskbyrl, 0, ',', '.') ?></td> <td class="text-center"> <?= number_format(($totwpskbyrl / $wpadm['WPADMPAST']) * 100, 2) ?></td> </tr> <tr> <td class="text-center">Delta</td> <td class="text-center"><?= number_format(($wpadm['WPADMNOW'] - $wpadm['WPADMPAST']) / $wpadm['WPADMPAST'] * 100, 2) ?>%</td> <td class="text-center"><?= number_format(($totwpskbyr - $totwpskbyrl) / $totwpskbyrl * 100, 2) ?>%</td> <td class="text-center">-</td> </tr> </tbody> </table> <table class="table table-hover"> <thead> <tr> <th class="text-center">Tahun</th> <th class="text-center">WP Lapor</th> <th class="text-center"></th> <th class="text-center">Ratio (%)</th> </tr> </thead> <tbody> <tr> <td class="text-center"><?php echo $tahunx ?></td> <td class="text-center"><?= number_format($laporThn['LAPORNOW'], 0, ',', '.') ?></td> <td class="text-center"></td> <td class="text-center"><?= number_format(($laporThn['LAPORNOW'] / $wpadm['WPADMNOW']) * 100, 2) ?></td> </tr> <tr> <td class="text-center"><?php echo $tahunx - 1 ?></td> <td class="text-center"><?= number_format($laporThn['LAPORPAST'], 0, ',', '.') ?></td> <td class="text-center"></td> <td class="text-center"><?= number_format(($laporThn['LAPORPAST'] / $wpadm['WPADMPAST']) * 100, 2) ?></td> </tr> <tr> <td class="text-center">Delta</td> <td class="text-center"><?= number_format(($laporThn['LAPORNOW'] - $laporThn['LAPORPAST']) / $laporThn['LAPORPAST'] * 100, 2) ?>%</td> <td class="text-center"></td> <td class="text-center">-</td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="card"> <div class="card-header"> <h3>Payment Compliance <?= $tahunx ?></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="paycomp"></div> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-header"> <h3>PerJenis Pajak <?= $tahunx ?></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="preview_jenis_penerimaan"></div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-header"> <h3>Strength of Figure</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-sm"> <thead> <th class="text-center"><ion-icon name="pulse"></ion-icon> SOF</th> <th class="text-center"><ion-icon name="person"></ion-icon> WP</th> <th class="text-center"><ion-icon name="warning"></ion-icon> WP (%)</th> <th class="text-center"><ion-icon name="cash"></ion-icon> Jumlah</th> <th class="text-center"><ion-icon name="warning"></ion-icon> Jumlah (%)</th> </thead> <?php foreach ($parsesof as $row) { $wpbyrsof = $row->WPBYR; $totwpsof = $row->TOTWPBYR; $totjmlsof = $row->TOTALL; $pctwp = $row->WPBYR / $totwpsof * 100; $pctpen = $row->TOTAL / $totjmlsof * 100; if ($pctwp < 0) { $mpctwp = "text-danger"; $markmpctwp = "<ion-icon name='arrow-down-outline'></ion-icon>"; } else { $mpctwp = "text-success"; $markmpctwp = "<ion-icon name='arrow-up-outline'></ion-icon>"; } if ($pctpen < 0) { $mpctpen = "text-danger"; $markmpctpen = "<ion-icon name='arrow-down-outline'></ion-icon>"; } else { $mpctpen = "text-success"; $markmpctpen = "<ion-icon name='arrow-up-outline'></ion-icon>"; } ?> <tbody> <td><?= $row->LAPISAN; ?></td> <td class="text-right"><?= number_format($row->WPBYR, 0, ',', '.') ?></td> <td class="text-right <?= $mpctwp ?>"><?= number_format($pctwp, 2) ?> <?= $markmpctwp ?></td> <td class="text-right"><?= number_format($row->TOTAL, 0, ',', '.') ?></td> <td class="text-right <?= $mpctpen ?>"><?= number_format($pctpen, 2) ?> <?= $markmpctpen ?></td> </tbody> <?php } ?> <tfoot> <th>Total</th> <th class="text-right"><?= number_format($totwpsof, 0, ',', '.') ?></th> <th></th> <th class="text-right"><?= number_format($totjmlsof, 0, ',', '.') ?></th> </tfoot> </table> <small class="text-primary">*) Nilai Persentase dibawah 0% berwarna merah</small> </div> </div> </div> </div> <div class="card"> <div class="card-body"> <h5 class="card-title">PENERIMAAN PER KATEGORI <?= $tahunx ?></h5> <table class="table table-hover"> <thead class='thead-dark'> <tr class="table-active"> <th class="text-center">Kode</th> <th class="text-center">Kategori</th> <th class="text-center">Wp Bayar <?= $tahunx ?></th> <th class="text-center">Wp Bayar <?= $tahunx - 1 ?></th> <th class="text-center">gw WP Bayar (%)</th> <th class="text-center">Realisasi <?= $tahunx ?></th> <th class="text-center">Realisasi <?= $tahunx - 1 ?></th> <th class="text-center">gw Penerimaan (%)</th> </tr> </thead> <?php foreach ($perkategori as $row) { $gwwp = (($row->WPBYRN - $row->WPBYRP) / $row->WPBYRP) * 100; $gwkat = (($row->KPENN - $row->KPENP) / $row->KPENP) * 100; if ($gwwp < 0) { $markgww = "text-danger"; $markgwwic = "<ion-icon name='arrow-down-outline'></ion-icon>"; } else { $markgww = "text-success"; $markgwwic = "<ion-icon name='arrow-up-outline'></ion-icon>"; } if ($gwkat < 0) { $markgwk = "text-danger"; $markgwkic = "<ion-icon name='arrow-down-outline'></ion-icon>"; } else { $markgwk = "text-success"; $markgwkic = "<ion-icon name='arrow-up-outline'></ion-icon>"; } ?> <tbody> <td><?= $row->KODE ?></td> <td><?= $row->NMKAT ?></td> <td class="text-right"><?= number_format($row->WPBYRN, 0, ',', '.') ?></td> <td class="text-right"><?= number_format($row->WPBYRP, 0, ',', '.') ?></td> <td class="text-center <?= $markgww ?>"><?= number_format($gwwp, 2) ?> <?php echo $markgwwic ?></td> <td class="text-right"><?= number_format($row->KPENN, 0, ',', '.') ?></td> <td class="text-right"><?= number_format($row->KPENP, 0, ',', '.') ?></td> <td class="text-center <?= $markgwk ?>"><?= number_format($gwkat, 2) ?> <?php echo $markgwkic ?></td> </tbody> <?php } ?> </table> </div> </div> </div> </div> <?php echo view('inc/js.php') ?> <script> (function(H) { H.seriesTypes.pie.prototype.animate = function(init) { const series = this, chart = series.chart, points = series.points, { animation } = series.options, { startAngleRad } = series; function fanAnimate(point, startAngleRad) { const graphic = point.graphic, args = point.shapeArgs; if (graphic && args) { graphic // Set inital animation values .attr({ start: startAngleRad, end: startAngleRad, opacity: 1 }) // Animate to the final position .animate({ start: args.start, end: args.end }, { duration: animation.duration / points.length }, function() { // On complete, start animating the next point if (points[point.index + 1]) { fanAnimate(points[point.index + 1], args.end); } // On the last point, fade in the data labels, then // apply the inner size if (point.index === series.points.length - 1) { series.dataLabelsGroup.animate({ opacity: 1 }, void 0, function() { points.forEach(point => { point.opacity = 1; }); series.update({ enableMouseTracking: true }, false); chart.update({ plotOptions: { pie: { innerSize: '10%', borderRadius: 8 } } }); }); } }); } } if (init) { // Hide points on init points.forEach(point => { point.opacity = 0; }); } else { fanAnimate(points[0], startAngleRad); } }; }(Highcharts)); Highcharts.chart('preview_jenis_penerimaan', { chart: { type: 'pie' }, title: { text: '' }, subtitle: { text: '' }, tooltip: { pointFormat: 'Peranan: <b>{point.percentage:.1f}%</b> <br> Gw : {point.gw:.1f}%' }, accessibility: { point: { valueSuffix: '%' } }, plotOptions: { pie: { allowPointSelect: true, borderWidth: 2, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b><br>{point.percentage:.1f}%', distance: 20 } } }, credits: { enabled: false }, series: [{ // Disable mouse tracking on load, enable after custom animation enableMouseTracking: false, animation: { duration: 2000 }, colorByPoint: true, data: <?php echo $datanya_penerimaan ?> }] }); </script> <script> (function(H) { H.seriesTypes.pie.prototype.animate = function(init) { const series = this, chart = series.chart, points = series.points, { animation } = series.options, { startAngleRad } = series; function fanAnimate(point, startAngleRad) { const graphic = point.graphic, args = point.shapeArgs; if (graphic && args) { graphic // Set inital animation values .attr({ start: startAngleRad, end: startAngleRad, opacity: 1 }) // Animate to the final position .animate({ start: args.start, end: args.end }, { duration: animation.duration / points.length }, function() { // On complete, start animating the next point if (points[point.index + 1]) { fanAnimate(points[point.index + 1], args.end); } // On the last point, fade in the data labels, then // apply the inner size if (point.index === series.points.length - 1) { series.dataLabelsGroup.animate({ opacity: 1 }, void 0, function() { points.forEach(point => { point.opacity = 1; }); series.update({ enableMouseTracking: true }, false); chart.update({ plotOptions: { pie: { innerSize: '20%', borderRadius: 8 } } }); }); } }); } } if (init) { // Hide points on init points.forEach(point => { point.opacity = 0; }); } else { fanAnimate(points[0], startAngleRad); } }; }(Highcharts)); $(function() { Highcharts.setOptions({ lang: { thousandsSep: '.' } }); Highcharts.chart('paycomp', { chart: { type: 'pie' }, title: { text: '' }, subtitle: { text: '' }, tooltip: { pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b> <br> jmlWP : {point.y} ' }, accessibility: { point: { valueSuffix: '%' } }, plotOptions: { pie: { allowPointSelect: true, borderWidth: 2, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b><br>{point.percentage:.1f}% <br> WP : {point.y:,.0f} ', distance: 20 } } }, credits: { enabled: false }, series: [{ // Disable mouse tracking on load, enable after custom animation enableMouseTracking: false, animation: { duration: 2000 }, colorByPoint: true, data: <?php echo $datapaycomp ?> }] }); }); </script>