0

定期的にプロットを描くために使用するキャンバスがあります。定期的にデータを受け取る関数があり、データを解析してキャンバスにプロットします。プロットには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;

ほとんどのコードは私の問題とは関係ありませんが、処理方法に問題があるかどうかを知りたかっただけです。

ありがとうございました。

4

0 に答える 0