[javascript] Chartist에서 AJAX를 사용하여 동적으로 데이터 가져오기

01 Dec 2023

javascript

좋은 데이터 시각화 도구로 알려진 Chartist는 간단한 구문과 사용자 친화적인 API로 인해 많은 개발자들에게 인기가 있습니다. 이번 튜토리얼에서는 Chartist와 AJAX를 결합하여 동적으로 데이터를 가져오고 그래프를 업데이트하는 방법을 알아보겠습니다.

1. Chartist 설치하기

먼저 Chartist를 설치해야 합니다. npm을 사용할 경우 아래의 명령어를 실행하여 설치할 수 있습니다.

npm install chartist

또는 다음과 같이 체이닝된 CDN 링크를 HTML 파일에 추가할 수도 있습니다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chartist/dist/chartist.min.css">
<script src="https://cdn.jsdelivr.net/npm/chartist"></script>

2. AJAX를 사용하여 데이터 가져오기

AJAX를 사용하여 외부 데이터를 가져오기 위해 XMLHttpRequest 객체를 사용할 것이며, 데이터를 그래프에 업데이트하기 위해 updateChart() 함수를 작성할 것입니다. 아래는 간단한 예제 코드입니다.

function updateChart() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState === 4 && xhttp.status === 200) {
      var data = JSON.parse(xhttp.responseText);
      // 데이터 처리 및 그래프 업데이트 로직 작성하기
    }
  };
  xhttp.open("GET", "https://example.com/data", true);
  xhttp.send();
}

위의 코드에서, xhttp.open() 메서드를 통해 데이터를 가져올 URL을 지정하고, xhttp.send() 메서드를 호출하여 데이터 요청을 보냅니다.

3. 데이터 처리 및 그래프 업데이트하기

이제 데이터를 가져와서 그래프를 업데이트하는 로직을 작성해야 합니다. Chartist는 데이터를 배열 형식으로 사용하며, 각 항목은 {x, y} 형식으로 구성되어야 합니다.

function updateChart() {
  // ...이전 코드 생략...
  
  var data = JSON.parse(xhttp.responseText);
  var chartData = {
    labels: data.map(function(item) {
      return item.x;
    }),
    series: [
      data.map(function(item) {
        return item.y;
      })
    ]
  };
  
  new Chartist.Line('.ct-chart', chartData);
}

위의 코드에서, data 변수는 가져온 데이터를 파싱하여 저장하고, chartData 변수는 Chartist가 사용할 형식으로 데이터를 변환합니다.

마지막으로, new Chartist.Line('.ct-chart', chartData)를 호출하여 .ct-chart 클래스를 가진 요소에 그래프를 생성합니다.

4. 전체 코드

아래에 전체 코드를 제시합니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chartist/dist/chartist.min.css">
  <script src="https://cdn.jsdelivr.net/npm/chartist"></script>
</head>
<body>
  <div class="ct-chart"></div>

  <script>
    function updateChart() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState === 4 && xhttp.status === 200) {
          var data = JSON.parse(xhttp.responseText);
          
          var chartData = {
            labels: data.map(function(item) {
              return item.x;
            }),
            series: [
              data.map(function(item) {
                return item.y;
              })
            ]
          };
          
          new Chartist.Line('.ct-chart', chartData);
        }
      };
      xhttp.open("GET", "https://example.com/data", true);
      xhttp.send();
    }

    updateChart();
  </script>
</body>
</html>

결론

이 튜토리얼에서는 Chartist와 AJAX를 사용하여 동적으로 데이터를 가져오고 그래프를 업데이트하는 방법을 알아보았습니다. 이를 통해 웹 애플리케이션에서 동적 데이터 시각화를 효과적으로 구현할 수 있습니다. Chartist와 AJAX의 다양한 옵션과 기능을 알아보고, 사용 사례에 맞게 적용해 보세요.