chart.jsでのリアルタイム表示において非同期処理がわからない

前提・実現したいこと

http://nagix.hatenablog.com/entry/2017/07/10/081553
上記のサイトを見ながらリアルタイム表示のグラフを書きたいと思っています。
非同期でバッファに入れていく場合にはどのようにすればいいでしょうか。
今回でいうとget_y()はどこで実行すれば非同期にバッファに入れていくことができるのでしょうか。
わかる方がいましたらコメントお願いします。

該当のソースコード

ちなみにサーバから受け取ったjsonデータの中で以下のようにgasのみを取り出してます。

{
 gas: [hoge,hoge,hoge],
}

<script type="text/javascript" src="js/chartjs-plugin-streaming.js"></script>
　
 <script type="text/javascript">
    var buf = {};
    buf['gas'] = [[], [], []];

    
    function getGas() {
      return new Promise((resolve, reject) => {
        var req = new XMLHttpRequest();
        
        req.open("get", "http://192.168.***", true);

        //受信が成功した時に呼び出されるイベント
        req.onload = () => {
          //通信が正常に終了したかを確認する
          if (req.readyState === 4 && req.status === 200) {
            //resolve(req.responseType);
            resolve(req.response);
          } else {
            alert(req.status);
            reject(new Error(req.statusText));
          }
        };
        //受信が失敗した時に呼び出されるイベント
        req.onerror = () => {
          reject(new Error(req.statusText));
        };
        req.send(null); // HTTPリクエストの発行
      });
    }

    async function get_y() {
      var value;
      var gas = [];
      value = await getGas();
      value = JSON.parse(value);
      var i=0
      while(i<3){
        buf['gas'][i].push({
          x: Date.now(),
          y: value.gas[i]
        });
      }
    }

   

    var ctx = document.getElementById('myLineChart3').getContext('2d');

    get_y() //???????????

    var chart = new Chart(ctx, {
      type: 'line',
      data: {
        datasets: [{
          label: 'LPG',
          data: [],
          borderColor: 'rgb(255, 99, 132)',
          backgroundColor: 'rgba(255, 99, 132, 0.5)',
          lineTension: 0,
        }, {
          label: 'CO',
          data: [],
          borderColor: 'rgb(54, 162, 235)',
          backgroundColor: 'rgba(54, 162, 235, 0.5)',
          lineTension: 0,
        }, {
          label: 'SMOKE',
          data: [],
          lineTension: 0,
        }]
      },
      options: {
        title: {
          text: 'ガスデータ', // チャートタイトル
          display: true
        },
        scales: {
          xAxes: [{
            type: 'realtime' // X軸に沿ってスクロール
          }]
        },
        plugins: {
          streaming: {
            duration: 300000, // 300000ミリ秒（5分）のデータを表示
            onRefresh: function (chart) { // データ更新用コールバック
              Array.prototype.push.apply(
                chart.data.datasets[0].data, buf['gas'][0]
              );
              Array.prototype.push.apply(
                chart.data.datasets[1].data, buf['gas'][1]
              );
              Array.prototype.push.apply(
                chart.data.datasets[2].data, buf['gas'][2]
              );
              buf[id] = [[], [], []]; // バッファをクリア
            }
          }
        }
      }
    });

  </script>