(javascript) Highchart 그래프 그리기

사내 솔루션 개발 중 실시간데이터와 DB에 쌓인 과거 데이터를 그래프 (chart)로 표현해야 하는 경우가 생겼다.

Highchart는 데이터를 series라는 배열에 넣어 차트를 그릴 수 있는 javascipt 라이브러리다.

 

사용법은 생각보다 간단하다. 미리 정의된 option 값들을 설정한뒤 코드 한줄이면 그래프를 알아서 그려준다.

 

예시를 보자.

let chartdata = (JSON.parse(data))['sensordataforchart'];    // data 는 ajax를 통해 서버에서 가져온 데이터이다.
if(chartdata.length==0){
	alert("No data");
	return ;
}
let seriesArr =[];
var arr = [];

for (let i = 0; i<chartdata.length;i++){
	if(!Number.isNaN(parseInt(chartdata[i].cnt_data))){
		arr.push([
			new Date(parseInt(chartdata[i].cnt_time)  ).getTime(),
			parseInt(chartdata[i].cnt_data)
		]);	
	}
}

let Options = {

        chart: {
        	zoomType: 'x',
        },
        plotOptions: {
        	series: {
        		dataLabels: {
        			enabled: false,       //y축의 값이 그래프에 표시될지 말지 설정
        		},
         	}
        },
        title: {
        	text: document.getElementsByName('listThingId')[0].innerText
        },

        xAxis: {
        	type: 'datetime',
        	//max : new Date()
        },
        tooltip: {
        	valueDecimals: 2,
        	crosshairs: true
        },

        series: [{
        	data: arr,
        	name:document.getElementsByName('listThingId')[0].innerText,
        	lineWidth: 0.5,
        }],

};

Highcharts.chart('collectiondataChrt',Options);    //collectiondataChrt는 html의 id값이다. 해당 id의 태그안에 그래프를 그린다.

필자의 경우 ajax 통신을 통해 서버에서 data를 가져와 해당 데이터를 처리하여 series에 넣어서 그래프를 그렸다.

option 안에 있는 series라는 배열은 그래프를 그릴 데이터가 들어가는데,

series 배열안에 json 형태로 데이터가 들어간다.

 

series 배열안에 data는 배열안에 y값만 들어가면 되는데, 필자의 경우 x값에 unixtimestamp를 함께 넣었다.

 

일반적인 series의 data =>  data : [ 10, 20, 30]

필자의 series의 data => data :  [[1607475599955,50] , [1607475599955, 60]]

 

option의 xAxis type이 'datetime'이므로 x축은 시간축이 되어 그려진다.

 

완성된 그래프는 아래와 같다.

 

Highchart에는 수많은 옵션들이 존재한다. 

필요에 따라 API 문서를 찾아보며 필요한 옵션들을 설정하면 상당히 그럴싸한 그래프를 그릴 수 있다.

 

다음 포스팅에서는 실시간으로 들어오는 데이터를 

addpoint라는 Highcart 펑션을 이용해 그려보는 내용을 다루겠다.