Google Pie Charts is not displayed when the data has more than one row

Question

Google Pie Charts is not displayed when the data has more than one row

Navigation

#1 by (1 votes)

2

I'm trying to display a PieChart, however, if the search in the database returns only one row, the chart is displayed. If you return more than one line, the graph does not appear.

function that generates graph data:

public function grpAplicacaoRecursos() {
// Estrutura basica do grafico
    $grafico = array(
        'dados' => array(
            'cols' => array(
                array('type' => 'string', 'label' => 'Descricao'),
                array('type' => 'number', 'label' => 'Valor')
            ),
            'rows' => array()
        ),
        'config' => array(
            'title' => 'Para onde vai meu dinheiro',
            'width' => 400,
            'height' => 250
        )
    );

    $dataAtual = new DateTime('now');
    $inicioUltimaSemana = date('Y-m-d', strtotime($dataAtual->format('Y-m-d').' -365 days'));


    $dados = $this->registry->conn->fetchAll('SELECT c.descricao descricao, sum(m.valor) valor '.
            'FROM movimento_conta m left join conta c on m.conta_id = c.conta_id where m.data '.
            'between ? and ? group by descricao ', array($inicioUltimaSemana, $dataAtual->format('Y-m-d')));

    foreach ($dados as $row) {
        $grafico['dados']['rows'][] = array('c' => array(
                array('v' => $row['descricao']),
                array('v' => $row['valor'])
        ));
    }
    // Enviar dados na forma de JSON
    header( 'Cache-Control: no-cache' );
    header('Content-Type: application/json; charset=UTF-8');
    echo json_encode($grafico);
}

function return:

{  
"dados":{  
  "cols":[  
     {  
        "type":"string",
        "label":"Descricao"
     },
     {  
        "type":"number",
        "label":"Valor"
     }
  ],
  "rows":[  
     {  
        "c":[  
           {  
              "v":"teste1"
           },
           {  
              "v":"554.890"
           }
        ]
     },
     {  
        "c":[  
           {  
              "v":"teste2"
           },
           {  
              "v":"2556.000"
           }
        ]
     }
  ]
},
"config":{  
  "title":"Para onde vai meu dinheiro",
  "width":400,
  "height":250
}
}

script on the page that displays the graphic:

<script type="text/javascript">
google.load('visualization', '1.0', {'packages': ['corechart']});
google.setOnLoadCallback(function() {
    var json_text = $.ajax({url: "/index/grpAplicacaoRecursos", dataType: "json", async: false}).responseText;
    var json = eval("(" + json_text + ")");
    var dados = new google.visualization.DataTable(json.dados);

    var chart = new google.visualization.PieChart(document.getElementById('area_grafico2'));
    chart.draw(dados, json.config);
});


</script>

Can anyone tell me what I'm doing wrong?

php javascript json google-charts

asked by anonymous 14.08.2014 / 14:51

1 answer

Search in checkbox list SELECT display difference between browsers

score 1 · Answer 1

You happen to expect to see something like this:

If it is, it is quite simple to solve although it is not very obvious: Its non-decimal decimal values are numeric strings.

It is most likely the fault of how Google Charts interprets JSON information informed.

If I had to guess I would say that because you are defining a type as number but you are passing a string , when that value is converted for the rule number you set, should result in some unexpected value.

Remove the quotes from the values by forcing the cast of the variable to float and the graphic should appear ( should because I modified the JSON manually):

foreach ($dados as $row) {
    $grafico['dados']['rows'][] = array('c' => array(
        array('v' => $row['descricao']),
        array('v' => (float) $row['valor'])
    ));
}

Neglecting the zeros to the right of the decimal place also makes the graph appear, even without changing the type of the variable, but the results I got were different.