C3jsでリアルタイムグラフ

結果

See the Pen C3js TimeSeries Realtime Graph by Nagitch (@nagitch) on CodePen.

解説

過去1分間の時間軸を表示する

軸の設定をtype: timeseries(時系列), max/minに現在秒, 一分前の秒にしておくと自動的に過去1分間の時間軸を表示してくれます。
一秒刻みでデータを登録して無理やりプロットする、みたいなトリックは使わなくて大丈夫です。
また 2021-01-20 19:47:35 のような表示にする＆1分前の計算のためにdayjsを使っていますが、同じ形になれば何を使っても問題ありません。

const timeNow = () => dayjs().format('YYYY-MM-DD HH:mm:ss');
const timeTail = () => dayjs().subtract(1, 'm').format('YYYY-MM-DD HH:mm:ss');

const chartAxis = {
  x: {
    type: 'timeseries',
    min: timeTail(),
    max: timeNow(),

また等間隔に満遍なく軸表示するために fit: true, 表示を倒して見やすくするため rotate:-50 を指定します。

    tick: {
      fit: true,
      rotate: -50,
      format: '%Y-%m-%d %H:%M:%S',
    }

時間軸(表示範囲)の更新

時間軸の更新には axis.min(), axis.max() 関数を使います。直接値を書き換えるだけだと反映されません。 load() を叩いても更新されません。

setInterval(() => {
  chart.axis.min({x: timeTail()});
  chart.axis.max({x: timeNow()});
  ...
}, 1000)

サンプルでは毎秒新しいデータをプロットしていますが、歯抜けになっても大丈夫です。
好きなタイミングでどの秒にデータを入れても正しくプロットされます。

  chartData.columns[0].push(timeNow());
  chartData.columns[1].push(Math.random());
  chart.load({columns: chartData.columns});