Receive php Json values in Javascript for Chart.js charts

Question

Hurrah, I have 2 graphics and wanted to bring them values from the database so I use php and bring the values with Json as follows:

$pe= array();



     $pe['fechados'] = $total_fechados;
     $pe['aguarda'] = $total_aguardar_resposta;
     $pe['analise'] = $total_analise;
     $pe['reparacao'] = $total_reparacao;

     echo json_encode($pe);

After that, I searched the net and found several things and implemented this

<script>

$(document).ready(function(){
            /* call the php that has the php array which is json_encoded */
            $.getJSON('../includes/grafico_pedidos.php', function(data) {
                    /* data will hold the php array as a javascript object */
                    $.each(data, function(key, val) {
                            var f = val.fechados;
                            var ag = val.aguarda;
                            var an = val.analise;
                            var r = val.reparacao;
                    });
            });

    });

var pieData1 = [
  { value: f, color:"#F7464A", highlight: "#FF5A5E", label: "Fechados"},
  { value: ag, color: "#46BFBD", highlight: "#5AD3D1", label: "Aguarda Resposta"},
  { value: an, color: "#FDB45C", highlight: "#FFC870", label: "Em Análise"},
  { value: r, color: "#949FB1", highlight: "#A8B3C5", label: "Em Reparação"},
  { value: 120, color: "#4D5360", highlight: "#616774", label: "Dark Grey"}];

  var doughnutData = [
  { value: 300, color:"#F7464A", highlight: "#FF5A5E", label: "Red"},
  { value: 50, color: "#46BFBD", highlight: "#5AD3D1", label: "Green"},
  { value: 100, color: "#FDB45C", highlight: "#FFC870", label: "Yellow"},
  { value: 40, color: "#949FB1", highlight: "#A8B3C5", label: "Grey"},
  { value: 120, color: "#4D5360", highlight: "#616774", label: "Dark Grey"}   ];


    var ctx = document.getElementById("chart-area").getContext("2d");
    var myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});

    var ctx1 = document.getElementById("pie").getContext("2d");
    var myPie = new Chart(ctx1).Pie(pieData1, {responsive : true});
    </script>

But I wanted to highlight the part where I get the php file data. My question is how to receive and put them in the chart values

Answer 1

You have to do this in the role of callback, the same where you’re doing that each.

jQuery(document).ready(function($){ 
/* call the php that has the php array which is json_encoded */ 

   $.ajax({ 
      url: '../includes/grafico_pedidos.php', 
      dataType: 'json', 
      success: function(data){ 
         var pieData1 = [ 
         { value: data.fechados, color:"#F7464A", highlight: "#FF5A5E", label: "Fechados"}, 
         { value: data.aguarda, color: "#46BFBD", highlight: "#5AD3D1", label: "Aguarda Resposta"}, 
         { value: data.analise, color: "#FDB45C", highlight: "#FFC870", label: "Em Análise"}, 
         { value: data.reparacao, color: "#949FB1", highlight: "#A8B3C5", label: "Em Reparação"}, 
         { value: 120, color: "#4D5360", highlight: "#616774", label: "Dark Grey"}]; 

         var doughnutData = [ 
         { value: 300, color:"#F7464A", highlight: "#FF5A5E", label: "Red"}, 
         { value: 50, color: "#46BFBD", highlight: "#5AD3D1", label: "Green"}, 
         { value: 100, color: "#FDB45C", highlight: "#FFC870", label: "Yellow"}, 
         { value: 40, color: "#949FB1", highlight: "#A8B3C5", label: "Grey"}, 
         { value: 120, color: "#4D5360", highlight: "#616774", label: "Dark Grey"}]; 

         var ctx = document.getElementById("chart-area").getContext("2d"); 
         var myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true}); 

         var ctx1 = document.getElementById("pie").getContext("2d"); 
         var myPie = new Chart(ctx1).Pie(pieData1, {responsive : true}); 

      },
      error: function(x, y, z){
         console.log(x);
         console.log(y);
         console.log(z);
      }
   }); 
});

In your PHP put the printing of the data like this:

header('Content-Type: application/json'); 
echo json_encode($pe); 
exit;

Make sure that jQuery is loaded to execute the instruction.

Answer 2

I didn’t quite understand what the problem is nor the need to use a "each" for an associative array already with the number of predefined elements, but if it is the case to bring a collection of values for each of these keys, you can bring it this way:

$(document).ready(function(){

 function getOptionPieChart(data, i, color, highlight, label)
               return { 
               value: data[i],
               color: "#"+color,
               highlight:"#"+highlight, 
               label:label
               }
 }

var pieData1 = [];
var doughnutData = [];

            $.getJSON('../includes/grafico_pedidos.php', function(data) {

              $.each(data, function(key, label) {

                 for (var i in data[key]) {

                   if (label == "fechados") {
                       var v[0] = "Fechados";
                       var v[1] = "Red";
                       var v[2] = "F7464A";
                       var v[3] = "FF5A5E";
                   }
                   if (label == "aguarda") {
                       var v[0] = "Aguarda Resposta";
                       var v[1] = "Green";
                       var v[2] = "46BFBD";
                       var v[3] = "5AD3D1";
                   }
                   if (label == "analise") {
                       var v[0] = "Em Análise";
                       var v[1] = "Yellow";
                       var v[2] = "FDB45C";
                       var v[3] = "FFC870";
                   }
                   if (label == "reparacao") {
                       var v[0] = "Em Reparação";
                       var v[1] = "Dark Grey";
                       var v[2] = "4D5360";
                       var v[3] = "616774";
                   }

               pieData1[getOptionPieChart(data[key], i, v[2], v[3], v[0])];  
               doughnutData[getOptionPieChart(data[key], i, v[2], v[3], v[1])];  
                 }
              });

      var ctx = document.getElementById("chart-area").getContext("2d");
      var myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});

      var ctx1 = document.getElementById("pie").getContext("2d");
      var myPie = new Chart(ctx1).Pie(pieData1, {responsive : true});

    });