Skip to content

aa.gusti / eis

Go to a project
Commit 5d82d597 by Eka Vivia Rizkiani (Solo)
Options

pembaruan datatables untuk gauge

1 parent 99103f9a
Inline Side-by-side
Showing 1 changed file with 20 additions and 26 deletions
eispajak/views/templates/realtime_realisasi.pt
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
<table class="table table-bordered table-sm" id="table1"> <table class="table table-bordered table-sm" id="table1">
<thead> <thead>
<tr> <tr>
<th rowspan="2" style="vertical-align: middle;text-align:center !important;">Kode</th> <th rowspan="2" style="vertical-align: middle;text-align:center !important;">No.</th>
<th rowspan="2" style="vertical-align: middle;text-align:center !important;">Uraian</th> <th rowspan="2" style="vertical-align: middle;text-align:center !important;">Uraian</th>
<th rowspan="2" style="vertical-align: middle;text-align:center !important;">Target</th> <th rowspan="2" style="vertical-align: middle;text-align:center !important;">Target</th>
<th colspan="2" style="vertical-align: middle;text-align:center !important;">Realisasi Hari Ini</th> <th colspan="2" style="vertical-align: middle;text-align:center !important;">Realisasi Hari Ini</th>
...@@ -237,7 +237,6 @@ ...@@ -237,7 +237,6 @@
</div> </div>
</div> </div>
<metal:js fill-slot="js_files"> <metal:js fill-slot="js_files">
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> -->
<script src="${home}/eis/static/js/fusioncharts.js"></script> <script src="${home}/eis/static/js/fusioncharts.js"></script>
<script src="${home}/eis/static/js/fusioncharts.widgets.js"></script> <script src="${home}/eis/static/js/fusioncharts.widgets.js"></script>
<script src="${home}/eis/static/js/fusioncharts.theme.candy.js"></script> <script src="${home}/eis/static/js/fusioncharts.theme.candy.js"></script>
...@@ -280,8 +279,8 @@ ...@@ -280,8 +279,8 @@
datasets: [{ datasets: [{
data: [300, 100], data: [300, 100],
backgroundColor: [ backgroundColor: [
'#16a75c', //'rgb(255, 99, 132)', '#16a75c',
'#ffb900', // 'rgb(54, 162, 235)' '#ffb900',
], ],
hoverOffset: 4 hoverOffset: 4
...@@ -313,7 +312,7 @@ ...@@ -313,7 +312,7 @@
datasets: [{ datasets: [{
label: 'Tren Realiasi', label: 'Tren Realiasi',
data: [100, 50, 300, 250, 100, 150, 2000], data: [100, 50, 300, 250, 100, 150, 2000],
borderColor: '#16a75c',// 'rgb(75, 192, 192)', borderColor: '#16a75c',
backgroundColor: '#16a75c8a', backgroundColor: '#16a75c8a',
fill: true, fill: true,
tension: 0.5 tension: 0.5
...@@ -341,7 +340,7 @@ ...@@ -341,7 +340,7 @@
datasets: [{ datasets: [{
label: 'Tren Transaksi', label: 'Tren Transaksi',
data: [100, 50, 300, 250, 100, 150, 2000], data: [100, 50, 300, 250, 100, 150, 2000],
borderColor: '#16a75c',// 'rgb(75, 192, 192)', borderColor: '#16a75c',
backgroundColor: '#16a75c8a', backgroundColor: '#16a75c8a',
fill: true, fill: true,
tension: 0.5 tension: 0.5
...@@ -370,7 +369,7 @@ ...@@ -370,7 +369,7 @@
datasets: [{ datasets: [{
label: 'Tren Kumulatif', label: 'Tren Kumulatif',
data: [100, 150, 400, 650, 900, 950, 1100], data: [100, 150, 400, 650, 900, 950, 1100],
borderColor: '#ffb900', //'rgb(75, 192, 192)', borderColor: '#ffb900',
backgroundColor: '#debd68ad', backgroundColor: '#debd68ad',
fill: true, fill: true,
tension: 0.5 tension: 0.5
...@@ -403,7 +402,6 @@ ...@@ -403,7 +402,6 @@
trendChart(); trendChart();
}); });
// Initialize Gauge Chart
setTimeout(function() { setTimeout(function() {
initializeGauge(); initializeGauge();
setTimeout(function() { setTimeout(function() {
...@@ -414,7 +412,6 @@ ...@@ -414,7 +412,6 @@
$().datarefresh(); $().datarefresh();
}); });
// Function to initialize FusionCharts Gauge
function initializeGauge() { function initializeGauge() {
const dataSource = { const dataSource = {
chart: { chart: {
...@@ -524,17 +521,14 @@ ...@@ -524,17 +521,14 @@
} }
}; };
// Check if FusionCharts is loaded
if (typeof FusionCharts === 'undefined') { if (typeof FusionCharts === 'undefined') {
return; return;
} }
// Check if container exists
if (!document.getElementById('chart-container')) { if (!document.getElementById('chart-container')) {
return; return;
} }
// Wait for FusionCharts to be ready
FusionCharts.ready(function() { FusionCharts.ready(function() {
window.myGauge = new FusionCharts({ window.myGauge = new FusionCharts({
...@@ -633,12 +627,6 @@ function updateGauge(percentage, realisasi, target) { ...@@ -633,12 +627,6 @@ function updateGauge(percentage, realisasi, target) {
format: '(.ddd)', format: '(.ddd)',
}); });
// var ytd_target = new Odometer({
// el: document.getElementById('ytd_target'),
// value: 0,
// format: '(.ddd)',
// });
var table = $('#table1').DataTable( var table = $('#table1').DataTable(
{ {
"destroy": true, "destroy": true,
...@@ -647,6 +635,8 @@ function updateGauge(percentage, realisasi, target) { ...@@ -647,6 +635,8 @@ function updateGauge(percentage, realisasi, target) {
"info": false, "info": false,
"autoWidth": false, "autoWidth": false,
"ordering": false, "ordering": false,
"processing": false,
"serverSide": false,
"columnDefs": [ "columnDefs": [
{ className: 'text-center', width: "10px", targets: [0] }, { className: 'text-center', width: "10px", targets: [0] },
{ className: 'text-left', width: "150px",targets: [1] }, { className: 'text-left', width: "150px",targets: [1] },
...@@ -657,29 +647,35 @@ function updateGauge(percentage, realisasi, target) { ...@@ -657,29 +647,35 @@ function updateGauge(percentage, realisasi, target) {
} }
); );
var tableRefresh = function () { var tableRefresh = function () {
table.clear();
var url = "${url}".replace("/pajak/", "/grid/"); var url = "${url}".replace("/pajak/", "/grid/");
$.get(url, {}, function (data, status) { $.get(url, {}, function (data, status) {
if (status === "success") { if (status === "success") {
table.clear();
var sum_target = 0; var sum_target = 0;
var sum_realisasi = 0; var sum_realisasi = 0;
var sum_sisa = 0; var sum_sisa = 0;
var sum_persen = 0; var sum_persen = 0;
var rowNumber = 1;
data.forEach(function (row) { data.forEach(function (row) {
table.row.add([ table.row.add([
row.kode, rowNumber,
row.nama, row.nama,
row.target, row.target,
row.realisasi, row.realisasi,
row.persen.toFixed(2), row.persen.toFixed(2),
row.sisa, row.sisa,
]); ]);
rowNumber++;
sum_target += row.target; sum_target += row.target;
sum_realisasi += row.realisasi; sum_realisasi += row.realisasi;
sum_sisa += row.sisa; sum_sisa += row.sisa;
sum_persen += row.persen; sum_persen += row.persen;
}); });
table.draw();
$('#sum_target').html(sum_target.toLocaleString("id-ID")); $('#sum_target').html(sum_target.toLocaleString("id-ID"));
$('#sum_realisasi').html(sum_realisasi.toLocaleString("id-ID")); $('#sum_realisasi').html(sum_realisasi.toLocaleString("id-ID"));
$('#sum_sisa').html(sum_sisa.toLocaleString("id-ID")); $('#sum_sisa').html(sum_sisa.toLocaleString("id-ID"));
...@@ -692,8 +688,6 @@ function updateGauge(percentage, realisasi, target) { ...@@ -692,8 +688,6 @@ function updateGauge(percentage, realisasi, target) {
} else { } else {
updateGauge(40.99, 1508025096875, 3679068431493); updateGauge(40.99, 1508025096875, 3679068431493);
} }
table.draw();
} else { } else {
table.draw(); table.draw();
} }
...@@ -721,18 +715,18 @@ function updateGauge(percentage, realisasi, target) { ...@@ -721,18 +715,18 @@ function updateGauge(percentage, realisasi, target) {
setTimeout(function () { setTimeout(function () {
$().datarefresh(); $().datarefresh();
}, 300000000000); }, 300000);
} else { } else {
setTimeout(function () { setTimeout(function () {
$().datarefresh(); $().datarefresh();
}, 60000000000); }, 60000);
} }
}).fail(function () { }).fail(function () {
setTimeout(function () { setTimeout(function () {
$().datarefresh(); $().datarefresh();
}, 6000000000000); }, 60000);
}); });
} }
</script> </script>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!