<Jstl + amchart> 백업용 소스코드

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

String contextPath = request.getContextPath();

String contextPath2 = request.getContextPath()+"/resources/images/ingu/";

<!DOCTYPE html>

<html>

<head>

<style>

#chartdiv {

width: 100%;

height: 350px;

font-size: 50px;

background-color:white;

}

#chartdiv2{

margin-top : 2%;

width: 100%;

height: 600px;

font-size: 50px;

background-color:white;

}

.contents {

position:relative;

}

.statistics {

float: left;

top: 12%;

left:2%;

position: absolute;

width:73%;

}

#selectable .ui-selecting {

background: #ccc;

}

#selectable .ui-selected {

width:602px;

background-image : url("/pejcs/resources/images/contents/ingu/btn_sub_on.png");

background-repeat: no-repeat;

}

#selectable .ui-selected {

color : white;

}

</style>

var contextPath = "<%=contextPath2%>";

var pathParam = $(location).attr('pathname').split(/[/ ]+/).pop();

window.onload = function() {

$("#"+pathParam).addClass("ui-selected");

fnc_getPageInfo(pathParam);

$( "#selectable" ).selectable({

selected : function(event, ui){

var str = $(".ui-selected").attr("id");

$(location).attr("href","<%=contextPath%>/" + str);

}

});

};

var colors = ["#67b7dc", "#fdd400", "#84b761", "#cc4748", "#cd82ad", "#2f4074", "#448e4d", "#b7b83f", "#b9783f", "#b93e3d", "#913167","#666","#777"];

var list = new Array();

var subList = new Array();

<c:set var="total" value="${0}"/>

<c:forEach items="${SubDB}" var="type" varStatus="status">

<c:set var="total" value="${0}"/>

subList = new Array();

var bean = new Object();

bean.category = "${type.code_nm}";

bean.alpha = 0.5;

bean.color = colors[Math.floor(Math.random() * colors.length)].toString();

<c:forEach items="${DB}" var="data" varStatus="status">

var bean2 = new Object();

<c:choose>

<c:when test="${data.data_type eq type.code_cd}">

bean2.category = "${data.code_cd}";

bean2.income = "${data.data_val}";

bean2.label = "${data.data_val}".toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") +"${data.unit}"

bean2.color = bean.color;

subList.push(bean2);

bean.months = subList;

<c:set var="total" value="${total + data.data_val}"/>

</c:when>

</c:choose>

</c:forEach>

<c:choose>

<c:when test="${type.code_cd == 'medi_inst' or type.code_cd == 'medicine'}">

<c:set var="unit" value="${'개소'}"/>

</c:when>

<c:otherwise>

<c:set var="unit" value="${'명'}"/>

</c:otherwise>

</c:choose>

bean.income = "${total}";

bean.label = "총 ${total}"+"${unit}";

list.push(bean);

</c:forEach>

// aggregate collective data

var chart = AmCharts.makeChart("chartdiv", {

"type": "serial",

"theme": "light",

"pathToImages": "/lib/3/images/",

"autoMargins": false,

"marginLeft": 0,

"marginRight": 8,

"marginTop": 50,

"marginBottom": 40,

"titles": [{

"text": "",

"size" : 50

}, {

"text": "",

"bold": false

}],

"dataProvider": list,

"startDuration": 1,

"valueAxes": [{

"gridColor":"#FFFFFF",

"minimum": 0

}],

"graphs": [{

"labelText": "[[label]]",

"alphaField": "alpha",

"balloonText": "<span style='font-size:35px;'>[[category]]<br><b>[[value]]</b> [[additional]]</span>",

"dashLengthField": "dashLengthColumn",

"fillAlphas": 1,

"title": "Income",

"type": "column",

"valueField": "income",

"showHandOnHover": true,

"fixedColumnWidth": 250,

"lineColorField": "color",

"fillColorsField": "color",

"fontSize" : 30

}],

"categoryField": "category",

"categoryAxis": {

"gridPosition": "start",

"axisAlpha": 0,

"tickLength": 0,

"fontSize" : 30

}

});

var selectedDataPoint;

var chart2;

chart.addListener("clickGraphItem", function (event) {

// check if the new chart is created already

if ( undefined == chart2 ) {

// it's not - create it

chart2 = AmCharts.makeChart("chartdiv2", {

"type": "serial",

"theme": "light",

"pathToImages": "/lib/3/images/",

"autoMargins": false,

"marginLeft": 0,

"marginRight": 8,

"marginTop": 80,

"marginBottom": 40,

"titles": [{

"text": "Monthly data",

"size" : 50

}],

"dataProvider": [],

"startDuration": 1,

"valueAxes": [{

"gridColor":"#FFFFFF",

"minimum": 0

}],

"graphs": [{

"labelText": "[[label]]",

"alphaField": "alpha",

"balloonText": "<span style='font-size:40px;'>[[category]]:<b>[[value]]</b> [[additional]]</span>",

"dashLengthField": "dashLengthColumn",

"fillAlphas": 1,

"title": "Income",

"type": "column",

"valueField": "income",

"fixedColumnWidth": 100,

"lineColorField": "color",

"fillColorsField": "color",

"fontSize" : 30

}],

"categoryField": "category",

"categoryAxis": {

"gridPosition": "start",

"axisAlpha": 0,

"tickLength": 0,

"fontSize" : 30

}

});

}

if ( 'object' === typeof event.item.dataContext.months ) {

// reset alpha of the previously set data point

if ( undefined != selectedDataPoint)

selectedDataPoint.alpha = 0.5;

// set alpha so we know which one is selected

selectedDataPoint = event.item.dataContext;

selectedDataPoint.alpha = 1;

chart.validateData();

// set the monthly data for the clicked month

chart2.dataProvider = event.item.dataContext.months;

// update the chart title

chart2.titles[0].text = event.item.dataContext.category;

// validate the new data and make the chart animate again

chart2.validateData();

chart2.animateAgain();

}

});

// function which resets the chart back to yearly data

function resetChart() {

chart.dataProvider = chartData;

chart.validateData();

chart.animateAgain();

}

</script>

</head>

<body>

<a class="navbar-brand" href="#"><img src="<%=contextPath %>/resources/images/title_02.png"></a>

</div>

<a class="navbar-brand" href="#"><img src="<%=contextPath %>/resources/images/contents/ingu/taste.png"></a>

</div>

<a class="navbar-brand" href="#"><img src="<%=contextPath %>/resources/images/contents/medical/title_sub_04.png"></a>

</div>

</nav>

<div class="statistics" style="border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;

border-top-left-radius: 20px;border-top-right-radius: 20px;border: 2px solid; display:block;">

</div>

<jsp:include page="../include/submenu_right.jsp" flush="false"/>

<img class="bgmap" id="bgmap"

src="<%=contextPath %>/resources/images/contents/medical/bg_medical.png"

</div>

<script

src="<%=contextPath%>/resources/js/ie10-viewport-bug-workaround.js"></script>

</body>

</html>

json 처리했어야 했나.. 노가다 심한 코드

'개발 > 기타' 카테고리의 다른 글

DB GUI 툴 , SQuirreL SQL (0)	2016.04.07
Jeus5 컨테이너 중지/시작 (0)	2015.12.16
참고 사이트(계속 업데이트) (0)	2015.06.08
dynamic web module 3.0 requires java 1.6 or newer in Maven Project (0)	2015.05.20
[ibatis] > , < 범위 지정시 파싱 에러시. (0)	2015.02.11

곤피밍플

<Jstl + amchart> 백업용 소스코드

'개발 > 기타' 카테고리의 다른 글

티스토리툴바

<Jstl + amchart> 백업용 소스코드

'개발 > 기타' 카테고리의 다른 글

'개발/기타' Related Articles

티스토리툴바