Smoothie Charts는 실시간으로 변하는 데이터를 HTML5 canvas에 부드럽게 그려 주는 자바스크립트 차트 라이브러리입니다. 서버 모니터링 값, 센서 데이터, 로그 발생량처럼 일정 간격으로 추가되는 시계열 데이터를 간단히 시각화할 때 유용합니다.
기본 사용 예제
아래 예제는 500ms마다 임의의 값을 TimeSeries에 추가하고, SmoothieChart가 해당 데이터를 canvas에 계속 스트리밍하도록 설정한 코드입니다. 핵심은 series.append(timestamp, value)로 데이터를 넣고, chart.streamTo(canvas, delay)로 차트를 화면에 연결하는 부분입니다.
Example 1.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/../smoothie.js"></script>
<script type="text/javascript">
// Randomly add a data point every 500ms
var random = new TimeSeries();
setInterval(function() {
random.append(new Date().getTime(), Math.random() * 10000);
}, 500);
function createTimeline() {
var chart = new SmoothieChart();
chart.addTimeSeries(random, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4 });
chart.streamTo(document.getElementById("chart"), 500);
}
</script>
</head>
<body onload="createTimeline()">
<p>The <em>hello world</em> of <a href="/../">Smoothie Charts</a>. View source.</p>
<canvas id="chart" width="400" height="100"></canvas>
</body>
</html>
차트 스타일 지정
SmoothieChart 생성 시 옵션을 넘기면 배경, 그리드, 라벨 등의 표시 방식을 조정할 수 있습니다. 또한 addTimeSeries의 두 번째 인자로 선 색상, 두께 등을 지정할 수 있습니다.
Example 2.
- JavaScript
var chart = new SmoothieChart({grid:{fillStyle:'#fcfcf5'}}),
canvas = document.getElementById('smoothie-chart'),
series = new TimeSeries();
chart.addTimeSeries(series, {lineWidth:2,strokeStyle:'#b82f1a'});
chart.streamTo(canvas, 500);
- HTML
<canvas id="smoothie-chart" width="1000" height="200">
확인할 점
smoothie.js가 먼저 로드되어야SmoothieChart와TimeSeries를 사용할 수 있습니다.canvas의id와 자바스크립트에서 찾는 ID가 일치해야 합니다.- 실제 데이터로 테스트할 때는
setInterval안에서 Ajax, WebSocket, 서버 이벤트 등으로 받은 값을series.append(new Date().getTime(), value)형태로 추가하면 됩니다.