[ Node.js ] db 데이터를 chart.js에 적용하여 그래프 만들기

 

처음에는 node.js 에서 진행을 하는 것이었기에 막연한 것도 있었다.

스프링으로는 진행을 해보았었기에 내가 찾고자 하는 레퍼런스도 쉽게 찾을 수 있고 큰 문제는 없었지만

node.js 로 진행을 하는 것은 내가 참고할만한 레퍼런스도 많이 찾기가 힘들었다는 문제도 있었다. 

 

그러기에 추후 작업에 참고하기 위해 블로그에 기록을 해놓아야 겠다.

 

 

 

 

1. 숙지 사항

---

• DB 는 MySQL 을 사용했다.
• node.js 에 MVC 모델을 적용했음
• 데이터를 전달하는 방식은 POST 방식
• Node.js 와 MySQL 은 이미 연결을 했다고 가정한다
• chart.js 는 html 스크립트에서 링크를 불러와 동작하는 CDN 방식을 사용했다

 

 

 

 

 

2. Router 에서 데이터 가져오기

---

- 라우터란?
라이언트의 요청 경로(path)를 보고 이 요청을 처리할 수 있는 곳으로 기능을 전달해주는 역할을 한다. 
이러한 역할을 라우팅이라고 하는데, 애플리케이션 엔드 포인트 (URI)의 정의, 그리고 URI가 클라이언트 요청에 응답하는 방식을 의미한다. 

예를 들어, 클라이언트가 /users 경로로 요청을 보낸다면 이에 대한 응답 처리를 하는 함수를 별도로 분리해서 만든 다음 get()메소드를 호출하여 라우터로 등록할 수 있다.

 

스프링으로 보자면 controller 의 역할을 한다고 보면 좋을 것 같다.

 

mysql 에서 데이터를 가져와서 

컬럼을 Array 에 집어넣고 난 후, 집어 넣은 데이터를 json 형태로 넘기는 형식이다.

 

// post 데이터 요청
// mysql 함수는 미리 생성해서 require 를 통해 임포트 했다고 가정한다.

router.post("/2ndpage", (req, res) => {
        var resData = {};

        var query = "select sum(SCO)as SCO, from_unixtime(CREA, '%h:%i') as CREA from Ret group by (from_unixtime(CREA, '%h:%i'))";
        mysql.query(query, (err, rows) => {
            resData.sco = [];
            resData.time = [];

            if (err) throw err;
            if (rows[0]) {
                resData.result = "ok";
                rows.forEach(function(val) {
                    resData.sco.push(val.SCO);
                    resData.time.push(val.CREA);
                });
            } else {
                resData.result = "none";
                resData.sco = "";
                resData.time = "";
            }
            // console.log(resData);
            return res.json(resData);
        });
    }
});

// 위와 같이 라우팅에서 post 에 합쳐서 나타낼 수 있지만
// 분리해서 따로 변수를 만들어서 작성할 수도 있다

 

 

나의 경우에는 router 의 기능을 index 와 page.ctrl 로 분리했다

분리를 원하는 경우 아래 두개의 코드 블럭을 참고하여 코드를 작성하면 될 것 같다.

// index.js

//@ts-check

const express = require("express");
const router = express.Router();

const page_ctrl = require('./pages.ctrl')

// 기본 경로 요청 라우터
router.get("/", page_ctrl.output.home);

// post 데이터 요청
router.post("/2ndpage", page_ctrl.process.page_2nd); // 데이터 가져오기

 

// pages.ctrl.js

const mysql = require("../../config/db");

// POST 방식
const process = {
    page_2nd : (req, res) => {
        
        var resData = {};

        var query = "select sum(SCO)as SCO, from_unixtime(CREA, '%h:%i') as CREA from Ret group by (from_unixtime(CREA, '%h:%i'))";
        mysql.query(query, (err, rows) => {
            resData.sco = [];
            resData.time = [];

            if (err) throw err;
            if (rows[0]) {
                resData.result = "ok";
                rows.forEach(function(val) {
                    resData.sco.push(val.SCO);
                    resData.time.push(val.CREA);
                });
            } else {
                resData.result = "none";
                resData.sco = "";
                resData.time = "";
            }
            // console.log(resData);
            return res.json(resData);
        });
    }
};

module.exports = {
    process
}

 

 

 

 

 

3. 라우터에서 가져온 데이터를 웹상으로 띄우기

---

fetch( ) 함수를 이용하여 라우터에서 넘겨준 데이터를 웹상으로 띄웠다.

view 역할을 하는 html 과 view 를 제어하는 model 역할을 하는 스크립트를 분리해놓았다.

chart.js 의 경우에는 웹에서 동작하는 라이브러리이므로 model 역할을 하는 자바스크립트에 작성했다.

// html 과 직접 연결되는 model 의 역할을 맡고있는 js script 의 경우에는
// node 에서 사용하는 require( ) 함수를 못사용하므로 
// commonJS 방식을 사용하거나 html 에 chart.js 를 불러오는 cdn 방식을 사용해서 
// 하는 것을 추천한다

// 데이터 가져와서 chart.js 그래프 띄우기
sendAjax();

function sendAjax() {
    
    // 데이터 가져오기
    fetch ("/2ndpage", {
        method : "POST",
        headers : {
            "Content-Type" : "application/json"
        },
    }).then((res) => res.json())
      .then((res) => {

          // 객체
        var sco_obj = [];
        var time_obj = [];

          // 데이터 담기
        for (var i=0; i<res.score.length; i++){
            sco_obj.push(res.sco[i]);
            time_obj.push(res.time[i]);
        };    

        console.log(time_obj);
        console.log(sco_obj);

        //chart.js 옵션 setting
        var data = {
            labels : time_obj,
            datasets : [{
                label : 'sco',
                data : sco_obj
            }]
        }

        var options = {
            animation: {
                animateScale: true
            },
            responsive: false,
            scales: {
                yAxes: [
                    {
                        ticks: {
                            beginAtZero: true                                                                    
                        }
                    }
                ]
            }
        };

        //chart.js 그래프 띄우기
        var ctx = document.getElementById("myChart").getContext('2d');
        var myChart = new Chart(ctx, {
            type : 'bar',
            data : data,
            options : options
        });
      })
      .catch((err) => {
          console.log('차트 생성 중 에러 발생 : ' + err);
      });
}

 

sendAjax( ) 함수를 만들어서 html 이 실행되면 자동으로 chart.js 가 뜨도록 설정해두었다.

 

 

 

 

 

4. 결과물

---

아래와 같이 결과물이 나왔다

 

 

 

 

 

5. 참고 링크

---

아래 링크들을 참고하여 fetch( ) 를 이용함 node.js 스크립트를 만들었다

처음에는 이해가 안되어 그대로 따라해보기도 했었지만 결국에는 내가 이해를 하고 만들어야 되는 것 같다

 

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=aufcl4858&logNo=220988209559 

[NodeJS] Chart JS와 데이터 베이스 연결하기 - 1

 

https://tecoble.techcourse.co.kr/post/2021-04-26-mvc/

웹 MVC 각 컴포넌트 역할

 

https://www.daleseo.com/js-window-fetch/

[자바스크립트] fetch() 함수로 API 호출하기

 

https://okky.kr/article/507766

OKKY | chart js db 연동중