Codeigniter

Question

を使用してデータベースのデータをChartJSに取得する方法このChartJを作成してデータベースに接続するようにしました。これはもちろんChartJSがライブのオープンソースチャートです.iはオフラインのjqueryJSとChartJSをダウンロードします私のスクリプトには何も問題がないことが分かったので、データベースに接続しようとしたときに結果/グラフが表示されませんでした。ステータスコードは200ですが、デベロッパーツールを使ってプロパティにデータがありません。私のコード。なぜそれが機能しなかったか説明してください。大きな助けてくれてありがとう。

私は私のmonthlyReportがページを表示URIと/ 2を持っているが、私のProject_No

http://localhost/****/index.php/Main/monthlyReport/2 

オフラインダウンロードスクリプトは、それが発火する非データベースクエリ

<script src="<?php echo base_url('assets/jquery/jquery.min.js')?>"></script> 
<script src="<?php echo base_url('assets/js/Chart.js')?>"></script> 

ボタンやキャンバスに取り組んでいますスクリプトを投稿して私のグラフを見る

<input type="button" id="btnchart" value="Chart"> 
<canvas id="myChart" width="400" height="218"></canvas> 

スクリプトを起動する

<script type="text/javascript"> 

      var paramMonth = []; 
      var paramPercentage = []; 

      $('#btnchart').click(function(){ 
       $.post("<?php echo site_url('Main/chartData'); ?>", 
        function(data) { 
       var obj = JSON.parse(data); 

       $.each(obj,function(i,item) { 
        paramMonth.push(item.Month); 
        paramPercentage.push(item.Completion_Percentage); 
       }); 


       var ctx = $('#myChart'); 
        var myChart = new Chart(ctx, { 
         type: 'horizontalBar', 

         data: { 
          labels: paramMonth, 
          datasets: [{ 
           label: paramYear, 
           backgroundColor: 'rgb(3, 0, 102)', 
           borderColor: 'rgb(3, 0, 102)', 
           data: paramPercentage, 
          },{ 
           label: paramYear, 
           backgroundColor: 'rgb(255, 0, 0)', 
           borderColor: 'rgb(255, 0, 0)', 
           data: paramPercentage, 
          },{ 
           type: 'line', 
           label: "Line Graph", 
           data: paramPercentage, 
          }], 
         }, 

         // Configuration options go here 
         options: {} 
        }); 
       }); 
      }); 
</script> 

コントローラがモデルを照会、URIを取得しますので、これはここにあるJSON

public function chartData() 
    { 
     $data['p_id'] = $this->uri->segment(3); 
     $result = $this->foo_pro->getChartData('p_id'); 
     echo json_encode($result); 
    } 

クエリ月報月とCompletion_PercentageどこProject_No = 2

public function getChartData() 
{ 
    $this->db->select('*'); 
    $this->db->from('monthlyreport'); 
    $this->db->where('Project_No', $this->uri->segment(3)); 
    $query = $this->db->get(); 
    return $query->result(); 
} 

にデータを変換し、私の仕事の更新..ない場合はどこの句

$this->db->where('Project_No', $this->uri->segment(3)); 

これらは、where句を追加するとどうなりますか。データは表示されません。

Answer 1

は私がchart.jsを使用して、私はあなたが持っているAjaxのチャートデータをフェッチするためにある、何をしたいのかを正確にやっていると思うし、それを表示します。チャートを特別な方法で更新する必要があります。うまくいけば、以下の私のコードはあなたが何をする必要があるかを示します。ここのキーは、関数の名前空間であるupdateMyChart関数の一番上にあると思います。それをチェックアウト：

(function($){ 
    // Local namespaced variables and functions 
    var namespace = { 
     myChart: null, 
     updateMyChart: function(data){ 
      funcs.myChart.data.datasets[0].data = data; 
      funcs.myChart.update(); 
     } 
    }; 
    // End local namespaced variables and functions 
    window.funcs = (window.funcs) 
     ? $.extend(window.funcs, namespace) 
     : namespace; 
})(this.jQuery); 

/* Document ready function */ 
$(document).ready(function(){ 

    // Initial config 
    var myChartConfig = { 
     type: 'bar', 
     data: { 
      labels: ['Yes', 'No', 'Maybe'], 
      datasets: [{ 
       label: 'Current Count', 
       backgroundColor: [ 
        'rgba(75, 192, 192, 0.2)', 
        'rgba(75, 192, 192, 0.2)', 
        'rgba(75, 192, 192, 0.2)' 
       ], 
       borderColor: [ 
        'rgba(75, 192, 192, 1)', 
        'rgba(75, 192, 192, 1)', 
        'rgba(75, 192, 192, 1)' 
       ], 
       borderWidth: 1, 
       data: [0,0,0] 
      }] 
     }, 
     options: {} 
    }; 

    var myChartCanvas = $("#myChart"); 
    funcs.myChart = new Chart(myChartCanvas, myChartConfig); 

    /* Unit selector for interest */ 
    $('#btnchart').on('click', function(){ 
     $.ajax({ 
      type: 'post', 
      cache: false, 
      url: '/someplace/special', 
      data: {}, 
      dataType: 'json', 
      success: function(response){ 
       if(response.data){ 
        // In PHP I just json_encode(['data' => [SOME DATA]]); 
        funcs.updateMyChart(response.data); 
       } 
      }, 
      error: function(){ 
       alert('An error prevented chart awesomeness.'); 
      } 
     }); 
    }); 

}); 

を私はjQueryのを使用していますし、あなたがないかもしれません知っているが、更新が本当にとにかくjQueryのとは何の関係もありません。