Skip to content

Project / eis_sipkd

Go to a project
Commit 846a4f75 by aa.gusti
Options

grafik

1 parent 2139add0
Inline Side-by-side
Showing 2 changed files with 149 additions and 157 deletions
views/templates/base.pt
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
color: #777; color: #777;
font-size: 0px; font-size: 0px;
font-weight: normal; font-weight: normal;
background-color:rgb(255,255,255); /*background-color:rgb(255,255,255)*/;
} }
.table-title, .table-title-right { .table-title, .table-title-right {
text-align:center; text-align:center;
...@@ -98,9 +98,7 @@ ...@@ -98,9 +98,7 @@
} }
</style> </style>
<link href="/static/chart/legend/legend.css" rel="stylesheet">
<script type="text/javascript" src="/static/chart/Chart.js"> </script>
<script type="text/javascript" src="/static/chart/legend/legend.js"> </script>
</div> </div>
<div metal:fill-slot="navs"> <div metal:fill-slot="navs">
......
views/templates/grafik.pt
<html metal:use-macro="load: base.pt"> <html metal:use-macro="load: base.pt">
<div metal:fill-slot="scripts"> <div metal:fill-slot="scripts">
<!-- <link href="/static/chart/legend/legend.css" rel="stylesheet"> -->
<script type="text/javascript" src="/static/chart2/Chart.min.js"> </script>
<!-- <script type="text/javascript" src="/static/chart/legend/legend.js"> </script> -->
<script> <script>
function hide_other(){ function hide_other(){
$('.data').hide(); $('.data').hide();
}; };
var bar_chart_options = { var barLineOptions = {
responsive:true maintainAspectRatio: true,
responsive: true,
responsiveAnimationDuration: 0,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
if(parseInt(value) >= 999){
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
} else {
return value;
}
}
}
}]
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
console.log(tooltipItems);
return tooltipItems.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");;
}
}
},
};
var pieOptions = {
//maintainAspectRatio: true,
//responsive: true,
//responsiveAnimationDuration: 0,
//scales: {
// yAxes: [{
// ticks: {
// beginAtZero: true,
// callback: function(value, index, values) {
// if(parseInt(value) >= 999){
// return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
// } else {
// return value;
// }
// }
// }
// }]
//},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(p1, data) {
console.log(p1, data);
console.log(p1.datasetIndex, p1.index);
return data.datasets[p1.datasetIndex].data[p1.index].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
//return data.datasets[p1.datasetindex].data[p1.index].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");;
}
}
},
}; };
</script> </script>
<style> <style>
...@@ -65,24 +128,24 @@ ...@@ -65,24 +128,24 @@
</div> </div>
</div--> </div-->
<div class="row"> <div class="row">
<div class="col-md-5"> <div class="col-md-6 ">
<div class="col-md-12"> <div class="col-md-12">
<div id="chart-line-101" > <div id="chart-line-101">
<div class="row"> <div class="row">
<center> <center>
<div class="row"> <div class="row">
<div class="col-md-12 bg-info"> <div class="col-md-12 table-title" style="border-right: 2px solid #000000;">
<h5>REALISASI KUMULATIF PENDAPATAN DAN BELANJA</h5> REALISASI KUMULATIF PENDAPATAN DAN BELANJA
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-10"> <div class="col-md-12">
<canvas id="canvas_101" height="300px" width="400px"></canvas> <canvas id="canvas_101"></canvas>
</div>
<div class="col-md-2">
<h5>Keterangan</h5>
<div id="legend_101"></div>
</div> </div>
<!-- <div class="col-md-2"> -->
<!-- <h5>Keterangan</h5> -->
<!-- <div id="legend_101"></div> -->
<!-- </div> -->
</div> </div>
</center> </center>
...@@ -93,56 +156,25 @@ ...@@ -93,56 +156,25 @@
datasets : [ datasets : [
{ {
label: "Pendapatan", label: "Pendapatan",
fillColor : "rgba(220,220,220,0.2)", borderColor:"rgb(255, 99, 132)",
strokeColor : "rgba(220,220,220,1)", //lineTension: 0.2,
pointColor : "rgba(220,220,220,1)", fill:false,
pointStrokeColor : "#fff", data : [],
pointHighlightFill : "#fff", borderWidth:1,
pointHighlightStroke : "rgba(220,220,220,1)",
data : []
}, },
{ {
label: "Belanja", label: "Belanja",
fillColor : "rgba(151,187,205,0.2)", borderColor:"rgb(215, 196, 255)",
strokeColor : "rgba(151,187,205,1)", //lineTension: 0.2,
pointColor : "rgba(151,187,205,1)", fill:false,
pointStrokeColor : "#fff", data : [],
pointHighlightFill : "#fff", borderWidth:1,
pointHighlightStroke : "rgba(151,187,205,1)",
data : []
} }
] ]
} }
Chart.defaults.global.scaleLabel = function(label){
return label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
// return parseInt( label.value ).toLocaleString();
/*
This doesn't work in all browsers unfortunately yet:
parseInt( '1000' ).toLocaleString()
Result in Safari: 1.000
Result in FF und Chrome: 1.111
parseFloat( '1000.33' ).toLocaleString()
Result in Safari: 1000.33
Result in FF und Chrome: 1.000,33
*/
};
Chart.defaults.global.multiTooltipTemplate = function(label){
return label.datasetLabel + ': ' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");}
; // "<%= value %>";
Chart.defaults.global.scaleLabel = function(label){
return label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
};
Chart.defaults.global.multiTooltipTemplate = function(label){
return label.datasetLabel + ': ' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");};
$(function(){ $(function(){
var ctx_101 = document.getElementById("canvas_101").getContext("2d"); var ctx_101 = document.getElementById("canvas_101").getContext("2d");
$.ajax({ $.ajax({
...@@ -156,10 +188,11 @@ ...@@ -156,10 +188,11 @@
lineChartData_101.datasets[0].data.push(html.target[i]); lineChartData_101.datasets[0].data.push(html.target[i]);
lineChartData_101.datasets[1].data.push(html.realisasi[i]); lineChartData_101.datasets[1].data.push(html.realisasi[i]);
} }
window.myLine_101 = new Chart(ctx_101).Line(lineChartData_101, { window.myLine_101 = new Chart(ctx_101, {
//responsive: true; type: 'line',
data: lineChartData_101,
options: barLineOptions,
}); });
legend(document.getElementById('legend_101'), lineChartData_101);
} }
}, },
beforeSend: function () { beforeSend: function () {
...@@ -171,26 +204,19 @@ ...@@ -171,26 +204,19 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-1"> <div class="col-md-6">
</div>
<div class="col-md-5">
<div class="col-md-12"> <div class="col-md-12">
<div id="chart-bar-102" > <div id="chart-bar-102" >
<div class="row"> <div class="row">
<center> <center>
<div class="row"> <div class="row">
<div class="col-md-12 bg-info"> <div class="col-md-12 table-title">
<h5>REALISASI PENDAPATAN DAN BELANJA</h5> REALISASI PENDAPATAN DAN BELANJA
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-10"> <div class="col-md-12">
<canvas id="canvas_102" height="300px" width="500px"></canvas> <canvas id="canvas_102"></canvas>
</div>
<div class="col-md-2">
<h5>Keterangan</h5>
<div id="legend_102"></div>
</div> </div>
</div> </div>
...@@ -203,47 +229,21 @@ ...@@ -203,47 +229,21 @@
datasets : [ datasets : [
{ {
label: "Pendapatan", label: "Pendapatan",
fillColor : "rgba(220,220,220,0.2)", backgroundColor: "rgba(254, 223, 229,0.2)",
strokeColor : "rgba(220,220,220,1)", borderColor:"rgb(255, 99, 132)",
pointColor : "rgba(220,220,220,1)", borderWidth:1,
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [] data : []
}, },
{ {
label: "Belanja", label: "Belanja",
fillColor : "rgba(151,187,205,0.2)", backgroundColor: "rgba(234, 223, 254,0.2)",
strokeColor : "rgba(151,187,205,1)", borderColor:"rgb(215, 196, 255)",
pointColor : "rgba(151,187,205,1)", borderWidth:1,
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [] data : []
} }
] ]
} }
Chart.defaults.global.scaleLabel = function(label){
return label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
// return parseInt( label.value ).toLocaleString();
/*
This doesn't work in all browsers unfortunately yet:
parseInt( '1000' ).toLocaleString()
Result in Safari: 1.000
Result in FF und Chrome: 1.111
parseFloat( '1000.33' ).toLocaleString()
Result in Safari: 1000.33
Result in FF und Chrome: 1.000,33
*/
};
Chart.defaults.global.multiTooltipTemplate = function(label){
return label.datasetLabel + ': ' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");}
;
var ctx_102 = $("#canvas_102").get(0).getContext("2d"); var ctx_102 = $("#canvas_102").get(0).getContext("2d");
$(function(){ $(function(){
...@@ -260,12 +260,12 @@ ...@@ -260,12 +260,12 @@
barChartData_102.datasets[1].data.push(html.realisasi[i]); barChartData_102.datasets[1].data.push(html.realisasi[i]);
} }
window.myBar_102 = new Chart(ctx_102, {
window.myBar_102 = new Chart(ctx_102).Bar(barChartData_102, type: 'bar',
{ data: barChartData_102,
//responsive: false; options: barLineOptions
}); });
legend(document.getElementById('legend_102'), barChartData_102);
} }
}, },
...@@ -281,37 +281,35 @@ ...@@ -281,37 +281,35 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-5"> <div class="col-md-6">
<div class="col-md-12"> <div class="col-md-12">
<div id="chart-line-103" > <div id="chart-line-103" >
<div class="row"> <div class="row">
<center> <center>
<div class="row"> <div class="row">
<div class="col-md-12 bg-info"> <div class="col-md-12 table-title" style="border-right: 2px solid #000000;">
<h5>KOMPOSISI REALISASI PENDAPATAN</h5> KOMPOSISI REALISASI PENDAPATAN
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-10"> <div class="col-md-10 col-md-offset-1">
<canvas id="canvas_103" height="300px" width="400px"></canvas> <canvas id="canvas_103"></canvas>
</div>
<div class="col-md-2">
<h5>Keterangan</h5>
<div id="legend_103"></div>
</div> </div>
</div> </div>
</center> </center>
</div> </div>
<script> <script>
var pieData_103 = []; var pieData_103 = {
datasets: [{
data: [],
backgroundColor: []
}],
labels: [],
}
$(function(){ $(function(){
/*GET DATA PIE*/
var ctx_103 = document.getElementById("canvas_103").getContext("2d"); var ctx_103 = document.getElementById("canvas_103").getContext("2d");
//window.myPie_103 = new Chart(ctx_103).Pie(pieData_103);
var npie = 0 ; var npie = 0 ;
//GET DATA FROM SERVER
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: "/eis/sipkd/grafik/pie/act", url: "/eis/sipkd/grafik/pie/act",
...@@ -319,20 +317,17 @@ ...@@ -319,20 +317,17 @@
success: function (html) { success: function (html) {
if (html.success == true) { if (html.success == true) {
jQuery.each(html.rows, function(i, val) { jQuery.each(html.rows, function(i, val) {
x = { pieData_103.datasets[0].data.push(val.value);
"value": val.value, pieData_103.datasets[0].backgroundColor.push("#"+val.color);
"color": "#"+val.color, pieData_103.labels.push(val.nama);
//highlight: "#"+val.highlight,
"label": val.nama}
npie = pieData_103.push(x);
//alert(pieData_103[npie].value());
}); });
window.myPie_103 = new Chart(ctx_103).Pie(pieData_103,{ window.myPie_103 = new Chart(ctx_103, {
//responsive: true; type: 'pie',
data: pieData_103,
options:pieOptions
}); });
legend(document.getElementById('legend_103'), pieData_103); } //end if
} }, //end success
},
beforeSend: function () { beforeSend: function () {
} }
}); });
...@@ -342,34 +337,36 @@ ...@@ -342,34 +337,36 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-1"></div> <div class="col-md-6">
<div class="col-md-5">
<div class="col-md-12"> <div class="col-md-12">
<div id="chart-line-104" > <div id="chart-line-104" >
<div class="row"> <div class="row">
<center> <center>
<div class="row"> <div class="row">
<div class="col-md-12 bg-info"> <div class="col-md-12 table-title">
<h5>KOMPOSISI REALISASI BELANJA</h5> KOMPOSISI REALISASI BELANJA
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-10"> <div class="col-md-10 col-md-offset-1">
<canvas id="canvas_104" height="300px" width="500px"></canvas> <canvas id="canvas_104" ></canvas>
</div>
<div class="col-md-2">
<h5>Keterangan</h5>
<div id="legend_104"></div>
</div> </div>
</div> </div>
</center> </center>
<script> <script>
var pieData_104 = []; var pieData_104 = {
datasets: [{
data: [],
backgroundColor: []
}],
labels: [],
}
$(function(){ $(function(){
/*GET DATA PIE*/ /*GET DATA PIE*/
var ctx_104 = document.getElementById("canvas_104").getContext("2d"); var ctx_104 = document.getElementById("canvas_104").getContext("2d");
//window.myPie_103 = new Chart(ctx_103).Pie(pieData_103); //window.myPie_103 = new Chart(ctx_103).Pie(pieData_103);
var npie = 0 ; var npie = 0 ;
//GET DATA FROM SERVER //GET DATA FROM SERVER
$.ajax({ $.ajax({
...@@ -379,18 +376,15 @@ ...@@ -379,18 +376,15 @@
success: function (html) { success: function (html) {
if (html.success == true) { if (html.success == true) {
jQuery.each(html.rows, function(i, val) { jQuery.each(html.rows, function(i, val) {
x = { pieData_104.datasets[0].data.push(val.value);
"value": val.value, pieData_104.datasets[0].backgroundColor.push("#"+val.color);
"color": "#"+val.color, pieData_104.labels.push(val.nama);
//highlight: "#"+val.highlight,
"label": val.nama}
npie = pieData_104.push(x);
//alert(pieData_103[npie].value());
}); });
window.myPie_104 = new Chart(ctx_104).Pie(pieData_104,{ window.myPie_104 = new Chart(ctx_104, {
//responsive: true; type: 'pie',
data: pieData_104,
options: pieOptions,
}); });
legend(document.getElementById('legend_104'), pieData_104);
} }
}, },
beforeSend: function () { beforeSend: function () {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!