Comment obtenir les données de base de données dans ChartJS en utilisant codeigniter

Question

alors j'ai commencé à créer ce chartjs à être connecté dans la base de données que j'ai utilisé parce que ChartJS est un graphique en direct open source ..i télécharger le jqueryJS hors ligne et ChartJS et il a fait travail donc je savais qu'il n'y a rien de mal avec mon script maintenant quand j'ai essayé de le connecter à la base de données il ne montrera pas de résultat/tableau, le code d'état est 200 OK mais il n'y a pas de données dans mes propriétés mon code. Veuillez expliquer pourquoi cela n'a pas fonctionné. Merci beaucoup d'aide.

j'ai mes uri où monthlyReport affiche la page et/2 est mon Project_No

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

hors ligne de script téléchargeable travaille sur requête non base de données

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

bouton

et la toile où il se déclenche la poster un script et afficher mon graphique

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

script à déclencher

<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> 

contrôleur

obtient la uri, interroger le modèle et convertit les données en JSON

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

requête les rapports mensuels Mois et Completion_Percentage où 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(); 
} 

donc ce VOICI mon travail de mise à jour .. si pas où la clause

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

ce qui se passe lorsque j'ajoute where clause. aucune donnée ne sera affichée.

Answer 1

J'utilise chart.js, et je pense que je fais exactement ce que vous voulez faire, ce qui est d'avoir ajax récupérer les données de la carte, puis l'afficher. Vous devez mettre à jour le graphique d'une manière spéciale, et j'espère que mon code ci-dessous vous montrera ce que vous devez faire. Je pense que la clé ici est tout en haut, dans l'espace de noms funcs, la fonction updateMyChart. Check it out:

(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.'); 
      } 
     }); 
    }); 

}); 

Je sais que je suis en utilisant jQuery et vous pourriez ne pas être, mais la mise à jour n'a pas vraiment rien à voir avec jQuery de toute façon.