0

Viva, Tenho 2 gráficos e queria trazer para eles valores da base de dados para isso utilizo o php e trago os valors com o Json da seguinte forma:

$pe= array();



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

     echo json_encode($pe);

Após isto, pesquisei pela net e encontrei várias coisas e implementei isto

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

Mas queria dar destaque a parte onde recebo os dados do ficheiro php. A minha dúvida é como receber e colocá-los nos values do gráfico

2
  • desculpe, mas não compreendi o que você quer fazer, pois você ja esta pegando os dados do PHP, o que você quer seria algo relacionado a um timer que realiza a requisição ao arquivo PHP e atualiza os graficos? 13/07/2015 às 11:26
  • O que eu quero é que apareça os valores que estão a trazer as minhas querys. Por exemplo: tenho 4 valores inteiros, quero que sejam apresentados esses valores no gráfico. o JSon retorna isto {"fechados":"136","aguarda":"13","analise":"2","reparacao":"3"}
    – Xeoon
    13/07/2015 às 11:28

2 Respostas 2

0

Você tem que fazer isso na função de callback, a mesma onde você está fazendo aquele 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);
      }
   }); 
});

No teu PHP coloque a impressão dos dados assim:

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

Tenha certeza de que o jQuery esteja carregado para executar a instrução.

4
  • Com este método o gráfico é carregado sem que o utilizador faça alguma coisa correto? é que eu coloquei este código que você colocou e ele faz com que os meus gráficos desapareçam
    – Xeoon
    13/07/2015 às 11:38
  • No código da resposta, o gráfico vai ser carregado após o recebimento dos dados do php. @Xeoon Se der algum erro na requisição dos dados, o gráfico não será carregado.
    – KaduAmaral
    13/07/2015 às 11:52
  • o ficheiro php que retorna os dados da base de dados está a retornar isto {"fechados":"136","aguarda":"13","analise":"2","reparacao":"3"} desta forma estou a receber correto no javascript certo?
    – Xeoon
    13/07/2015 às 12:18
  • Teoricamente, está aparecendo algum erro no console? Coloque alguns console.log no final dessa function(data), assim: console.log(data); console.log(pieData1); console.log(ctx1);, se mesmo assim não estiver conseguindo, entre nesse chat.
    – KaduAmaral
    13/07/2015 às 12:40
0

Eu não entendi muito bem qual é o problema e nem a necessidade de utilizar um "each" para um array associativo já com o numero de elementos pré-definidos, mas se for o caso de trazer uma coleção de valores para cada uma dessas chaves, você pode trazê-lo desta forma:


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

    });

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .