본문 바로가기
개발

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

by 마스터누누 2017. 4. 19.
728x90
반응형

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




데이터베이스의 자료들을 효과적으로 전달할수 있는 방법 중 하나는 시각화이다.

이러한 시각화를 도와주는 라이브러리중 Chart JS가 있는데 

데이터베이스와 연동하여 현재의 데이터를 보여주는 예제를 작성해보자




1
2
3
4
5
6
CREATE TABLE `scoreboard` (
`num` int NOT NULL auto_increment,
`uid` varchar(10) NOT NULL,
`score` int NOT NULL,
PRIMARY KEY (`num`)
);
cs


우선, 데이터베이스를 만든다.

예제 소스는 현재의 스코어를 저장해서 출력한다고 가정한다.





임의의 데이터를 삽입한 상태이다.

여기까지 했으면 정적 페이지 생성으로 넘어가자




1
2
<canvas id="myChart" width="400" height="300"></canvas>
<button id="sendAjax">button</button>
cs


HTML작업을 위해 main.html을 생성했다.

HTML파일에는 위와 같이 Ajax요청을 할 버튼과

차트를 그릴 캔버스 하나만 넣어준다.

그리고 <head>부분에 Chart JS의 스크립트를 넣어주는데 


https://cdnjs.com/libraries/Chart.js

여기에 들어가면 가장 최신버전의 링크를 찾을수 있다.

복사해서 붙여넣기 해주자




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
var data = {
    labels: [
        "1", "2", "3", "4", "5"
    ],
    datasets: [
        {
            label: 'Your Score',
            data: [
                0, 0, 0, 0, 0
            ],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }
    ]
};
cs


HTML 작업을 마쳤으면 main.js를 작성한다.

우선 차트에 들어갈 데이터를 data 객체를 생성해서 값을 넣어준다.

예제에서 사용된 데이터 셋은 다음과 같다.


label : 제목

data : 차트에 들어가는 데이터의 값

backgroundColor : 막대 그래프의 배경색

borderColor : 막대 그래프를 감싸는 border의 색

borderWidth: border의 넓이




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var options = {
    animation: {
        animateScale: true
    },
    responsive: false,
    scales: {
        yAxes: [
            {
                ticks: {
                    beginAtZero: true
                }
            }
        ]
    }
};
cs


다음은 차트에 추가 옵션값이다.

animation 효과를 넣기 위해 true값으로 설정해 준다.

이때 yAxes 설정을 해주지 않으면 애니메이션 효과가 바닥에서 부터가 아닌 가운데에서 시작되므로

scales: yAxes값을 beginAtZero로 꼭 설정해 줘야한다.

animation효과를 넣지 않으려면 false로 설정해 주면된다.


또한 가장 중요한 옵션으로, 차트가 canvas의 크기에 맞추어 생성되기 위해

responsive을 false로 설정해준다.

해당 설정값이 없으면, chart가 canvas와 상관없이 사이즈가 엄청 커진다.




1
2
3
4
5
6
var ctx = document.getElementById("myChart").getContext('2d');
var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});
cs


마지막으로 Canvas를 선택 후 해당 태그에 차트를 만들어 주면 완성이다.

type을 변화 시킴으로써 차트의 모양을 바꿔 줄수 있다.

data와 options에서는 위에서 설정해준 값을 넣어준다.




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
var button = document.getElementById("sendAjax")
 
button.addEventListener("click", function() {
    sendAjax('http://localhost:3000/');
})
 
function sendAjax(url) {
    var oReq = new XMLHttpRequest();
 
    oReq.open('POST', url);
    oReq.setRequestHeader('Content-Type', "application/json") // json 형태로 보낸다
    oReq.send();
 
    oReq.addEventListener('load', function() {
        var result = JSON.parse(oReq.responseText);
        var score = result.score;
        var comp_data = data.datasets[0].data;
 
        for (var i = 0; i < comp_data.length; i++) {
            comp_data[i] = score[i];
        }
 
        data.datasets[0].data = comp_data;
        myBarChart.update();
    })
}
cs


클라이언트 정적페이지의 마지막으로, button 기능이다.

버튼을 누르면 ajax요청을 하고 데이터베이스의 값을 받아온다.

받아온 데이터를 기존 데이터 값과 비교하여 업데이트를 해주면서 차트 기능은 끝이난다.




예제코드

반응형
저작자표시

'개발' 카테고리의 다른 글

[SQL] Database 정보를 git에 올라가지 않게 하기  (0) 2017.04.19
[NodeJS] Chart JS와 데이터 베이스 연결하기 - 2  (4) 2017.04.19
[Arduino] 시리얼 통신  (0) 2017.04.19
[Arduino] Interrupt 인터럽트  (0) 2017.04.19
[Arduino] LED ON/OFF 2  (0) 2017.04.19

관련글

댓글

티스토리툴바