Chart.js - Spring 연동
출처 : Chart.js - Spring 연동
JSONChartJS 클래스
package com.intel4.json;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.intel4.service.QuestionListService;
import com.intel4.util.BeanUtils;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
public class JSONChartJS extends JSONData {
@Override
public JSONObject getJSON(HttpServletRequest request, HttpServletResponse response) {
String subcmd = request.getParameter("subcmd");
JSONObject jobj_data = null;
if (subcmd.equals("line")) {
jobj_data = getAddData(request, response);
}
return jobj_data;
}
private JSONObject getAddData(HttpServletRequest request, HttpServletResponse response) {
JSONArray datas = new JSONArray();
JSONObject data1 = new JSONObject();
data1.put("month", "1월");
data1.put("pc", 100);
data1.put("monitor", 80);
datas.add(data1);
JSONObject data2 = new JSONObject();
data2.put("month", "2월");
data2.put("pc", 80);
data2.put("monitor", 70);
datas.add(data2);
JSONObject data3 = new JSONObject();
data3.put("month", "3월");
data3.put("pc", 70);
data3.put("monitor", 60);
datas.add(data3);
JSONObject data4 = new JSONObject();
data4.put("month", "4월");
data4.put("pc", 90);
data4.put("monitor", 100);
datas.add(data4);
JSONObject data5 = new JSONObject();
data5.put("month", "5월");
data5.put("pc", 40);
data5.put("monitor", 110);
datas.add(data5);
JSONObject result = new JSONObject();
result.put("datas", datas);
return result;
}
}
Line Chart
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html>
<head>
<title>Line Chart</title>
<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.12.0.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/chartjs/Chart.js"/>"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width: 80%">
<div>
<canvas id="canvas" height="350" width="600"></canvas>
</div>
</div>
<script>
var chartLabels = [];
var chartData1 = [];
var chartData2 = [];
var lineChartData = {
labels : chartLabels,
datasets : [ {
label : "월별 PC 판매량",
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 : chartData1
}, {
label : "월별 모니터 판매량",
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 : chartData2
} ]
}
function createChart() {
var ctx = document.getElementById("canvas").getContext("2d");
LineChartDemo = Chart.Line(ctx, {
data : lineChartData,
options : {
scales : {
yAxes : [ {
ticks : {
beginAtZero : true
}
} ]
}
}
});
}
try {
$.ajax({
type : 'POST',
url : "<c:url value="/json"/>",
dataType : 'json',
data : {
cmd : 'chart',
subcmd : 'line'
},
success : function(result) {
$.each(result.datas, function(inx, obj) {
chartLabels.push(obj.month);
chartData1.push(obj.pc);
chartData2.push(obj.monitor);
});
createChart();
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert('There is an error : method(group)에 에러가 있습니다.');
}
});
} catch (e) {
alert(e);
}
</script>
</body>
</html>실행결과
Bar Chart
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.12.0.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/chartjs/Chart.js"/>"></script>
<style>
canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
<body>
<div style="width:80%">
<div>
<canvas id="canvas" height="350" width="600"></canvas>
</div>
</div>
<script>
var chartLabels = [];
var chartData1 = [];
var chartData2 = [];
var lineChartData = {
labels : chartLabels,
datasets : [
{
label: "월별 PC 판매량",
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 : chartData1 ,
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
]
},
{
label: "월별 모니터 판매량",
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 : chartData2,
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
]
}
]
}
function createChart(){
var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx, {
type: 'horizontalBar',
data: lineChartData,
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
try {
$.ajax({
type : 'POST',
url : "<c:url value="/json"/>",
dataType : 'json',
data : {
cmd : 'chart',
subcmd : 'line'
},
success : function(result) {
$.each(result.datas, function(inx, obj) {
chartLabels.push(obj.month);
chartData1.push(obj.pc);
chartData2.push(obj.monitor);
});
createChart();
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert('There is an error : method(group)에 에러가 있습니다.');
}
});
} catch (e) {
alert(e);
}
</script>
</body>
</html>
실행결과
Pie Chart
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html>
<head>
<title>Pie Chart</title>
<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.12.0.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/chartjs/Chart.js"/>"></script>
<style>
canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width:80%">
<div>
<canvas id="canvas" height="350" width="600"></canvas>
</div>
</div>
<script>
var chartLabels = [];
var chartData1 = [];
var chartData2 = [];
var PieChartData = {
labels : chartLabels,
datasets : [
{
label: "월별 PC 판매량",
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 : chartData1 ,
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
]
}
/*,
{
label: "월별 모니터 판매량",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#aff",
pointHighlightFill : "#aff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : chartData2,
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
]
}
*/
]
}
function createChart(){
var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx, {
type: 'pie',
data: PieChartData,
options: {
responsive: true
}
});
}
try {
$.ajax({
type : 'POST',
url : "<c:url value="/json"/>",
dataType : 'json',
data : {
cmd : 'chart',
subcmd : 'line'
},
success : function(result) {
$.each(result.datas, function(inx, obj) {
chartLabels.push(obj.month);
chartData1.push(obj.pc);
chartData2.push(obj.monitor);
});
createChart();
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert('There is an error : method(group)에 에러가 있습니다.');
}
});
} catch (e) {
alert(e);
}
</script>
</body>
</html>실행결과
ejs.zip