定期的にプロットを描くために使用するキャンバスがあります。定期的にデータを受け取る関数があり、データを解析してキャンバスにプロットします。プロットにはChart.jsを使用します。
しかし、プロットを定期的に更新することはできません。データが正しく受信され、解析されていることを確認しましたが、プロットが更新されていません。ページをクリックするか、ブラウザを最小化して再度最大化すると、更新されます。プロットが一時的に表示され、次に update が呼び出されると、プロットは消えます。
これが私のコードです。私はFirefoxを使用しています。
function start ()
{
// create a new websocket and connect
window.ws = new wsImpl('ws://localhost:8181/consoleappsample', 'my-protocol');
// when data is comming from the server, this metod is called
ws.onmessage = function (evt)
{
ParseIncomingData(evt.data);
};
// when the connection is established, this method is called
ws.onopen = function ()
{
inc.innerHTML = 'Connected<br/>';
textPanel.style.background = "#00FF00";
};
// when the connection is closed, this method is called
ws.onclose = function ()
{
inc.innerHTML = 'Connection closed<br/>';
textPanel.style.background = "#FF0000";
}
var periodicFuncID = setInterval( function() { ws.send(1); }, 2000);
}
function ParseIncomingData(data)
{
var splitContents = data.split(',');
var inc = document.getElementById('incomming');
var xaxis = new Array();
var yaxis = new Array();
yaxis = splitContents;
var dataType = yaxis.shift();
var data;
for(var i=1; i<=yaxis.length; i++)
{
xaxis.push(i);
}
data =
{
labels : xaxis,
datasets : [
{
//fillColor : "rgba(135,206,250,0.5)",
fillColor : "rgba(0,0,0,0.4)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(255,165,0,1)",
pointStrokeColor : "#585858 ",
data : yaxis
}
]
}
var canvas= document.getElementById('Plot');
var ctx = canvas.getContext("2d");
var myLine = new Chart(ctx).Line(data);
}
window.onload = start;
ほとんどのコードは私の問題とは関係ありませんが、処理方法に問題があるかどうかを知りたかっただけです。
ありがとうございました。