[SpringBoot] Chart.js 를 이용하여 실시간 라인 차트 구현하기

이전글

https://greed-yb.tistory.com/270

[SpringBoot] Chart.js 를 이용하여 실시간 (반도넛)차트 구현하기

다운로드 및 적용방법은 이전글을 참고하길 바란다

 

 

 

controller

import com.sun.management.OperatingSystemMXBean;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.lang.management.ManagementFactory;
import java.util.HashMap;
import java.util.Map;

@RestController
public class SystemData {
    @GetMapping("/system/memoryData")
    public Map<String, Double> getMemoryData() {

        OperatingSystemMXBean mxBean = ManagementFactory.getPlatformMXBean(OperatingSystemMXBean.class);

        Map<String, Double> data = new HashMap<>();
        data.put("freeMemory", (double)mxBean.getFreePhysicalMemorySize()/1024/1024/1024);
        data.put("totalMemory", Math.ceil((double)mxBean.getTotalPhysicalMemorySize()/1024/1024/1024));

        return data;
    }

}

 

PC의 Memory 사용량을 실시간으로 조회하는 line 차트를 만들려고 한다

 

html

<!-- Thymeleaf 적용 -->
<script th:src="@{/bootstrap/vendor/chart2/chart.umd.js}"></script>
<script th:src="@{/bootstrap/js/chart.js}"></script>


<!-- Thymeleaf 미적용 -->
<script src="/bootstrap/vendor/chart2/chart.umd.js"></script>
<script src="/bootstrap/js/chart.js"></script>


<!-- line Chart -->
<div class="col-xl-4 col-lg-5">
    <div class="card shadow mb-4">
        <!-- Card Header - Dropdown -->
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Memory 사용량</h6>
        </div>
        <!-- Card Body -->
        <div class="card-body">
            <div class="chart-pie pt-4">
                <canvas id="memoryChart"></canvas>
            </div>
        </div>
    </div>
</div>

 

script 는 본인의 경로에 맞추면 되고

현재 Bootstrap 사용으로 인해 class에 명시된 값이 많은데

우리가 필요한 것은 <div> <canvas id="memoryChart"></canvas> </div> 다

 

<script th:src="@{/bootstrap/js/chart.js}"></script> 의

chart.js 는 다운로드한 js가 아니다

html 파일명을 chart.html 로 명하였고 js 파일도 chart.js 로 명한 것임으로 착각하면 안 된다

 

js

$(document).ready(function () {
    // 그리려고 하는 차트 canvas ID
    let ctx = $("#memoryChart");

    let data = {
        labels: [],
        datasets: [
            {
                label: '사용 중 메모리',
                data: [],
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
            }]
    };

    let options = {
        responsive: true,               // 반응형 , 캔버스 크기 조절
        maintainAspectRatio: false,     // 크기 조절될때 원본 캔버스 방향 비율 유지
        scales: {
            x: {
                type: 'category',
                time: {
                    unit: 'second'
                },
            },
            y: {
                beginAtZero: true,
                // max: 1
            }
        }
    };

    let memoryChart = new Chart(ctx, {
        type: 'line',
        data: data,
        options: options
    });

    setInterval(function () {
        // ajax 처럼 javascript 비동기 통신 방법
        // get 이 default
        fetch('/system/memoryData')
            .then(response => response.json())      // 서버 요청에 대한 응답이 왔을때 실행된다
            .then(data => {                         // 실행된 응답에 대한 데이터

                // 5초마다 라벨에 현재 시간을 출력한다
                const currentTime = new Date().toLocaleTimeString();
                memoryChart.data.labels.push(currentTime);

                memoryChart.data.datasets[0].data.push(Number(data.freeMemory));
                memoryChart.options.scales.y.max = data.totalMemory;

                if (memoryChart.data.labels.length > 5) {
                    memoryChart.data.labels.shift();
                    memoryChart.data.datasets[0].data.shift();
                }

                memoryChart.update();
            });
    }, 5000); // 5초마다 실행
});

 

 

 

TEST

5초마다 Memory 사용량을 조회하여 차트가 실시간으로 반영된다