1

このコードは、独自のコードと、Canvasjs の API を使用してグラフを作成する Canvasjs のテンプレート コードを組み合わせて作成したものです。

すべてが順調です。うまくデバッグできました。グラフには、データベース データがソースとして表示されます。私のデータベース データは、Arduino ベースのパルス センサーからのデータを含むテキスト ファイルからデータを読み取ります。

これは私のコードです:

<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>
<script type="text/javascript">

                $().ready(function () {

                     var dataPoints = [];

                var chart = new CanvasJS.Chart("chartContainer",{
                title :{
                text: "Patient #01"
                },          
                data: [{
                type: "line",
                dataPoints: dataPoints 
                }]
                }); 

            function updateChart( result ) { // move it here!!!
            $.getJSON("arduino_data.php", function( result ){

            var dataLength = 40; // number of dataPoints visible at any point
            var updateInterval = 20;
            var chart = new CanvasJS.Chart("chartContainer",{ // new chart Object
                title :{
                    text: "Patient #01"
                },          
                data: [{
                    type: "line",
                    dataPoints: dataPoints 
                }]
            });
            for (var i = 0; i <= result.length - 1; i++) {
                dataPoints.push({ x: Number(result[i].x), y: Number(result[i].y) });
            }
            if (dataPoints.length > dataLength){
                dataPoints.shift();             
            }        
            chart.render();   
        }); 
    }


    // First read - Start
    updateChart(); 
    // Update chart after specified time. 
    setInterval(updateChart, updateInterval); 

});




</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<body>
    <div id="chartContainer" style="height: 300px; width:100%;">
    </div>
</body>
</html>

なぜ dataLength = 40; を行うのですか? および updateInterval=20 および最後の行: updateChart();

動作しない？updateChart() に updateChart(dataPoints) のようなものがあるはずですか??

適切なコード部分があるのに、チャートがライブにならないのはなぜですか?

編集

これは、データベース データなしで機能するテンプレート コードです。そしてこれがライブチャートです。1秒ごとに更新されます。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>
<script type="text/javascript">
    window.onload = function () {

        var dps = []; // dataPoints

        var chart = new CanvasJS.Chart("chartContainer2",{
            title :{
                text: "Patient #01"
            },          
            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>

<script type="text/javascript" src="canvasjs.min.js"></script>

ご覧のとおり、私のコードと同じです。ただし、これはデータベースからの実際のデータの代わりに math.randomize データを使用します。

私の質問: グラフが更新 (ライブ) されず、変更が表示されないのはなぜですか? 私のチャートは静的なままです。新しいデータ送信を表示するには、手動で更新する必要があります。

4

0 に答える 0