53507


こんにちは。Cakephpを最近勉強し始めたものなのですが、  
今回はajaxとcakephpとの連携で引っかかってしまったので  
質問させていただきます。  
今回実現させたいことは、Datasというデータベースからのデータをajaxをつかってリアルタイムで更新しながらChart.jsを使ったグラフで表示させるというものです。  
データベースはresult（値は１つ）,created(投票された時間)の二つです。  
このresultはAとBがあり、これをパーセンテージ化して表示したいと思っています。  
また、リアルタイムというのは毎秒1秒で更新したいと思っています。  
一応書いたコードがこちらになります。

[code]

    /js/ajax.js
    $(function() {
        $.ajax({
            url: "result",
            type: "get",
            dataType: "html"
        }).done(function (response) {
            //dataからAとBのパーセントを割り出してa_lastに代入するコードが入ります
            var chartColors = {
              red: 'rgb(255, 99, 132)',
            };
    
    
            function onRefresh(chart) {
              chart.config.data.datasets.forEach(function(dataset) {
                dataset.data.push({
                  x: a_last,
                  y: Date.now()
                });
              });
            }
    
            var color = Chart.helpers.color;
            var config = {
              type: 'line',
              data: {
                datasets: [{
                  label: '結果',
                  backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
                  borderColor: chartColors.red,
                  fill:false
                }]
              },
              options: {
                title: {
                  display: true,
                  text: '結果'
                },
                scales: {
                  xAxes: [{
                    type: 'linear',
                    display: true,
                    scaleLabel: {
                      display: true,
                      labelString: '%'
                    }
                  }],
                  yAxes: [{
                    type: 'realtime',
                    realtime: {
                      duration: 10000,
                      refresh: 1000,
                      delay: 2000,
                      onRefresh: onRefresh
                    },
                  }]
                },
                tooltips: {
                  mode: 'nearest',
                  intersect: false,
                  callbacks: {
                    title: function(tooltipItems) {
                      return tooltipItems[0].yLabel;
                    },
                    label: function(tooltipItem, data) {
                      var label = data.datasets[tooltipItem.datasetIndex].label;
                      if (label) {
                        label += ': ';
                      }
                      label += tooltipItem.xLabel;
                      return label;
                    }
                  }
                },
                hover: {
                  mode: 'nearest',
                  intersect: false
                }
              }
            };
    
            window.onload = function() {
              var ctx = document.getElementById('myChart').getContext('2d');
              window.myChart = new Chart(ctx, config);
            };
        }).fail(function () {
            alert("failed");
        });
    });
    
[/code]

こちらはctpファイルです。

[code]

    <script type="text/javascript">
    var data = [];
    var updata = function(){
    <?php foreach ($datas as $data): ?>
        var A = "A"
        var B = "B"
        var result = <?= h($data->result) ?>;
        if (result!=0){
           data.push(result);
        }
    <?php endforeach; ?>
    setTimeout(updata, 10000);
    } 
    updata();
    </script>
    <?php echo $this->Html->script('ajax.js');?>
    <canvas id="myChart"></canvas>
    
[/code]

こちらがcontrollerです。

[code]

    public function result()
    {
        $datas = $this->paginate($this->Datas);
        $this->set(compact('datas'));
    }
    
[/code]

こんな感じにしたいです。  
[![](https://i.stack.imgur.com/vX55P.png)](https://i.stack.imgur.com/vX55P.png)  
今の段階としては、グラフは動きますが、50パーセントであったらずっと５０パーセントのままという感じです。


CC BY-SA 4.0
2019-03-17T09:14:43.970
53497
2019-03-18T05:38:30.397
2019-03-17T10:10:18.350
32103
32103
question
cakephp ajax
cakephp３系でajaxを使い、リアルタイムでデータを取得し、グラフで表示したい


cakephpは単にhtmlをサーバからブラウザに出力しているだけなので、  
ajax処理とは分離して考える事ができます。

また、今回使用しているChartは、のconfigがonRefreshでリフレッシュ条件を指定できるように見えます。  
問題の本質はそこのはずなので、そこのヘルプやサンプルを参照してください。


CC BY-SA 4.0
2019-03-18T01:42:24.147
53507
2019-03-18T05:38:30.397
2019-03-18T05:38:30.397
25396
25396
53497
answer