(highchart) 실시간 그래프 / 차트 그리기 (mqttt 이용)

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

<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로 오면

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

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

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