Top 31 Chart Js Db 연동 The 131 Latest Answer

You are looking for information, articles, knowledge about the topic nail salons open on sunday near me chart js db 연동 on Google, you do not find the information you need! Here are the best content compiled and compiled by the https://chewathai27.com/to team, along with other related topics such as: chart js db 연동 Spring Chart js db 연동, Chart js 데이터 넣기, chart.js 동적 데이터, chart.js ajax 예제, chart.js 사용법, Chart js data: ( labels), Chart js Ajax update, JSP chart from database

jQuery 66 [ Chart JS #1 ] canvas 그래프 구현 라이브러리 – 선그래프 line graph 구현하기

[Spring/Ajax] Chart.js로 차트 만들기

Article author: cobook.tistory.com
Reviews from users: 25784 Ratings
Top rated: 3.8
Lowest rated: 1
Summary of article content: Articles about [Spring/Ajax] Chart.js로 차트 만들기 이번 프로젝트에서 측정한 거북목 DB를 사용자에게 시각화하여 보여주기 위해 차트를 만들게 됐습니다. 자료를 찾아보니까 Chart.js라는 사이트에서 … …
Most searched keywords: Whether you are looking for [Spring/Ajax] Chart.js로 차트 만들기 이번 프로젝트에서 측정한 거북목 DB를 사용자에게 시각화하여 보여주기 위해 차트를 만들게 됐습니다. 자료를 찾아보니까 Chart.js라는 사이트에서 … 안녕하세요 코북입니다. 이번 프로젝트에서 측정한 거북목 DB를 사용자에게 시각화하여 보여주기 위해 차트를 만들게 됐습니다. 자료를 찾아보니까 Chart.js라는 사이트에서 Javascript를 사용하여 간편하게 차..
Table of Contents:

즐기는 자

[SpringAjax] Chartjs로 차트 만들기 본문

티스토리툴바

Article author: blog.naver.com
Reviews from users: 28522 Ratings
Top rated: 4.8
Lowest rated: 1
Summary of article content: Articles about Spring에서 DB데이터를 Chart.js 로 시각화하기 : 네이버 블로그 결과적으로 내가 원하는 ‘Chart.js를 통해 DB 안의 데이터를 추출해 페이지에 차트로 표현할 테크닉’에 대한 정보를 찾기가 너무나 어려웠던 것이다. …
Most searched keywords: Whether you are looking for Spring에서 DB데이터를 Chart.js 로 시각화하기 : 네이버 블로그 결과적으로 내가 원하는 ‘Chart.js를 통해 DB 안의 데이터를 추출해 페이지에 차트로 표현할 테크닉’에 대한 정보를 찾기가 너무나 어려웠던 것이다.
Table of Contents:

악성코드가 포함되어 있는 파일입니다

작성자 이외의 방문자에게는 이용이 제한되었습니다

Spring에서 DB데이터를 Chart.js 로 시각화하기 : 네이버 블로그

Article author: snepbnt.tistory.com
Reviews from users: 19061 Ratings
Top rated: 3.6
Lowest rated: 1
Summary of article content: Articles about [ Node.js ] db 데이터를 chart.js에 적용하여 그래프 만들기 그러기에 추후 작업에 참고하기 위해 블로그에 기록을 해놓아야 겠다. 1. 숙지 사항. DB 는 MySQL 을 사용했다. node.js … …
Most searched keywords: Whether you are looking for [ Node.js ] db 데이터를 chart.js에 적용하여 그래프 만들기 그러기에 추후 작업에 참고하기 위해 블로그에 기록을 해놓아야 겠다. 1. 숙지 사항. DB 는 MySQL 을 사용했다. node.js … 처음에는 node.js 에서 진행을 하는 것이었기에 막연한 것도 있었다. 스프링으로는 진행을 해보았었기에 내가 찾고자 하는 레퍼런스도 쉽게 찾을 수 있고 큰 문제는 없었지만 node.js 로 진행을 하는 것은 내가 참..프로그래밍과 개인적인 경험을 기록하는 곳
Table of Contents:

[ Nodejs ] db 데이터를 chartjs에 적용하여 그래프 만들기

티스토리툴바

Article author: new93helloworld.tistory.com
Reviews from users: 18524 Ratings
Top rated: 4.9
Lowest rated: 1
Summary of article content: Articles about [NodeJS] Chart JS와 데이터 베이스 연결하기 – 1 이러한 시각화를 도와주는 라이브러리중 Chart JS가 있는데. 데이터베이스와 연동하여 현재의 데이터를 보여주는 예제를 작성해보자 … …
Most searched keywords: Whether you are looking for [NodeJS] Chart JS와 데이터 베이스 연결하기 – 1 이러한 시각화를 도와주는 라이브러리중 Chart JS가 있는데. 데이터베이스와 연동하여 현재의 데이터를 보여주는 예제를 작성해보자 … Chart JS와 데이터베이스 연결하기 – 1 데이터베이스의 자료들을 효과적으로 전달할수 있는 방법 중 하나는 시각화이다. 이러한 시각화를 도와주는 라이브러리중 Chart JS가 있는데 데이터베이스와 연동하여 현재..
Table of Contents:

공지사항

최근글

Ajax] Chart.js로 차트 만들기

안녕하세요 코북입니다. 이번 프로젝트에서 측정한 거북목 DB를 사용자에게 시각화하여 보여주기 위해 차트를 만들게 됐습니다. 자료를 찾아보니까 Chart.js라는 사이트에서 Javascript를 사용하여 간편하게 차트를 구현할 수 있게 오픈 소스를 제공하고 있었습니다. 세상에는 정말 많은 천재들이 있구나 하는 생각이 들었습니다. 사이트 링크와 작업 진행 순서입니다.

https://www.chartjs.org/

Chart.js Mysql DB VO MyBatis XML Mapper Mapper Interface Controller JavaScript/ajax

1. Chart.js로 차트 만들기

먼저 웹 페이지에서 제대로 보여지는지 확인하기 위해 chart.js를 통해 텅 빈 그래프를 만들었습니다. 잘 구현됩니다.

2. Mysql DB

이제 차트에 넣을 DB를 구성해보겠습니다. Posture 테이블은 pos_seq를 PK로 설정하고 회원 이이디를 FK로 설정했습니다. 회원 테이블은 회원이 PK입니다. 두 테이블은 1:N 관계입니다. 데이터 베이스를 만들었으면 테스트를 위해 DB에 미리 값을 넣어줍니다.

— 자세 테이블 CREATE TABLE POSTURE ( `POS_SEQ` INT UNSIGNED NOT NULL AUTO_INCREMENT COMMENT ‘자세 순번’, `POS_TYPE` VARCHAR(30) NOT NULL COMMENT ‘자세 종류’, `POS_TIME` DATE NOT NULL COMMENT ‘발생일자’, `POS_COUNT` INT UNSIGNED NOT NULL COMMENT ‘발생횟수’, `MB_ID` VARCHAR(30) NOT NULL COMMENT ‘회원아이디’, PRIMARY KEY (POS_SEQ) ); ALTER TABLE POSTURE COMMENT ‘자세정보’; ALTER TABLE POSTURE ADD CONSTRAINT FK_POSTURE_MB_ID_MEMERS_MB_ID FOREIGN KEY (MB_ID) REFERENCES MEMERS (MB_ID) ON DELETE RESTRICT ON UPDATE RESTRICT; — DB에 넣을 값 insert into POSTURE(POS_TYPE,POS_TIME,POS_COUNT,MB_ID) values(‘거북목’,’2021-10-27′,’48’,’adkim’); insert into POSTURE(POS_TYPE,POS_TIME,POS_COUNT,MB_ID) values(‘눈깜빡임’,’2021-10-27′,’2048′,’adkim’); insert into POSTURE(POS_TYPE,POS_TIME,POS_COUNT,MB_ID) values(‘거북목’,’2021-10-26′,’13’,’adkim’); insert into POSTURE(POS_TYPE,POS_TIME,POS_COUNT,MB_ID) values(‘눈깜빡임’,’2021-10-26′,’3060′,’adkim’);

3. VO 생성

만든 테이블 컬럼에 맞는 VO를 생성해줍니다. Lombok API를 사용하면 getter, setter, 생성자 없이 VO를 구성할 수 있어 좋은 것 같습니다.

package city.turtle.vo; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @Data @AllArgsConstructor @NoArgsConstructor public class GraphVO { private int pos_seq; private String pos_type; private String pos_time; private int pos_count; private String mb_id; }

4. MyBatis XML Mapper

테이블과 VO를 생성했으니 이제 차트에 넣을 값을 select 해줄 쿼리를 작성하면 됩니다. 사용자가 자신의 ID에 해당하는 데이터를 볼 수 있어야 하고 차트의 종류는 두 가지로 만들 계획입니다. 시간은 현재부터 7일 이전까지 보여줄 수 있도록 설정했습니다. BETWEEN A AND B와 DATE_SUB 문법을 사용했습니다. 이 xml파일은 mapper에서 설정한 namespace를 통해 Interface와 연결됩니다.

5. Mapper Interface

xml파일의 명령을 처리해 줄 Interface를 만들어줍니다. GraphVO 클래스의 pos_type과 mb_id 속성을 사용해 쿼리를 실행시킬 것이기 때문에 매개변수는 GraphVO 클래스로 설정했습니다. 결괏값은 7개의 값을 모두 담아줘야 하기 때문에 List로 리턴 값을 설정해줬습니다.

package city.turtle.service; import java.util.List; import city.turtle.vo.GraphVO; public interface GraphService { // 거북목 카운트 public List countTurtle(GraphVO vo) throws Exception; }

■ root-context.xml

새로 만든 패키지들을 scan할 수 있도록 root-context.xml에 mybatis-spring:scan코드를 입력해줍니다.

6. Controller

ajax방식으로 countTurtle.do가 요청되면 컨트롤러가 작동할 수 있도록 @RequestMapping 설정해주시고 json 데이터를 처리할 것이기 때문에 @ResponseBody를 사용합니다. 위에서 말한 것처럼 받아오는 값은 List이고 사용자에게 받은 GraphVO vo값을 넘겨줘서 countTurtle 메소드를 실행시킵니다. 객체 바인딩을 해야 할지 값 자체를 넘겨줄지 고민 중이어서 일단 두 방식 모두 작성했습니다.

package city.turtle.web; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import city.turtle.service.GraphService; import city.turtle.vo.GraphVO; @Controller public class GraphController { @Autowired private GraphService mapper; @RequestMapping(“/countTurtle.do”) public @ResponseBody List countTurtle(Model model, GraphVO vo) throws Exception { List turtle = mapper.countTurtle(vo); model.addAttribute(“turtle”, turtle); return turtle; } }

7. JavaScript / Ajax

이제 비동기 통신을 구현하기 위해 javascript 코드를 작성합니다. $(document).ready()는 문서가 준비됐을 때 매개변수로 넣은 Callback함수를 실행하라는 jQuery메소드입니다. 저는 차트를 만들어주는 메소드를 getGraph() 라는 이름으로 만들었습니다. getGraph() 메소드는 ajax를 실행시켜줍니다. url은 컨트롤러에서 설정한 countTurtle.do로 하여 컨트롤러에 요청을 보냅니다. 보낼 데이터는 xml에서 사용할 #{mb_id} 와 #{pos_type}이고 json방식으로 보내줍니다. 요청이 성공하면 콜백 함수는 data에 결괏값을 보내줍니다. 차트에서 보여줄 값을 리스트 형식으로 만들어줘야 하기 때문에 반복문을 통해서 넘어온 값을 push()를 사용해 미리 만들어둔 timeList, posList 리스트에 담아줍니다. 바로 이어서 chart.js에서 제공하는 코드를 통해 그래프를 그려줍니다. data.data는 차트로 보여줄 값을 의미하고, data.labels는 각 값들에 붙는 이름을 의미합니다. posList는 data, timeList는 labels로 설정했습니다. 요청에 실패할 경우 ‘실패’라는 메시지를 알림 창으로 띄우도록 했습니다.

구현 화면

구현 화면입니다. 최근 7일 간의 데이터가 들어간 그래프가 그려졌습니다. 파이 차트는 그냥 틀만 있는 상태입니다.

사용 기술

Spring MVC, JavaScript, JQuery, Ajax, EL

배운 점

Spring연결 부분에서는 초기에 Mapper와 XML파일의 이름을 다르게 만들어 오류가 발생했으나, 팀원과 함께 디버깅하면서 오류를 찾아낼 수 있었습니다. mysql 쿼리를 작성 부분에서는 DATE_SUB( , INTERVAL ) 메소드와 NOW()를 사용해 현재에서 시간을 더하거나 뺄 수 있었습니다. NOW()가 단순하게 현재 시간만을 나타내 주는 것이 아니라 응용해서 사용할 수 있다는 것을 배웠습니다. 리스트에 for문으로 만든 값들을 넣어서 차트를 만드는 식에 응용하면서 지역변수들이 메모리에 저장되는 범위에 대해 생각할 수 있는 시간이었습니다. success 콜백 함수 안에서 for문을 돌릴 수 있다는 것도 다시 한번 인지할 수 있었습니다.

본 글은 아래 링크의 내용을 참고하여 학습한 내용을 나름대로 정리한 글임을 밝힙니다.

Chart.js

https://www.chartjs.org/

https://nomalcy.tistory.com/23

https://stackoverflow.com/questions/19894952/draw-a-chart-js-with-ajax-data-and-responsive-a-few-problems-and-questionshttps://sun-p.tistory.com/116

mysql 시간 더하기, 빼기

https://extbrain.tistory.com/58

Ajax에서 for문 사용

https://integer-ji.tistory.com/263

Spring에서 DB데이터를 Chart.js 로 시각화하기

Spring Spring에서 DB데이터를 Chart.js 로 시각화하기 파스텔군 ・ URL 복사 본문 기타 기능 공유하기 신고하기 Spring 관련 프로젝트 수행 중에 Chart.js를 이용해 차트를 그려야 하는 일을 맡게 되었다. 처음에는 그저 데이터를 리스트로 만들어서 보내주면 차트가 알아서 해 줄것이라는 말을 듣고 구글링 좀 하면 금방 할 수 있지 않을까 했는데... 이게 장난이 아니었다. 데이터는 어떻게 차려줘야 할 것인지부터 이 데이터를 Java 단에서 무슨 방법으로 처리할 것이며, JavaScript로는 어떻게 넘겨줄 것이고 어떤 방법으로 활성화시켜 차트를 뽑게 만들 것인지 그 방법이 워낙에 까탈스럽고 헷갈렸기 때문이다. 구글링도 정말 야속했던 것이, chart.js 관련 키워드로 구글에 검색해보니 데이터를 어떻게 넘겨주고 받아왔는지에 대한 내용보다는 Chart.js 에 대한 Example 코드 정도나 parameter에 대한 정리가 대부분이었다. 기껏 코드를 통해 차트를 표현하는 방법을 설명한 글은 DB를 사용하지 않고 대괄호 안에 직접 데이터를 명시해 놓는 방법만을 사용하여 내가 해야하는 일과는 관련성이 적었다. 결과적으로 내가 원하는 'Chart.js를 통해 DB 안의 데이터를 추출해 페이지에 차트로 표현할 테크닉'에 대한 정보를 찾기가 너무나 어려웠던 것이다.(아니면 내가 아닌 다른 개발자들에게는 너무 쉬운 일이던가?) parameter나 options와 같은 것들은 Chart.js 공식 홈페이지에만 들어가봐도 알 수 있는 내용들이다! 나는 Chart.js를 사용해보지 못한 사람들을 위해 처음부터 어떻게 데이터를 설계하고 넘겨주는지가 궁금했단 말이다! 결국 구글에서는 이렇다 할 정보를 손에 넣지 못하고 삽질에 삽질을 거듭한 끝에 Chart.js를 이용해 페이지 View에 차트를 표현해 내는 것에 성공했다. 물론 나는 아직 배움이 부족하고, 실력이 좋지 않기 때문에 내가 한 방법보다 더 좋은 대안이 분명 존재할 것이다. 다만 나는 나와 같은 고민을 하고 있는 사람들이 이 글을 통해 그나마 시간을 아꼈으면 좋겠다는 생각에 이 글을 쓰고자 한다. 서론이 너무 길었는데, 종합적으로 내 DB에서 추출한 데이터를 Chart.js를 통해 페이지에 표현하는 흐름은 다음과 같다. DB에서 추출한 데이터를 List화 한다. ↓ 그 List를 Json 배열 객체에 담는다. ↓ model 객체를 통해 View에 넘겨준다. ↓ 받은 데이터를 JS에서 사용가능하도록 가공한다. ↓ Chart.js에서 제공하는 양식에 가공된 데이터를 넣는다. 1. DB에서 데이터 추출 우선 차트에 들어갈 데이터를 만들기 위해 DB에서 데이터를 추출해야 한다. Chart.js에서 제공하는 차트의 종류는 무척이나 많지만 일반 사용자 측면에서 자주 사용되는 pie, line, bar 차트는 대부분 "범주" : "값" 의 형태를 띈다. 예를 들어 유저별 방문자 수를 bar 차트(막대그래프)로 표현한다고 하면, x축을 유저, y축을 방문자 수로 설정하여 "유저" : "방문자 수" 의 형태로 데이터를 전달하는 것이다. DB에서 추출할 데이터도 이러한 모양새를 띄도록 추출하면 된다. 배경이 되는 Spring 프레임워크에서는 이러한 작업을 VO로 할 수도 있고, HashMap 객체를 만들어 수행할 수도 있으나 보통 VO를 많이 이용한다. SELECT log_userid, COUNT(*) AS CNT FROM (SELECT * FROM LOGTBL WHERE log_date >= #{fromDate} AND log_date <= #{toDate}) A GROUP BY log_userid ORDER BY cnt DESC; 위의 코드는 MyBatis를 이용한 코드이다. #{fromDate}와 #{toDate}는 그 안에 날짜를 넣어 해당하는 날짜에 포함되는 데이터만 뽑아올 수 있도록 한 것이다. 글이 너무 복잡해질까봐 이 곳에 VO를 전부 기재하지는 않겠지만, 해당 쿼리의 결과를 VO를 통해 받아오고 싶다면 VO에 당연히 변수 cnt와 그에 대한 Getter, Setter 메서드가 존재해야 할 것이다. 임의로 fromDate와 toDate에 날짜를 넣어 쿼리를 실행하면 그 결과는 다음과 같다. SELECT log_userid, COUNT(*) AS CNT FROM (SELECT * FROM LOGTBL WHERE log_date >= '2019-11-14 00:00:00' AND log_date <= '2019-11-18 23:59:59') A GROUP BY log_userid ORDER BY cnt DESC; 해당 아이디가 몇 번 접속했는가? 데이터의 형태는 사진과 다를 수 있다. 중요한 것은 차트에서 사용할 수 있는 데이터 형식인 "범주" : "값" 의 형태로 추출할 수 있으면 된다. 2. JAVA에서 해당 리스트를 Json객체로 옮겨 담자. 쿼리를 통해 원하는 데이터를 추출해 올 수 있다면 다음은 이 결과를 JSON 형태로 담는 것이다. 그런데 어떻게 할 것인가? 이 부분에서는 답이 여러가지가 있을 수 있지만, 내가 사용한 방법은 JAVA에서 JSON객체를 다루기 쉽도록 google에서 제공하는 GSON 라이브러리를 이용하는 것이다. GSON을 사용할 수 있도록 pom.xml에 다음과 같은 dependency를 추가하고, Maven Update를 수행해 라이브러리를 사용할 수 있도록 준비하자. com.google.code.gson gson 2.8.5 업데이트가 완료되었다면 Controller 내부에서 GSON객체를 사용할 수 있게 된다. 이제 코드를 보면서 하나하나 알아보자. List logNameList = ls.getLogNameList(dateMap); Gson gson = new Gson(); JsonArray jArray = new JsonArray(); Iterator it = logNameList.iterator(); while(it.hasNext()) { LogVO curVO = it.next(); JsonObject object = new JsonObject(); String userid = curVO.getLog_userid(); int cnt = curVO.getCnt(); object.addProperty("ID", userid); object.addProperty("Count", cnt); jArray.add(object); } String json = gson.toJson(jArray); model.addAttribute("json", json); 첫 줄의 코드는 Spring을 사용해 본 사람이라면 쉽게 이해가 될 것이다. Service객체에서 아까전 쿼리를 실행하여 결과를 받아오는 코드이기 때문이다. 위의 사진에서 보았던 log_userid와 cnt가 담겨있는 리스트라고 보면 된다. 우선 JSON으로 가공하기 위해 빈 GSON객체를 하나 생성했다. 그리고 JSON형태로 여러개의 데이터를 담기 위해 JsonArray 객체도 하나 생성했다. 다음 등장하는 Iterator는 Java를 다루어보았으면 어렵지 않게 알 수 있다. List는 for문 사용이 불가능하기 때문에 반복자를 얻어야 한다는 이야기는 자주 들어보았을 것이기 때문이다. 따라서 우리가 추출하고자 하는 데이터가 담겨있는 List의 반복자를 얻었고, While문을 통해 데이터를 추출, JSON 형태로 가공하고 있다. While문 안의 로직은 리스트에 담긴 하나하나의 VO가 갖는 log_userid값과 cnt를 추출하여 각각의 변수에 임시로 넣어두었다가 그 값을 JsonObject에 addProperty 메소드를 통해 추가하고, 그 결과 완성된 JsonObject를 JsonArray에 추가하는 작업이다. 결과적으로 위의 쿼리 결과가 담긴 리스트를 통해 While문의 코드를 모두 실행하면 다음과 같은 JSON 배열 객체가 생긴다. [{"ID" : "admin", "Count" : 71}, {"ID" : "awdawd", "Count" : 60}, {"ID" : "abcde", "Count" : 58}] 위와 같은 결과를 GSON이 제공하는 toJson 메소드를 사용하여 만들어둔 JsonArray 객체를 실제로 사용가능한 JSON 데이터 형태로 만든다. 특이하게도 JAVA에서는 이 데이터를 String으로 처리한다.(출력시켜보면 위의 결과와 동일할 것이다.) 만들어진 JSON 데이터를 model 객체를 통해 View로 보내주면 JAVA에서 할 일은 끝난다. 3. View에서 만든 JSON 데이터를 받아오자. 만든 JSON데이터가 model 객체를 통해 넘어왔을 것이다. 이를 JavaScript에서 받아 처리해야 한다. 이상한 오류가 생기지 않도록 차트를 사용하려고 하는 jsp파일과 같은 View 페이지에 Chart.js에 관한 파일들의 CDN 주소 혹은 로컬 시스템 내 경로설정을 제대로 해주었는지 확인하자. Spring 프로젝트는 jsp를 사용하기 때문에 jstl문법을 사용할 수 있도록 설정해두는 것도 잊지 말아야 한다. 생각 외로 놓치기 쉬운 부분이다. var jsonData = ${json} var jsonObject = JSON.stringify(jsonData); var jData = JSON.parse(jsonObject); var labelList = new Array(); var valueList = new Array(); var colorList = new Array(); for(var i = 0; i유저별 그래프
결과 화면은 다음과 같다. 각각의 영역에 마우스를 올리면 해당 값이 얼마나 되는지 확인이 가능하고, 위에 나타난 범주를 클릭하면 해당 범주를 포함시킬 것인지 시키지 않을 것인지에 대한 여부도 선택이 가능하다. 인쇄

[ 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 { 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

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

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

https://okky.kr/article/507766

반응형

So you have finished reading the chart js db 연동 topic article, if you find this article useful, please share it. Thank you very much. See more: Spring Chart js db 연동, Chart js 데이터 넣기, chart.js 동적 데이터, chart.js ajax 예제, chart.js 사용법, Chart js data: ( labels), Chart js Ajax update, JSP chart from database

Top 31 Chart Js Db 연동 The 131 Latest Answer

[Spring/Ajax] Chart.js로 차트 만들기

Spring에서 DB데이터를 Chart.js 로 시각화하기 : 네이버 블로그

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

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

[Chart.js] Chart.js – 메모 블로그

DB연동이 된 Chart(표) 사용하기 [막대그래프,ColumnChart]

JAVA / SPRING 프로젝트 삼삼하개(5) CHART.JS를 통해 데이터정보 시각화 — @Devme

Spring – Java 로 게시판 구글차트(chart.js) 기능 만들기

Ajax] Chart.js로 차트 만들기

Spring에서 DB데이터를 Chart.js 로 시각화하기

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

Leave a Comment Cancel reply