如何使用codeigniter將數據庫數據導入ChartJS

Question

所以我開始創建這個chartjs來連接數據庫我使用過這個，因爲當然ChartJS是一個活的開源圖表..我下載了離線jqueryJS和ChartJS，它沒有工作，所以我知道我的腳本現在沒有錯，當我試圖將它連接到數據庫它不會顯示一些結果/圖表，狀態代碼是200行，但沒有數據在我的屬性使用開發工具，這裏是我的代碼。請解釋爲什麼它不起作用。謝謝你的大力幫助。

我有我的URI，其中monthlyReport查看頁面和/ 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獲取圖表數據是什麼，然後顯示它。你必須以特殊的方式更新圖表，並希望下面的代碼能夠告訴你你需要做什麼。我認爲這裏的關鍵在於funcs命名空間的頂部，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反正。