在Canvas js中插入实时数据

Question

我已经使用Canvas JS工作了几天，制作了一些令人惊叹的实时图表，但问题是；数据只是随机生成的。我已经设法从传感器获取了一些数据，我希望将这些数据插入到Canvas JS中，并删除随机生成的数据，但我不知道如何用随机生成的数据替换真实数据？

重复我的问题，为了插入实时数据而不是随机生成的数据，我需要做哪些修改？

这是我从Canvas JS (Code Example from canvasjs)得到的代码。

<script type="text/javascript">
window.onload = function () {

    var dps = []; // dataPoints

    var chart = new CanvasJS.Chart("chartContainer",{
        title :{
            text: "Live Random Data"
        },          
        data: [{
            type: "line",
            dataPoints: dps 
        }]
    });

    var xVal = 0;
    var yVal = 100; 
    var updateInterval = 20;
    var dataLength = 500; // number of dataPoints visible at any point

    var updateChart = function (count) {
        count = count || 1;
        // count is number of times loop runs to generate random dataPoints.

        for (var j = 0; j < count; j++) {   
            yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
            dps.push({
                x: xVal,
                y: yVal
            });
            xVal++;
        };
        if (dps.length > dataLength)
        {
            dps.shift();                
        }

        chart.render();     

    };

    // generates first set of dataPoints
    updateChart(dataLength); 

    // update chart after specified time. 
    setInterval(function(){updateChart()}, updateInterval); 

}
</script>

Answer 1

这个应该就行了

<script type="text/javascript">
window.onload = function () {

    var dps = []; // dataPoints

    var ws = new WebSocket("ws://IP(hidden):8081/osc");

    var chart = new CanvasJS.Chart("chartContainer",{
        title :{
            text: "Live Random Data"
        },          
        data: [{
            type: "line",
            dataPoints: dps 
        }]
    });

    var xVal = 0;
    var yVal = 100; 
    var updateInterval = 20;
    var dataLength = 500; // number of dataPoints visible at any point

    ws.onmessage = function(evt) {
      var point = evt.data.split(",");

       // To ensure we have recieved both x and y values
      if ( point.length === 2 ){
          dps.push({
             x: parseInt( point[0] ),
             y: parseInt( point[1] )
          });
      }

      if (dps.length > dataLength){
         dps.shift();               
      }

      chart.render();
   }
}
</script>

Answer 2

感谢您的帮助，Lakha Singh Namdhari先生！图表现在正在接收数据，我要做的唯一一件事就是删除代码周围的if语句。因为这条if语句只给出了dps.length的0。问题是dps.length等于0(常量)。因此，当我删除if语句时，dps.length开始正确递增。

我留下了一些东西，如设计和时间延迟等，但我将启动一个新的线程，因为这个问题已经解决。

我改变了这一点：

                  if ( point.length === 2 ){
                      dps.push({
                         x: parseInt( point[0] ),
                         y: parseInt( point[1] )
                      });
                  }

要这样做：

              dps.push({
                 x: parseInt( point[0] ),
                 y: parseInt( point[1] )
              });

Answer 3

我基本上已经创建了一个图表，其中存储了温度值。一切都很好，唯一的问题是x轴没有从框架中出来。我希望x轴与数据一起移动。就像下面的链接。

Here is the example!

这是代码，出于安全考虑，我已经隐藏了IP地址。为了使x轴与数据一起移动，我应该实现什么？

    <script type="text/javascript">

    window.onload = function () {

        var dps = []; // dataPoints

        // Connect to the server. 
        var server_url = "ws://";
        var ip = 'xxx.xxx.x.xx';
        server_url = server_url.concat(ip,":8081/osc")
        ws = new WebSocket(server_url);

        var chart = new CanvasJS.Chart("chartContainer",{
            title :{
                text: "Temp Bank Sensor 1 - (TBS1)"
            },          
            data: [{
                type: "splineArea",
                color: "rgba(255, 0, 29, 0.79)",
                dataPoints: dps 
            }]
        });

        var xVal = 0;
        var yVal = 100; 
        var updateInterval = 20;
        var dataLength = 500; // number of dataPoints visible at any point

        ws.onmessage = function(evt) {
            var point = evt.data.split(",");

                  dps.push({
                     x: xVal,
                     y: parseInt( point[1] )
                  });
                  xVal++; 

              if (dps.length > dataLength){
                 dps.shift();               
              }
              chart.render();
        } // end method ws.onmessage

            // generates first set of dataPoints
            updateChart(dataLength); 

            // update chart after specified time. 
            setInterval(function(){updateChart()}, updateInterval); 


    }; // end method window.onload 

    </script>