Chart.js - Spring 연동

티스토리 뷰

Programming/Java

Chart.js - Spring 연동

파란크리스마스 2017. 3. 29. 20:05

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>

실행결과

저작자표시

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

C++ RetrievingFileUsingHttp

TAG more

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

글 보관함

티스토리 뷰

Chart.js - Spring 연동

티스토리툴바