실시간 차트 – 스무디(smoothie)

스무디(smoothie.js)를 사용하여 스트리밍 데이터에 대한 실시간 차트를 그려보자.

실시간 차트가 무엇인지 먼저 보고 싶다면, 아래의 링크를 보자.

http://smoothiecharts.org/examples/example1.html

스무티 차트(Smoothie Chart)는 실시간으로 라인 차트를 부드럽게 표시할 수 있는 라이브러리로, 사용법이 매우 간단한다.

먼저 smoothie.js를 다운로드 하여 자신의 웹 프로젝트로 추가하자.

smoothie.js를 자바스크립트에 포함한다

canvas 객체를 생성한다

canvas에 SmoothieChart 객체를 연결한다

데이터를 추가한다

TimeSeries.append(timestamp, value)

  • timestamp
    데이터를 표시할 시간(X축)
  • value
    데이터의 값(Y축). 임의의 숫자값.
    value의 최소값과 최대값을 기반으로 차트를 자동으로 축소/확대한다.

지연시간 추가

지금까지 만든 차트에는 약간의 문제가 있다. 다음 번 데이터의 값을 알기 전까지는 차트에 표시할 수 없다. 따라서 차트가 연속적으로 움직인다기 보다는, 약간 점프하는 것 처럼 보인다.

이 문제를 해결하기 위해, 차트에 약간의 지연시간을 추가하자. 따라서 라인을 다음 번 데이터가 전달된 후 라인을 그리도록 만들어 보자.

지연 시간은 SmoothieChart.streamTo()를 호출할 때 추가할 수 있다.

색깔 지정하기

스무디는 라인과 배경의 스타일을 변경할 수 있는 API 또한 제공한다.

실행하기

여기에서는 표시할 수 없지만. 실행 해보면 아래와 같은 차드가 움직이는 것을 확인할 수 있다.

smoothie

 

Leave a Reply

Your email address will not be published. Required fields are marked *