<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
$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 = $penpast - $pennow;
$carryover = $tgt - $pennow;
}
$jml_penerimaan = 0;
foreach ($pie_penerimaan as $_junk => $data) {
$jml_penerimaan = $jml_penerimaan + $data->PENERIMAAN;
$jml_penerimaantot = $data->PENERIMAAN_TOT;
}
$jml_penerimaan = $jml_penerimaantot - $jml_penerimaan;
$row = 0;
$datanya_penerimaan = "[";
foreach ($pie_penerimaan as $_junk => $data) {
$datanya_penerimaan = $datanya_penerimaan . "{name :'" . $data->NM_PAJAK . "',y: " . $data->PENERIMAAN . "}";
break;
}
foreach ($pie_penerimaan as $_junk => $data) {
if ($row <> 0) {
$datanya_penerimaan = $datanya_penerimaan . ",{name :'" . $data->NM_PAJAK . "',y: " . $data->PENERIMAAN . "}";
}
$row = $row + 1;
}
$datanya_penerimaan = $datanya_penerimaan . ",{name: 'Lainnya',y:" . $jml_penerimaan . "}]";
$datapaycomp = "[";
foreach ($paycomp as $rowp) {
$datapaycomp = $datapaycomp . "{name : 'Jmlbln : " . $rowp->JMLBULAN . "',y: " . $rowp->JUMLAHWP . "},";
}
$datapaycomp = $datapaycomp . "]";
?>
<div class="main-content">
<div class="container-fluid">
<h3>Dashboard Nasional</h3>
<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 Nas</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="31" aria-valuemin="0" aria-valuemax="100" style="width: 31%;"></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>Carry Over</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="<?= date('n') ?>" aria-valuemin="0" aria-valuemax="12" style="width: <?= date('n') ?>%;"></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>
</div>
<div class="col-lg-6 col-md-12">
<div class="col text-center">
<h5>Strategis</h5>
</div>
<div class="row mb-15">
<div class="col-9">Penerimaan</div>
<div class="col-3 text-right">28%</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">28%</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">Peranan</div>
<div class="col-3 text-right">28%</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">Jumlah WP</div>
<div class="col-3 text-right">28%</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">28%</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">28%</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>
<div class=" col-lg-6 col-md-12">
<div class="col text-center">
<h5>Kewilayahan</h5>
</div>
<div class="row mb-15">
<div class="col-9">Penerimaan</div>
<div class="col-3 text-right">28%</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">28%</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">Peranan</div>
<div class="col-3 text-right">28%</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">Jumlah WP</div>
<div class="col-3 text-right">28%</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">28%</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">28%</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>
</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">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3>Payment Compliance</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</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">SOF</th>
<th class="text-center">WP</th>
<th class="text-center">WP %</th>
<th class="text-center">Jumlah</th>
<th class="text-center">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 < 20) {
$mpctwp = "text-danger";
} else {
$mpctwp = "text-success";
}
if ($pctpen < 20) {
$mpctpen = "text-danger";
} else {
$mpctpen = "text-success";
}
?>
<tbody>
<td><?= $row->LAPISAN; ?></td>
<td class="text-right"><?= number_format($row->WPBYR, 0, ',', '.') ?></td>
<td class="text-right <?= $mpctwp ?>"><?= number_format($pctwp, 2) ?></td>
<td class="text-right"><?= number_format($row->TOTAL, 0, ',', '.') ?></td>
<td class="text-right <?= $mpctpen ?>"><?= number_format($pctpen, 2) ?></td>
</tbody>
<?php } ?>
</table>
<small>*) Nilai Persentase dibawah 20% berwarna merah</small>
</div>
</div>
</div>
</div>
<!-- <div class="card">
<div class="card-header row">
<div class="col col-sm-3">
<div class="dropdown d-inline-block">
<a class="btn-icon checkbox-dropdown dropdown-toggle" href="#" id="moreDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
<div class="dropdown-menu" aria-labelledby="moreDropdown">
<a class="dropdown-item" id="checkbox_select_all" href="javascript:void(0);">Select All</a>
<a class="dropdown-item" id="checkbox_deselect_all" href="javascript:void(0);">Deselect All</a>
</div>
</div>
<div class="card-options d-inline-block">
<a href="#"><i class="ik ik-inbox"></i></a>
<a href="#"><i class="ik ik-plus"></i></a>
<a href="#"><i class="ik ik-rotate-cw"></i></a>
<div class="dropdown d-inline-block">
<a class="nav-link dropdown-toggle" href="#" id="moreDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="ik ik-more-horizontal"></i></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="moreDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">More Action</a>
</div>
</div>
</div>
</div>
<div class="col col-sm-6">
<div class="card-search with-adv-search dropdown">
<form action="">
<input type="text" class="form-control" placeholder="Search.." required>
<button type="submit" class="btn btn-icon"><i class="ik ik-search"></i></button>
<button type="button" id="adv_wrap_toggler" class="adv-btn ik ik-chevron-down dropdown-toggle" data-toggle="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="adv-search-wrap dropdown-menu dropdown-menu-right" aria-labelledby="adv_wrap_toggler">
<div class="form-group">
<input type="text" class="form-control" placeholder="Full Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email">
</div>
<button class="btn btn-theme">Search</button>
</div>
</form>
</div>
</div>
<div class="col col-sm-3">
<div class="card-options text-right">
<span class="mr-5">1 - 50 of 2,500</span>
<a href="#"><i class="ik ik-chevron-left"></i></a>
<a href="#"><i class="ik ik-chevron-right"></i></a>
</div>
</div>
</div>
<div class="card-body p-0">
<div class="list-item-wrap">
<div class="list-item">
<div class="item-inner">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="item_checkbox" name="item_checkbox" value="option1">
<span class="custom-control-label"> </span>
</label>
<div class="list-title"><a href="javascript:void(0)">Lorem Ipsum is simply dumm dummy text of the printing and typesetting industry.</a></div>
<div class="list-actions">
<a href="#"><i class="ik ik-eye"></i></a>
<a href="#"><i class="ik ik-inbox"></i></a>
<a href="#"><i class="ik ik-edit-2"></i></a>
<a href="#"><i class="ik ik-trash-2"></i></a>
</div>
</div>
<div class="qickview-wrap">
<div class="desc">
<p>Fusce suscipit turpis a dolor posuere ornare at a ante. Quisque nec libero facilisis, egestas tortor eget, mattis dui. Curabitur viverra laoreet ligula at hendrerit. Nullam sollicitudin maximus leo, vel pulvinar orci semper id. Donec vehicula tempus enim a facilisis. Proin dignissim porttitor sem, sed pulvinar tortor gravida vitae.</p>
</div>
</div>
</div>
<div class="list-item">
<div class="item-inner">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="item_checkbox" name="item_checkbox" value="option2">
<span class="custom-control-label"> </span>
</label>
<div class="list-title"><a href="javascript:void(0)">Aenean eu pharetra arcu, vitae elementum sem. Sed non ligula molestie, finibus lacus at, suscipit mi. Nunc luctus lacus vel felis blandit, eu finibus augue tincidunt.</a></div>
<div class="list-actions">
<a href="#"><i class="ik ik-eye"></i></a>
<a href="#"><i class="ik ik-inbox"></i></a>
<a href="#"><i class="ik ik-edit-2"></i></a>
<a href="#"><i class="ik ik-trash-2"></i></a>
</div>
</div>
<div class="qickview-wrap">
<div class="desc">
<p>Fusce suscipit turpis a dolor posuere ornare at a ante. Quisque nec libero facilisis, egestas tortor eget, mattis dui. Curabitur viverra laoreet ligula at hendrerit. Nullam sollicitudin maximus leo, vel pulvinar orci semper id. Donec vehicula tempus enim a facilisis. Proin dignissim porttitor sem, sed pulvinar tortor gravida vitae.</p>
</div>
</div>
</div>
<div class="list-item">
<div class="item-inner">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="item_checkbox" name="item_checkbox" value="option3">
<span class="custom-control-label"> </span>
</label>
<div class="list-title"><a href="javascript:void(0)">Donec lectus augue, suscipit in sodales sit amet, semper sit amet enim. Duis pretium, nisi id pretium ornare, tortor nibh sodales tellus.</a></div>
<div class="list-actions">
<a href="#"><i class="ik ik-eye"></i></a>
<a href="#"><i class="ik ik-inbox"></i></a>
<a href="#"><i class="ik ik-edit-2"></i></a>
<a href="#"><i class="ik ik-trash-2"></i></a>
</div>
</div>
<div class="qickview-wrap">
<div class="desc">
<p>Fusce suscipit turpis a dolor posuere ornare at a ante. Quisque nec libero facilisis, egestas tortor eget, mattis dui. Curabitur viverra laoreet ligula at hendrerit. Nullam sollicitudin maximus leo, vel pulvinar orci semper id. Donec vehicula tempus enim a facilisis. Proin dignissim porttitor sem, sed pulvinar tortor gravida vitae.</p>
</div>
</div>
</div>
</div>
</div>
</div> -->
<div class="card">
<div class="card-body">
<h5 class="card-title">PENERIMAAN PER KATEGORI</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";
} else {
$markgww = "text-success";
}
if ($gwkat < 0) {
$markgwk = "text-danger";
} else {
$markgwk = "text-success";
}
?>
<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) ?></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) ?></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>'
},
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));
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}%',
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>