파이널 프로젝트_Chart.Js를 활용한 대시보드

Chart.Js를 사용한 대시보드

 

 

 

DashBoardController

 

 

getTotalYesterday 메소드

 

 

DashBoardController -  getTotalYesterday 메소드는 

@RedpondrBody 어노테이션을 사용해서 List<DayTotalDto> 객체가 JSON 형식으로 반환하게 한다

 

( Service나 Mapper 클래스에서는 서로를 리턴하는 코드뿐이어서 따로 넣진 않겠다 )

 

SELECT * FROM (
	SELECT DAY_TOTAL_DATE AS dayTotalDate, DAY_TOTAL_PRICE AS dayTotalPrice
 	FROM BookHub.DAY_TOTAL
 	ORDER BY DAY_TOTAL_DATE DESC
 	LIMIT 7
 	) AS recent_data
 ORDER BY dayTotalDate ASC

 

 

getTotalYesterday 메소드에서 실행하는 쿼리문이다

 

 

getTotalYesterday 메소드 화면표시

 

 

매핑한 URL로 들어가면 정상적으로 json 형식으로 값을 보내고 있다

 

---

 

 

json 형식의 데이터를 Chart.JS를 사용하여 화면에 그래프값 표시

 

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
        $(document).ready(function (){
            getTotalYesterDay();
        });
        const ctx = document.getElementById('myChart');

function getTotalYesterDay() {
            // let dateList = [];
            // let valueList = [];

            $.ajax({
                url: "/dash/getTotalYesterday.do",
                type: "GET",
                dataType: "json",
                success: function (data) {
                    let chart = new Chart(ctx, {

                        type: "line",
                        data: {
                            // 표 아래 글씨
                            labels: [], // 'allCustomer'를 따옴표로 감싸서 문자열로 처리
                            datasets: [{
                                label : '매출액',
                                data: data,
                                borderColor: 'rgba(54, 162, 235, 1)',
                                backgroundColor: 'rgba(0, 255, 255, 1)',
                                borderWidth: 1
                            }]
                        },
                        options: {
                            parsing: {
                                xAxisKey: 'dayTotalDate',
                                yAxisKey: 'dayTotalPrice'
                            }
                        }
                    });
                },
                error: function () {
                    alert("Failed to fetch data from the server.");
                }
            });
        }

 

Chart.JS 를 화면에 띄우는 코드문

 

 

 

$.ajax 함수를 사용해서 비동기 방식으로 서버에 데이터를 요청한다

URL을 통해서 GET 방식으로 데이터를 받아오고, 요청이 성공하면 반환된 데이터는 dataTye : "json" 에 따라

JSON 형식으로 자동 변환된다

 

요청이 성공한걸 확인하면 success 콜백 함수가 실행되면서 함수 내에서 Chart 객체를 생성해서 차트를 그린다

 

 

차트의 종류는 'line' (차트의 종류는 굉장히 다양하다. Chart.JS 공식 홈페이지에서 확인할 수 있다)

데이터는 labels 와 datasets으로 구성

 

labels 배열에는 차트의 x축 라벨을 넣어준다.

그러나 x축 밑에 생기는 것이 아니라 날짜값 맨 왼쪽에 생겨서 내가 의도한 것과 다르게 화면이 표시되어 빈 배열로 했다

 

datasets 위 결과 사진에서 보여지는 것처럼 차트 위쪽에 어떤 색상이 무엇을 가르키는지 알게 해준다

 

data는 서버로부터 전달받은 JSON 데이터 그 자체를 사용한다.

여기서는 dayTotalDate, dayTotalPrice를 각각 x축과 y축 데이터로 사용한다

 

option 객체 내의 parsing 옵션을 통해서 설정할 수 있다

여기서 xAxisKey는 'dayTotalDate'으로, yAxisKey는 'dayTotalPrice'로 설정되어 있어, Chart.js가 각 객체의 해당 필드를 차트의 축으로 사용하게 한다

 

 

 

error 콜백 함수를 통해 데이터 요청이 실패할 경우 사용자에게 화면으로 알람을 표시한다

 

---