오징옆의 IT

오늘은 하이차트를 통해 실시간으로 그래프를 그려보고자 한다.

<div id="container"></div>

let chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      defaultSeriesType: 'spline',
    },
    title: {
      text: 'temper'
    },
    xAxis: {
      type: 'datetime',
      tickPixelInterval: 200,
      maxZoom: 20 * 1000
    },
    yAxis: {
      minPadding: 0.2,
      maxPadding: 0.2,
      title: {
        text: 'temper',
        margin: 80
      }
    },
    series: [{
      name: 'test_11170',
      data: []
    }]
  });

일단 기본적으로 차트 컨테이너를 그린다.

mqtt 는 pahomqtt를 사용했다. mqtt에 대한 설정 및 사용은 본 글의 주제를 벗어나므로

다른글을 참고하거나, 기회가 된다면 추후 작성하겠다.

설정법을 몰라도 아래 코드를 보면 간단하게 이해가 될 것이라고 생각한다.

this.host = hostip.substring(7); 
this.wsport = 9001;
this.clientId = "mqttclient!!!"+generate();
------------------------------------------
let mqtt = new Paho.MQTT.Client(this.host, this.wsport, this.clientId)
let connectOptions = {
	onSuccess : function()
	{
         console.log("success");
	},
	useSSL: false,
	timeout: 3,
	mqttVersion: 4,
	onFailure: function(msg) 
	{
		console.log("fail");
	},
};
mqtt.connect(connectOptions);
mqtt.subscribe("topic/topic");
mqtt.onMessageArrived = function( message )
{			
	if(message.retained==true){
		return;
	}
	mqttMessage(message.payloadString);
}.bind(this);

function mqttMessage(value) {
    let point = {x:new Date(date).getTime(), y: value, marker: {enabled : false}};
    chart.series[0].addPoint(point, true, false);
}

topic/topic 이라는 토픽을 구독하고

mqtt로 메세지를 받을때마다 mqttMessage라는 함수를 호출하고 

mqtt로 받은 값을 하이차트의 addpoint기능을 통해 그래프를 그린다.

필자가 개발한 실 서비스의 경우 서버단의 기계설비의 측정 데이터 등이 mqtt로 오면

해당 데이터 값을 파싱하고 실시간으로 데이터를 그리고 있다.

기존 코드를 간략하게 나타낸거라 중간중간 오타나 뎁스, 문법등이 맞지 않는 부분이 있을지도 모르겠다.

컨셉과 방법에 대한 설명이니 너그럽게 넘어가자!

사내 솔루션 개발 중 실시간데이터와 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 펑션을 이용해 그려보는 내용을 다루겠다.