Skip to content

Chartjs-plugin-streaming

Chart.js plugin for live streaming data

Gettings started

설치: 

yarn add chartjs-plugin-streaming

날짜 어뎁터를 추가해야 한다. 다음 세 가지 중 선택하여 알아서 yarn add {plugin} 하자:

다음과 같이 임포트: 

import {Chart} from 'chart.js';
import 'chartjs-adapter-luxon';
import ChartStreaming from 'chartjs-plugin-streaming';

Chart.register(ChartStreaming);

Pause 

chart.options.plugins.streaming.pause = true;
chart.update();

Configuration

아래의 세가지 방법으로 설정 가능. 우선 순위대로 평가된다.

  1. per axis: options.scales[scaleId].realtime.*
  2. per chart: options.plugins.streaming.*
  3. globally: Chart.defaults.plugins.streaming.*

For example: 

// Change default options for ALL charts
Chart.defaults.set('plugins.streaming', {
  duration: 20000
});

const chart = new Chart(ctx, {
  options: {
    plugins: {
      // Change options for ALL axes of THIS CHART
      streaming: {
        duration: 20000
      }
    },
    scales: {
      x: {
        type: 'realtime',
        // Change options only for THIS AXIS
        realtime: {
          duration: 20000
        }
      }
    }
  }
});

내부 버퍼 확인 

  onRefresh(chart: Chart) {
    for (const item of this.items) {
      const name = item.name.toString();
      const uid = item.uid.toString();
      const label = name ? name : uid;
      const value = this.getSensorValue(item);
      const data = {x: Date.now(), y: value};

      const dataset = chart.data.datasets.find(dataset => dataset.label == label);
      if (typeof dataset !== 'undefined') {
        dataset.data.push(data);
        console.log(`${label} dataset length: ${dataset.data.length}`);
      }
    }
  }

onRefresh에서 dataset.data.length 를 확인해 보면 13~14 개만 고정적으로 있더라... 그래서 계속 push 해도 상관 없음.

See also

Favorite site