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 @@
color: #777;
font-size: 0px;
font-weight: normal;
background-color:rgb(255,255,255);
/*background-color:rgb(255,255,255)*/;
}
.table-title, .table-title-right {
text-align:center;
......@@ -98,9 +98,7 @@
}
</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 metal:fill-slot="navs">
......
views/templates/grafik.pt
<html metal:use-macro="load: base.pt">
<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>
function hide_other(){
$('.data').hide();
};
var bar_chart_options = {
responsive:true
var barLineOptions = {
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>
<style>
......@@ -65,24 +128,24 @@
</div>
</div-->
<div class="row">
<div class="col-md-5">
<div class="col-md-6 ">
<div class="col-md-12">
<div id="chart-line-101" >
<div id="chart-line-101">
<div class="row">
<center>
<div class="row">
<div class="col-md-12 bg-info">
<h5>REALISASI KUMULATIF PENDAPATAN DAN BELANJA</h5>
<div class="col-md-12 table-title" style="border-right: 2px solid #000000;">
REALISASI KUMULATIF PENDAPATAN DAN BELANJA
</div>
</div>
<div class="row">
<div class="col-md-10">
<canvas id="canvas_101" height="300px" width="400px"></canvas>
</div>
<div class="col-md-2">
<h5>Keterangan</h5>
<div id="legend_101"></div>
<div class="col-md-12">
<canvas id="canvas_101"></canvas>
</div>
<!-- <div class="col-md-2"> -->
<!-- <h5>Keterangan</h5> -->
<!-- <div id="legend_101"></div> -->
<!-- </div> -->
</div>
</center>
......@@ -93,56 +156,25 @@
datasets : [
{
label: "Pendapatan",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : []
borderColor:"rgb(255, 99, 132)",
//lineTension: 0.2,
fill:false,
data : [],
borderWidth:1,
},
{
label: "Belanja",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : []
borderColor:"rgb(215, 196, 255)",
//lineTension: 0.2,
fill:false,
data : [],
borderWidth:1,
}
]
}
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(){
var ctx_101 = document.getElementById("canvas_101").getContext("2d");
$.ajax({
......@@ -156,10 +188,11 @@
lineChartData_101.datasets[0].data.push(html.target[i]);
lineChartData_101.datasets[1].data.push(html.realisasi[i]);
}
window.myLine_101 = new Chart(ctx_101).Line(lineChartData_101, {
//responsive: true;
window.myLine_101 = new Chart(ctx_101, {
type: 'line',
data: lineChartData_101,
options: barLineOptions,
});
legend(document.getElementById('legend_101'), lineChartData_101);
}
},
beforeSend: function () {
......@@ -171,26 +204,19 @@
</div>
</div>
</div>
<div class="col-md-1">
</div>
<div class="col-md-5">
<div class="col-md-6">
<div class="col-md-12">
<div id="chart-bar-102" >
<div class="row">
<center>
<div class="row">
<div class="col-md-12 bg-info">
<h5>REALISASI PENDAPATAN DAN BELANJA</h5>
<div class="col-md-12 table-title">
REALISASI PENDAPATAN DAN BELANJA
</div>
</div>
<div class="row">
<div class="col-md-10">
<canvas id="canvas_102" height="300px" width="500px"></canvas>
</div>
<div class="col-md-2">
<h5>Keterangan</h5>
<div id="legend_102"></div>
<div class="col-md-12">
<canvas id="canvas_102"></canvas>
</div>
</div>
......@@ -203,47 +229,21 @@
datasets : [
{
label: "Pendapatan",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
backgroundColor: "rgba(254, 223, 229,0.2)",
borderColor:"rgb(255, 99, 132)",
borderWidth:1,
data : []
},
{
label: "Belanja",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
backgroundColor: "rgba(234, 223, 254,0.2)",
borderColor:"rgb(215, 196, 255)",
borderWidth: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, ".");}
;
var ctx_102 = $("#canvas_102").get(0).getContext("2d");
$(function(){
......@@ -260,12 +260,12 @@
barChartData_102.datasets[1].data.push(html.realisasi[i]);
}
window.myBar_102 = new Chart(ctx_102).Bar(barChartData_102,
{
//responsive: false;
window.myBar_102 = new Chart(ctx_102, {
type: 'bar',
data: barChartData_102,
options: barLineOptions
});
legend(document.getElementById('legend_102'), barChartData_102);
}
},
......@@ -281,37 +281,35 @@
</div>
<div class="row">
<div class="col-md-5">
<div class="col-md-6">
<div class="col-md-12">
<div id="chart-line-103" >
<div class="row">
<center>
<div class="row">
<div class="col-md-12 bg-info">
<h5>KOMPOSISI REALISASI PENDAPATAN</h5>
<div class="col-md-12 table-title" style="border-right: 2px solid #000000;">
KOMPOSISI REALISASI PENDAPATAN
</div>
</div>
<div class="row">
<div class="col-md-10">
<canvas id="canvas_103" height="300px" width="400px"></canvas>
</div>
<div class="col-md-2">
<h5>Keterangan</h5>
<div id="legend_103"></div>
<div class="col-md-10 col-md-offset-1">
<canvas id="canvas_103"></canvas>
</div>
</div>
</center>
</div>
<script>
var pieData_103 = [];
var pieData_103 = {
datasets: [{
data: [],
backgroundColor: []
}],
labels: [],
}
$(function(){
/*GET DATA PIE*/
var ctx_103 = document.getElementById("canvas_103").getContext("2d");
//window.myPie_103 = new Chart(ctx_103).Pie(pieData_103);
var npie = 0 ;
//GET DATA FROM SERVER
$.ajax({
type: "POST",
url: "/eis/sipkd/grafik/pie/act",
......@@ -319,20 +317,17 @@
success: function (html) {
if (html.success == true) {
jQuery.each(html.rows, function(i, val) {
x = {
"value": val.value,
"color": "#"+val.color,
//highlight: "#"+val.highlight,
"label": val.nama}
npie = pieData_103.push(x);
//alert(pieData_103[npie].value());
pieData_103.datasets[0].data.push(val.value);
pieData_103.datasets[0].backgroundColor.push("#"+val.color);
pieData_103.labels.push(val.nama);
});
window.myPie_103 = new Chart(ctx_103).Pie(pieData_103,{
//responsive: true;
window.myPie_103 = new Chart(ctx_103, {
type: 'pie',
data: pieData_103,
options:pieOptions
});
legend(document.getElementById('legend_103'), pieData_103);
}
},
} //end if
}, //end success
beforeSend: function () {
}
});
......@@ -342,34 +337,36 @@
</div>
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-5">
<div class="col-md-6">
<div class="col-md-12">
<div id="chart-line-104" >
<div class="row">
<center>
<div class="row">
<div class="col-md-12 bg-info">
<h5>KOMPOSISI REALISASI BELANJA</h5>
<div class="col-md-12 table-title">
KOMPOSISI REALISASI BELANJA
</div>
</div>
<div class="row">
<div class="col-md-10">
<canvas id="canvas_104" height="300px" width="500px"></canvas>
</div>
<div class="col-md-2">
<h5>Keterangan</h5>
<div id="legend_104"></div>
<div class="col-md-10 col-md-offset-1">
<canvas id="canvas_104" ></canvas>
</div>
</div>
</center>
<script>
var pieData_104 = [];
var pieData_104 = {
datasets: [{
data: [],
backgroundColor: []
}],
labels: [],
}
$(function(){
/*GET DATA PIE*/
var ctx_104 = document.getElementById("canvas_104").getContext("2d");
//window.myPie_103 = new Chart(ctx_103).Pie(pieData_103);
var npie = 0 ;
//GET DATA FROM SERVER
$.ajax({
......@@ -379,18 +376,15 @@
success: function (html) {
if (html.success == true) {
jQuery.each(html.rows, function(i, val) {
x = {
"value": val.value,
"color": "#"+val.color,
//highlight: "#"+val.highlight,
"label": val.nama}
npie = pieData_104.push(x);
//alert(pieData_103[npie].value());
pieData_104.datasets[0].data.push(val.value);
pieData_104.datasets[0].backgroundColor.push("#"+val.color);
pieData_104.labels.push(val.nama);
});
window.myPie_104 = new Chart(ctx_104).Pie(pieData_104,{
//responsive: true;
window.myPie_104 = new Chart(ctx_104, {
type: 'pie',
data: pieData_104,
options: pieOptions,
});
legend(document.getElementById('legend_104'), pieData_104);
}
},
beforeSend: function () {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!