Skip to content

aa.gusti / eis

Go to a project
Commit b6890e26 by Ari Agung Prasetiyo
Options

update chart komposisi penerimaan

1 parent 18bed364
Inline Side-by-side
Showing 1 changed file with 63 additions and 14 deletions
eispajak/views/templates/pcpd_pajak.pt
...@@ -83,16 +83,16 @@ ...@@ -83,16 +83,16 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-8"> <div class="col-md-6">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-body"> <div class="panel-body">
<table class="table table-bordered table-sm" id="table1"> <table class="table table-bordered table-sm" id="table1">
<thead> <thead>
<tr> <tr>
<th class="align-middle text-center">Kode</th> <th style="vertical-align: middle;text-align:center !important;" class="align-middle text-center">No.</th>
<th class="align-middle text-center">Jenis Pajak</th> <th style="vertical-align: middle;text-align:center !important;" class="align-middle text-center">Jenis Pajak</th>
<th class="text-center">Besaran Komposisi <br>Dalam Penerimaan <br>Pajak Daerah (%)</th> <th style="vertical-align: middle;text-align:center !important;" class="text-center">Besaran Komposisi <br>Dalam Penerimaan <br>Pajak Daerah (%)</th>
<th class="text-center">Realisasi</th> <th style="vertical-align: middle;text-align:center !important;" class="text-center">Realisasi</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -113,11 +113,11 @@ ...@@ -113,11 +113,11 @@
</div> </div>
</div> </div>
<!-- Gauge Chart Section --> <!-- Gauge Chart Section -->
<div class="col-md-4"> <div class="col-md-6">
<div class="panel panel-default" id="gaugePanel" style="min-height: 500px;"> <div class="panel panel-default" id="gaugePanel" style="min-height: 500px;">
<div class="panel-body" style="padding: 0; height: calc(100% - 50px); overflow: hidden; display: flex; flex-direction: column;"> <div class="panel-body">
<div id="chartContainer" style="flex: 1; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0;"> <div>
<canvas id="chartPie"></canvas> <div id="chartContainer" style="height: 300px; width: 100%;"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -126,6 +126,11 @@ ...@@ -126,6 +126,11 @@
<hr> <hr>
<div class="row hide"> <div class="row hide">
<div class="panel-body" style="padding: 0; height: calc(100% - 50px); overflow: hidden; display: flex; flex-direction: column;">
<div id="chartContainer" style="flex: 1; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0;">
<canvas id="chartPie"></canvas>
</div>
</div>
<div class="text-center" style="padding: 10px; background: rgba(0,0,0,0.02); border-top: 1px solid #ddd;"> <div class="text-center" style="padding: 10px; background: rgba(0,0,0,0.02); border-top: 1px solid #ddd;">
<h4 id="gaugePercentage" style="margin: 2px 0; font-weight: bold; color: #333; font-size: 16px;">63.70%</h4> <h4 id="gaugePercentage" style="margin: 2px 0; font-weight: bold; color: #333; font-size: 16px;">63.70%</h4>
</div> </div>
...@@ -212,6 +217,7 @@ ...@@ -212,6 +217,7 @@
<script src="${home}/eis/static/js/odometer.js"></script> <script src="${home}/eis/static/js/odometer.js"></script>
<script src="${home}/static/v3/plugin/datatables/1.10/media/js/jquery.dataTables.min.js"></script> <script src="${home}/static/v3/plugin/datatables/1.10/media/js/jquery.dataTables.min.js"></script>
<script src="${home}/static/v3/plugin/datatables/1.10/media/js/jquery.dataTables.ext.js"></script> <script src="${home}/static/v3/plugin/datatables/1.10/media/js/jquery.dataTables.ext.js"></script>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</metal:js> </metal:js>
...@@ -537,6 +543,15 @@ ...@@ -537,6 +543,15 @@
chart.update(); chart.update();
} }
function addDataPie(chart, data) {
chart.options.data[0].dataPoints = [];
chart.render();
data.forEach(element => {
chart.options.data[0].dataPoints.push({ y: element[1], name: element[0], exploded: true });
});
chart.render();
}
trendChart = function () { trendChart = function () {
if (rangeType.value == 1) { if (rangeType.value == 1) {
amtTrendChartData = newData.daily; amtTrendChartData = newData.daily;
...@@ -593,10 +608,10 @@ ...@@ -593,10 +608,10 @@
"scrollX": true, "scrollX": true,
"ordering":false, "ordering":false,
"columnDefs": [ "columnDefs": [
{ className: 'text-center', width: "20px", targets: [0] }, { className: 'text-center', width: "2px", targets: [0] },
{ className: 'text-left', targets: [1] }, { className: 'text-left',width: "20px", targets: [1] },
{ className: 'text-right', targets: [2] }, { className: 'text-right', width: "80px", targets: [2] },
{ className: 'text-right', targets: [3], render: $.fn.dataTable.render.number('.', ',', 0, '') }, { className: 'text-right', width: "20px", targets: [3], render: $.fn.dataTable.render.number('.', ',', 0, '') },
] ]
} }
); );
...@@ -620,10 +635,11 @@ ...@@ -620,10 +635,11 @@
sum_persen += row.persen; sum_persen += row.persen;
}); });
var c = []; var c = [];
var d = 0;
data.forEach(function (row) { data.forEach(function (row) {
sum_besaran += (row.realisasi/sum_realisasi)*100; sum_besaran += (row.realisasi/sum_realisasi)*100;
table.row.add([ table.row.add([
row.kode, d+=1,
row.nama, row.nama,
((row.realisasi/sum_realisasi)*100).toFixed(2), ((row.realisasi/sum_realisasi)*100).toFixed(2),
row.realisasi, row.realisasi,
...@@ -701,6 +717,7 @@ ...@@ -701,6 +717,7 @@
if (status === "success") { if (status === "success") {
newData = data; newData = data;
addData(pieChart, newData.pie); addData(pieChart, newData.pie);
addDataPie(chartPieW, newData.pie);
setTimeout(function () { setTimeout(function () {
console.log("timeout"); console.log("timeout");
...@@ -721,7 +738,39 @@ ...@@ -721,7 +738,39 @@
$().datarefresh(); $().datarefresh();
}, 60000); }, 60000);
}); });
var chartPieW = new CanvasJS.Chart("chartContainer", {
exportEnabled: true,
animationEnabled: true,
title:{
text: ""
},
legend:{
cursor: "pointer",
itemclick: explodePie
},
data: [{
type: "pie",
showInLegend: false,
toolTipContent: "{name}: <strong>{y}%</strong>",
indexLabel: "{name} - {y}%",
dataPoints: [
{ y: 100, name: "ALL Pajak", exploded: true },
]
}]
});
chartPieW.render();
} }
function explodePie (e) {
if(typeof (e.dataSeries.dataPoints[e.dataPointIndex].exploded) === "undefined" || !e.dataSeries.dataPoints[e.dataPointIndex].exploded) {
e.dataSeries.dataPoints[e.dataPointIndex].exploded = true;
} else {
e.dataSeries.dataPoints[e.dataPointIndex].exploded = false;
}
e.chart.render();
}
</script> </script>
</html> </html>
\ No newline at end of file \ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!