[Web/SmoothieCharts] 스무디차트(SmoothieCharts) 살펴보기

스무디차트

스무디차트(SmoothieCharts)는 스트리밍 데이터, 지표를 실시간 출력하기 위한 JS Plugin입니다. 별도의 설치가 필요 없으며, SmoothieCharts에서 제공하는 smoothie.js 파일을 프로젝트에 복사하여 바로 사용 가능합니다.

스무디차트는 MIT 라이센스에 따라서 무료로 이용 할 수 있으며, 스트리밍 데이터를 쉽고 빠르게 차트화 할 수 있습니다.

튜토리얼

SmoothieCharts를 사용하기 위해서 가장 먼저 smoothie.js를 다운로드 받아야합니다. 공식 배포 링크를 통해서 파일을 다운로드 받습니다. 다운로드 받은 smoothie.js 파일을 프로젝트의 static resource에 추가합니다. 이어서 공식 튜토리얼에 따라서 다음을 진행합니다.

가장 먼저 빈 html 파일을 생성하고, smoothie.js 파일을 include합니다.

<script type="text/javascript" src="[경로]/smoothie.js"></script>

html 파일에서 canvas element를 추가합니다.

<canvas id="mycanvas" width="400" height="100"></canvas>

빈 js 파일을 생성 후 include하고, SmoothieChart() 객체를 생성하여 steamTo 함수에 canvas element를 파라미터로 전달합니다.

var smoothie = new SmoothieChart();
smoothie.streamTo(document.getElementById("mycanvas"));

프로젝트를 실행하고 웹 페이지를 열면 아래 사진과 같은 빈 차트가 스트리밍 되는 것을 확인 할 수 있습니다.

스트리밍 데이터를 입력하려면 다음과 같이 처리합니다. TimeSeries 객체는 일련의 스트리밍 데이터 입력을 위한 파이프라인입니다. 예시에서는 두 개의 파이프라인을 생성하여 차트에 추가하고 있습니다.

// Data
var line1 = new TimeSeries();
var line2 = new TimeSeries();
	
// Add a random value to each line every second
setInterval(function() {
	line1.append(new Date().getTime(), Math.random());
	line2.append(new Date().getTime(), Math.random());
}, 1000);

// Add to SmoothieChart
smoothie.addTimeSeries(line1);
smoothie.addTimeSeries(line2);

다시 웹 페이지를 열면 1000ms 간격으로 무작위 데이터가 추가(예시에서는 값을 랜덤 생성하지만, 실제로는 웹 소켓 등을 통해 데이터를 로드합니다)되면서 두 개의 곡선이 스트리밍 되는 것을 확인 할 수 있습니다.

예시가 실행되는 모습을 자세히 보면, 데이터가 1초에 한 번씩 생성되기 때문에 스트리밍되는 차트의 끝 부분에 단절이 발생하는 것을 알 수 있습니다. 차트는 실시간으로 스트리밍되지만, 데이터가 아직 생성되지 않았기 때문입니다.

처음 작성했던 streamTo 함수를 주석 처리하고, 아래 코드와 같이 delay를 지정 할 수 있습니다. 딜레이의 단위는 ms입니다. 

// smoothie.streamTo(document.getElementById("mycanvas"));

// Add delay to SmoothieChart
smoothie.streamTo(document.getElementById("mycanvas"), 1000 /*delay*/);

웹 페이지를 다시 열면 스트리밍이 단절되지 않고 자연스럽게 표현되는 것을 확인 할 수 있습니다.

차트의 배경, 격자, 선에 색상 등의 스타일을 추가하기 위해 후크(hook)를 제공합니다.

// var smoothie = new SmoothieChart();
	
var smoothie = new SmoothieChart(
{
	grid: 
	{ 
		strokeStyle:'rgb(125, 0, 0)', 
		fillStyle:'rgb(60, 0, 0)',
		lineWidth: 1, 
		millisPerLine: 250,
		verticalSections: 6, 
	},
	labels: 
	{
		fillStyle:'rgb(60, 0, 0)' 
	}
});

...

// Add to SmoothieChart
// smoothie.addTimeSeries(line1);
// smoothie.addTimeSeries(line2);
	
smoothie.addTimeSeries(line1, { strokeStyle:'rgb(0, 255, 0)', fillStyle:'rgba(0, 255, 0, 0.4)', lineWidth:3 });
smoothie.addTimeSeries(line2, { strokeStyle:'rgb(255, 0, 255)', fillStyle:'rgba(255, 0, 255, 0.3)', lineWidth:3 });

웹 페이지를 다시 열면 다음과 같이 차트 스타일 변경을 확인 할 수 있습니다.