init
This commit is contained in:
Rinjae
@@ -0,0 +1,499 @@
|
||||
<%@ 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>
|
||||
Reference in New Issue
Block a user