1

Tenho um gráfico que é criado conforme o ano, que é passado por AJAX e retorna um JSON contendo os valores pra criar o gráfico. Pois bem, eu envio o AJAX com o ano, retorno o JSON, porém... Dá erro, ele cria tudo errado, segue meu código.

Meu controlador onde retorno os dados e crio o JSON:

public function comparativo_json(){
    $html = '';
    $data = $this->relatoriosmodel->getComparativo($this->input->post('ano'));

    $html .= '[';
    foreach($data['mesesFuncionario'] as $func):
        $html .= "{";
            $html .= "name: '".$data['funcionarioDados'][$func['id']]->nome."',";
            unset($func['id']);
            $html .= "data: [ "; foreach($func as $f){ $html .= $f.','; } substr($f,-1); $html .= "]";
        $html .= "},";
    endforeach; 
    $html .= ']';

    echo json_encode($html);
}

Meu JS:

<script type="text/javascript">
$(function(){
    $('#ano').change(function(){
        $.ajax({
            url: '/relatorio/comparativo_json',
            type: 'POST',
            dataType: 'json',
            data: {ano: $("#ano option:selected").val()},
            success: function(data){

                $('#containerHighCharts').highcharts({
                    title: {
                        text: 'Comparativo de Vendas',
                        x: -20 //center
                    },
                    subtitle: {
                        text: 'Ano de Referência: '+$("#ano option:selected").val(),
                        x: -20
                    },
                    xAxis: {
                        categories: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun',
                            'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
                    },
                    yAxis: {
                        title: {
                            text: 'Reais (R$)'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        valueSuffix: ' (R$) Reais'
                    },
                    legend:{
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    },
                    series: data,
                });
            }
        });
    });
}); 
</script>

O JSON que ele retorna, que por sinal está correto, conforme o padrão pedido pelo plugin:

[
    {
        name: 'Richard Feliciano',
        data: [ 0,0,0,0,1816,17100,2400,0,0,0,0,0,]
    },
    {
        name: 'Ewerton Melo',
        data: [ 0,0,0,0,0,12400,0,0,0,0,0,0,]
    },
]

Imagem contendo o erro:

inserir a descrição da imagem aqui

Só preciso fazer com que o retorno data seja impresso corretamente.

11
  • O problema está especificamente na impressão do series: data, 19/06/2014 às 22:14
  • 1
    A unica coisa que me ocorre é que esteja a esquecer de fazer o JSON.parse, porque de resto parece-me bem: jsfiddle.net/yb3Nt Teste assim: series: JSON.parse(data), Teste também console.log(data); ou console.log(typeof data); e comente aqui o que obtêm.
    – Sergio
    19/06/2014 às 22:20
  • Fiz o console.log(typeof data); e ele retorna como string, logo abaixo fiz o parse var dataJSON = JSON.parse(data) e retornou erro: Uncaught SyntaxError: Unexpected token n 19/06/2014 às 22:31
  • De fato deve ser a conversão para JSON dessa string 19/06/2014 às 22:32
  • Ok, e o que obtêm se fizer console.log(data); ?
    – Sergio
    19/06/2014 às 22:33

1 Resposta 1

1

Existe um problema aqui:

foreach($data['mesesFuncionario'] as $func):
    $html .= "{";
        $html .= "name: '".$data['funcionarioDados'][$func['id']]->nome."',";
        unset($func['id']);
        $html .= "data: [ "; foreach($func as $f){ $html .= $f.','; } substr($f,-1); $html .= "]";
    $html .= "},";
endforeach;

O formato da string json não pode ter uma vírgula no fim, ela só separa os objetos. Segue o exemplo que você deu:

[{name: 'Richard Feliciano',data: [ 0,0,0,0,1816,17100,2400,0,0,0,0,0,]},{name: 'Ewerton Melo',data: [ 0,0,0,0,0,12400,0,0,0,0,0,0,]},]

Ele deveria ser:

[{name: 'Richard Feliciano',data: [ 0,0,0,0,1816,17100,2400,0,0,0,0,0,]},{name: 'Ewerton Melo',data: [ 0,0,0,0,0,12400,0,0,0,0,0,0,]}]

Repare que removi a última vírgula. Não entendo de PHP, mas o que você precisa fazer é verificar para que ele não adicione a última vírgula.

Depois de corrigir isso é só usar JSON.parse(data); que irá funcionar perfeitamente.

3
  • Talvez você ainda tenha problemas por não usar aspas dupla, mas confira isso... se der problema no parse, mude para aspas duplas na sua string JSON: [{name: "Richard Feliciano",data: [ 0,0,0,0,1816,17100,2400,0,0,0,0,0,]},{name: "Ewerton Melo",data: [ 0,0,0,0,0,12400,0,0,0,0,0,0,]}]
    – 0x10203040
    19/06/2014 às 23:04
  • Muito obrigado era isso mesmo, usei a função do PHP substr($html,0,-1) para remover o último elemento da string, nos pontos onde encerrava com , e funcionou perfeitamente, retornou o gráfico. 19/06/2014 às 23:17
  • 1
    Fico feliz que tenha dado certo. Com strings JSON é muito importante manter o formato correto quando convertemos para um objeto em determinada linguagem. Você também pode tentar usar métodos padrão em PHP para formar strings JSON ao invés de escrever a string à mão, isso torna seu código menos suscetível a erros!
    – 0x10203040
    19/06/2014 às 23:21

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 .