[GeoServer] spring과 DB연동해서 차트 그리기

postgreSQL(db) 연동해서 차트 그리기

ServletController.java

	@GetMapping("/chart.do")
	public String showChart(Model model) {
	    List<Map<String, Object>> chartData = servletService.getChartData();
	    model.addAttribute("chartData", chartData);
	    
	    System.out.println(chartData);
	    
	    return "main/main";
	}

ServletService.java

	List<Map<String, Object>> getChartData();

ServletServiceImpl.java

	@Override
	public List<Map<String, Object>> getChartData() {
		return dao.selectList("servlet.getChartData");
	}

servlet-SQL.xml

	
	<select id="getChartData" resultType="HashMap">
            SELECT bjd_cd, SUM(used_kwh) AS total_used_kwh
            FROM "TB_CARBON_B3" 
            GROUP BY bjd_cd;
    </select>

main.jsp

<!------------------------------------------------------------->
<!------------------------ 차트 그리기 ------------------------>
<!------------------------------------------------------------->
<div id="chartContainer" style="width: 500px; height: 500px; margin-top:100px; margin-left:50px;">
	<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // JSP 코드를 사용하여 chartData를 가져옵니다.
    var chartData = [
        <c:forEach items="${chartData}" var="data">
            {
                bjd_cd: '<c:out value="${data.bjd_cd}"/>',
                total_used_kwh: '<c:out value="${data.total_used_kwh}"/>'
            },
        </c:forEach>
    ];

    var labels = chartData.map(function(item) { return item['bjd_cd']; }); // 'sgg_cd' 키로 변경
    var data = chartData.map(function(item) { return item['total_used_kwh']; }); // 'total_used_kwh' 키로 변경

	console.log(labels);
	console.log(data);
    
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Total Used kWh',
                data: data, 
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    },
                    gridLines: {
                        display: false
                    }
                }],
                xAxes: [{
                    gridLines: {
                        display: false
                    }
                }]
            }
        }
    });
</script>

 

 

 

-> sgg_cd를 sd_nm으로 나오도록 sql문 수정