chart.jsを用いたリアルタイムでデータを表示するグラフの作成について
現在、chart.jsを使ってプログラムの作成をしていますが、期待通りの挙動になりません。
動作としては、毎秒特定のcsvファイルを読み込んで数値をロードし、その数値をリアルタイムの棒グラフ上に出力するものを想定していますが、以下のコードを実行したところcellsに燗するundefinedエラーが出力されてしまい動きません。
上記のようなグラフを実装するにはどうすればいいでしょうか、よろしくお願いします。
function csv2Array() {
var req = new XMLHttpRequest();
var filePath = 'logs/logdata.csv';
req.open('GET', filePath, true);
req.send(null);
req.onload = function () {
var tmp = req.responseText.replace(/\r?\n/g, '');
cells = tmp.split(',');
}
return cells;
}
function drawBarChart() {
// 4)chart.jsで描画
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [
{
label: 'RX-OK',
data: [
],
backgroundColor: '#FFBBBB'
},
{
label: 'TX-OK',
data: [
],
backgroundColor: '#BBBBFF'
}
]
},
options: {
scales: {
xAxes: [
{
type: 'realtime'
}
]
},
plugins: {
streaming: {
onRefresh: function (chart) {
csv2Array();
Array.prototype.push.apply(chart.data.datasets[0].data, cells[1]
);
Array.prototype.push.apply(chart.data.datasets[1].data, cells[2]
);
}
}
}
}
});
}
function main() {
drawBarChart();
}
main();