Rinjae
499 lines
11 KiB
Plaintext
499 lines
11 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
|
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
|
|
|
|
<!-- Chart Include -->
|
|
<script language="javascript" src="<c:url value="/js/jquery.jqplot.min.js"/>"></script>
|
|
<!--[if IE]><script type="text/javascript" src="<c:url value="/js/excanvas.min.js"/>"></script><![endif]-->
|
|
|
|
<script language="javascript" src="<c:url value="/js/jqplot.cursor.min.js"/>"></script>
|
|
<script language="javascript" src="<c:url value="/js/jqplot.categoryAxisRenderer.min.js"/>"></script>
|
|
<script language="javascript" src="<c:url value="/js/jqplot.barRenderer.min.js"/>"></script>
|
|
<script language="javascript" src="<c:url value="/js/jqplot.pointLabels.min.js"/>"></script>
|
|
<script language="javascript" src="<c:url value="/js/jqplot.enhancedLegendRenderer.min.js"/>"></script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
var maxVal = 0; // Line 차트의 Y축 Max값 저장.
|
|
var setMaxVal = 0; // Line 차트의 Y축 Max값 결과 저장.
|
|
|
|
function getIeVersion()
|
|
{
|
|
var userAgent = navigator.userAgent;
|
|
var msieIdx = userAgent.indexOf("MSIE");
|
|
var ie_v = "";
|
|
|
|
// msieIdx check.
|
|
// msieIdx : userAgent문자열에서 MSIE가 없으면 -1이 저장됩니다.
|
|
|
|
// navigator.userAgent문자열에서 IE 11버전부터 MSIE는 없습니다.
|
|
if(msieIdx != -1)
|
|
{
|
|
ie_v = userAgent.substr(msieIdx+5, 3);
|
|
return parseInt(ie_v, 10);
|
|
}
|
|
}
|
|
|
|
// Internet Explorer version check.
|
|
function ieV8Chk()
|
|
{
|
|
var ie_v = getIeVersion();
|
|
|
|
return ie_v <= 8 ? true : false;
|
|
}
|
|
|
|
|
|
// from ~ to Date check
|
|
function isFromToDate(frDt, toDt, dtType)
|
|
{
|
|
var returnFlag = true;
|
|
var strFrDt = "";
|
|
var strToDt = "";
|
|
var numChck;
|
|
|
|
if(dtType == "" || dtType == null || dtType == undefined)
|
|
{
|
|
numChck = /^(19|20)\d{2}/;
|
|
}
|
|
else
|
|
{
|
|
numChck = /^(19|20)\d{2}(0[0-9]|1[0-2])(0[1-9]|[12][0-9]|3[0-1])*$/;
|
|
}
|
|
|
|
if(frDt == "" || frDt == undefined || frDt == null)
|
|
{
|
|
returnFlag = false;
|
|
}
|
|
else if(toDt == "" || toDt == undefined || toDt == null)
|
|
{
|
|
returnFlag = false;
|
|
}
|
|
else{
|
|
strFrDt = frDt.replace(/\-/g, "");
|
|
strToDt = toDt.replace(/\-/g, "");
|
|
|
|
if(!numChck.test(strFrDt))
|
|
{
|
|
returnFlag = false;
|
|
}
|
|
else if(!numChck.test(strToDt))
|
|
{
|
|
returnFlag = false;
|
|
}
|
|
else if(parseInt(strFrDt, 10) > parseInt(strToDt, 10))
|
|
{
|
|
returnFlag = false;
|
|
}
|
|
}
|
|
|
|
return returnFlag;
|
|
}
|
|
|
|
|
|
// Set Date Format
|
|
function setDateFormat(strDate)
|
|
{
|
|
var dateLen = 0;
|
|
var resultDate = "";
|
|
|
|
if(strDate != null)
|
|
{
|
|
dateLen = strDate.length;
|
|
|
|
if(dateLen == 6)
|
|
{
|
|
resultDate += strDate.substr(0, 4) + "-" + strDate.substr(4, 2);
|
|
}
|
|
else if(dateLen == 8)
|
|
{
|
|
resultDate += strDate.substr(0, 4) + "-" + strDate.substr(4, 2) + "-" + strDate.substr(6, 2);
|
|
}
|
|
else
|
|
{
|
|
resultDate += strDate;
|
|
}
|
|
}
|
|
|
|
return resultDate;
|
|
}
|
|
|
|
|
|
|
|
// jqplot Line 차트 그리는 함수.
|
|
function jqLineChart(chartId, rows, axisInt, prefix, topTitle)
|
|
{
|
|
var returnPlot; // plot Object 저장.
|
|
|
|
// 차트 그리기.
|
|
returnPlot = $.jqplot(chartId, getLines(rows, axisInt, prefix), setChartOptinos(rows, axisInt, topTitle));
|
|
|
|
return returnPlot;
|
|
}
|
|
|
|
// jqplot Bar 차트 그리는 함수.
|
|
function jqBarchart(chartId, rows, prefix1, prefix2, topTitle)
|
|
{
|
|
var returnPlot; // plot Object 저장.
|
|
|
|
// 차트 그리기.
|
|
returnPlot = $.jqplot(chartId, getBars(rows, prefix1, prefix2), setBarChartOptinos(rows, topTitle));
|
|
|
|
return returnPlot;
|
|
}
|
|
|
|
|
|
// Bar Chart의 Legend Label 셋팅.
|
|
function getLegendLabels(rows)
|
|
{
|
|
var labels = [];
|
|
var idx = 0;
|
|
|
|
for(var i = 0; i < rows.length; i++)
|
|
{
|
|
if(labels[idx-1] == undefined || labels[idx-1] != rows[i]["STATCY"])
|
|
{
|
|
labels[idx++] = rows[i]["STATCY"];
|
|
}
|
|
}
|
|
|
|
return labels;
|
|
}
|
|
|
|
|
|
/* Cahrt y축 tick value 설정.*/
|
|
function getTickInterval()
|
|
{
|
|
var tickInt = 1;
|
|
var tickVal = 0;
|
|
|
|
// Browser 체크.
|
|
// if(ieV8Chk())
|
|
// {
|
|
// // IE 8이하
|
|
// tickVal = setMaxVal;
|
|
// }
|
|
// else
|
|
// {
|
|
// // IE 9이상
|
|
// tickVal = maxVal;
|
|
// }
|
|
|
|
tickVal = setMaxVal;
|
|
|
|
if(tickVal > 10)
|
|
{
|
|
tickInt = tickVal * 0.1;
|
|
}
|
|
|
|
return parseInt(tickInt, 10);
|
|
}
|
|
|
|
|
|
// 차트(jqplot)의 Line 생성.
|
|
// DB에서 조회된 값으로 차트에서 사용 할 Line 생성.
|
|
function getLines(rows, colCnt, prefix)
|
|
{
|
|
var rowCnt = rows.length; // row Count.
|
|
var fields = []; // x축, y축 값을 저장.
|
|
var values = []; // x축, y축 Array 저장.
|
|
var lines = []; // values Array 저장.
|
|
|
|
maxVal = 0; // y축 MaxVal 초기화.
|
|
|
|
// Grid의 데이터가 없으면 차트 이미지만 Rendering
|
|
if(rowCnt == 0)
|
|
{
|
|
return lines[0] = [[0,0]];
|
|
}
|
|
|
|
// IE 8버전 이하일 때 차트 이미지만 Rendering => rowData 1건 이상인경우 기본값 셋팅
|
|
// if(ieV8Chk() == true && rowCnt > 1)
|
|
if(rowCnt > 1)
|
|
{
|
|
return lines[0] = [[0,0]];
|
|
}
|
|
|
|
// 차트 데이터 생성.
|
|
// 1차 Loop (row Count)
|
|
for(var i = 0; i < rowCnt; i++)
|
|
{
|
|
values= [];
|
|
|
|
// 2차 Loop (row Column Count)
|
|
for(var j = 1; j <= colCnt; j ++)
|
|
{
|
|
fields = [];
|
|
|
|
fields[0] = j;
|
|
fields[1] = rows[i][prefix + fields[0]];
|
|
|
|
values[j-1] = fields;
|
|
|
|
if(parseInt(maxVal, 10) < parseInt(fields[1], 10))
|
|
{
|
|
maxVal = fields[1];
|
|
}
|
|
}
|
|
|
|
lines[i] = values;
|
|
}
|
|
|
|
return lines;
|
|
}
|
|
|
|
// 차트(jqplot) 설정값 셋팅 함수.
|
|
function setChartOptinos(rows, xAxisInt, topTitle)
|
|
{
|
|
var rowCnt = rows.length; // row Count.
|
|
var arrTicks = []; // x축 일자 저장.
|
|
var returnOptions; // plot Option 저장.
|
|
var yAxis;
|
|
|
|
// 차트 X 축 일자 표시 data.
|
|
for(var i = 1; i <= xAxisInt; i++)
|
|
{
|
|
arrTicks[i-1] = i;
|
|
}
|
|
|
|
// start y축 옵션 설정.
|
|
if(rowCnt == 1)
|
|
{
|
|
var maxLen = maxVal.length;
|
|
var divisionVal = 1;
|
|
var addVal = 0;
|
|
|
|
setMaxVal = 0;
|
|
|
|
for(var i = 0; i < (maxLen-1); i++)
|
|
{
|
|
divisionVal *= 10;
|
|
}
|
|
|
|
addVal = divisionVal * parseInt(maxVal / divisionVal , 10);
|
|
setMaxVal = (parseInt(maxVal / divisionVal , 10) * divisionVal) + (addVal);
|
|
|
|
yAxis = {
|
|
min: 0,
|
|
max: setMaxVal,
|
|
numberticks: 11,
|
|
tickInterval: getTickInterval(),
|
|
tickOptions: {
|
|
formatString:"%'d",
|
|
// fontString:"%'d",
|
|
fontSize: "8pt"
|
|
},
|
|
};
|
|
}
|
|
else
|
|
{
|
|
yAxis = {
|
|
min: 0,
|
|
numberticks: 11,
|
|
tickInterval: getTickInterval(),
|
|
tickOptions: {
|
|
formatString:"%'d",
|
|
// fontString:"%`d",
|
|
fontSize: "8pt"
|
|
},
|
|
};
|
|
}
|
|
// end y축 옵션 설정.
|
|
|
|
returnOptions = {
|
|
title: topTitle,
|
|
|
|
grid: {background: 'white', drawBorder: true, shadow: false},
|
|
seriesDefaults: {rendererOptions: {smooth: true}},
|
|
series:[{lineWidth:2, color:'#ff6384', shadow:false}],
|
|
axes:{
|
|
xaxis:{
|
|
min:0,
|
|
max:xAxisInt,
|
|
numberTicks:1,
|
|
renderer:$.jqplot.CategoryAxisRenderer,
|
|
ticks:arrTicks,
|
|
tickOptions:{
|
|
formatString:"%d",
|
|
fontSize: "10pt"
|
|
}
|
|
},
|
|
|
|
yaxis: yAxis,
|
|
},
|
|
|
|
// cursor:{
|
|
// show:true,
|
|
// zoom:true
|
|
// },
|
|
};
|
|
/* SAMPLES 170210
|
|
animate: true,
|
|
title:{text:'전송건수',fontFamily:'Malgun Gothic, dotum, sans-serif', fontSize: '16px', textColor: '#000000'},
|
|
grid: {background: 'white', drawBorder: true, shadow: false},
|
|
seriesDefaults: {rendererOptions: {smooth: true}},
|
|
series:[
|
|
{lineWidth:3, color:'#009ce5', shadow:false},
|
|
{lineWidth:3, color:'#1cc799', shadow:false},
|
|
{lineWidth:3, color:'#7fc80b', shadow:false},
|
|
{lineWidth:3, color:'#ffc600', shadow:false},
|
|
{lineWidth:3, color:'#ff8839', shadow:false},
|
|
{lineWidth:3, color:'#ff4239', shadow:false},
|
|
{lineWidth:3, color:'#ff8aa8', shadow:false},
|
|
{lineWidth:3, color:'#b569f5', shadow:false},
|
|
{lineWidth:3, color:'#737373', shadow:false},
|
|
],
|
|
axes: {xaxis: {pad: 2.0, tickOptions: {showGridline: false}}, yaxis: {pad: 1.05}} */
|
|
return returnOptions;
|
|
}
|
|
|
|
|
|
/* Bar Cahrt */
|
|
// 차트(jqplot)의 Bar 생성.
|
|
// DB에서 조회된 값으로 차트에서 사용 할 Bar 생성.
|
|
function getBars(rows, prefix1, prefix2)
|
|
{
|
|
var rowCnt = rows.length; // row Count.
|
|
var fields = []; // x축, y축 값을 저장.
|
|
var values = []; // values Array 저장.
|
|
var bars = []; // values Array 저장.
|
|
var groupStatcy = 0;
|
|
var groupIdx = 0;
|
|
var j = 0;
|
|
|
|
maxVal = 0; // y축 MaxVal 초기화.
|
|
|
|
// Grid의 데이터가 없으면 차트 이미지만 Rendering
|
|
if(rowCnt == 0)
|
|
{
|
|
return bars[0] = [[0,0]];
|
|
}
|
|
|
|
// 차트 데이터 생성.
|
|
// Loop (row Count)
|
|
groupStatcy = rows[0]["STATCY"];
|
|
values = [];
|
|
for(var i = 0; i < rowCnt; i++)
|
|
{
|
|
if(groupStatcy != rows[i]["STATCY"])
|
|
{
|
|
groupStatcy = rows[i]["STATCY"];
|
|
bars[groupIdx++] = values;
|
|
j = 0;
|
|
values = [];
|
|
}
|
|
|
|
fields = [];
|
|
|
|
fields[0] = rows[i][prefix1];
|
|
fields[1] = rows[i][prefix2];
|
|
|
|
values[j] = fields;
|
|
|
|
if(parseInt(maxVal, 10) < parseInt(fields[1], 10))
|
|
{
|
|
maxVal = fields[1];
|
|
}
|
|
|
|
if(i == (rowCnt-1))
|
|
{
|
|
bars[groupIdx] = values;
|
|
}
|
|
|
|
j++;
|
|
}
|
|
|
|
return bars;
|
|
}
|
|
|
|
// 차트(jqplot) 설정값 셋팅 함수.
|
|
function setBarChartOptinos(rows, topTitle)
|
|
{
|
|
var rowCnt = rows.length; // row Count.
|
|
var returnOptions; // plot chart Option 저장.
|
|
var yAxis;
|
|
var legendLabels = getLegendLabels(rows);
|
|
|
|
// start y축 옵션 설정.
|
|
if(rowCnt == 1)
|
|
{
|
|
var maxLen = maxVal.length;
|
|
var divisionVal = 1;
|
|
var addVal = 0;
|
|
|
|
setMaxVal = 0;
|
|
|
|
for(var i = 0; i < (maxLen-1); i++)
|
|
{
|
|
divisionVal *= 10;
|
|
}
|
|
|
|
addVal = divisionVal * parseInt(maxVal / divisionVal , 10);
|
|
setMaxVal = (parseInt(maxVal / divisionVal , 10) * divisionVal) + (addVal);
|
|
|
|
yAxis = {
|
|
min: 0,
|
|
max: setMaxVal,
|
|
numberticks: 11,
|
|
tickInterval: getTickInterval(),
|
|
tickOptions: {
|
|
// formatString:"%d"
|
|
fontString:"%d",
|
|
fontSize: "12px"
|
|
}
|
|
};
|
|
}
|
|
else
|
|
{
|
|
yAxis = {
|
|
min: 0,
|
|
numberticks: 11,
|
|
tickOptions: {
|
|
// formatString:"%d"
|
|
fontString:"%d",
|
|
fontSize: "12px"
|
|
}
|
|
};
|
|
}
|
|
// end y축 옵션 설정.
|
|
|
|
returnOptions = {
|
|
title: topTitle,
|
|
seriesDefaults:{
|
|
renderer: $.jqplot.BarRenderer,
|
|
rendererOptions:{
|
|
barWidth: 20
|
|
, barPadding: 10
|
|
, barMargin: 0
|
|
},
|
|
pointLabels: { show: true}
|
|
},
|
|
legend:{
|
|
renderer: $.jqplot.EnhancedLegendRenderer,
|
|
show: true,
|
|
location: "n",
|
|
labels: legendLabels,
|
|
rendererOptions:{numberRows: 1, placement: "outsideGrid", disableIEFading:true, paddingLeft:"8"},
|
|
marginTop: '10px',
|
|
fontSize: "1.2em"
|
|
},
|
|
axesDefaults: {
|
|
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
|
|
tickOptions:{
|
|
fontSize: "9pt"
|
|
}
|
|
},
|
|
axes:{
|
|
xaxis:{
|
|
renderer:$.jqplot.CategoryAxisRenderer
|
|
},
|
|
yaxis: yAxis
|
|
},
|
|
cursor:{
|
|
show:false,
|
|
zoom:false
|
|
}
|
|
};
|
|
|
|
return returnOptions;
|
|
}
|
|
</script> |