4

Boa tarde, Tenho a seguinte consulta:

SELECT 
 DATE(o.data_fechamento) AS Data,
 u.nome   AS Pessoa,
 COUNT(*) AS Total
FROM
    ocorrencias AS o
        LEFT JOIN sistemas AS a ON a.sis_id = o.sistema
        LEFT JOIN localizacao AS l ON l.loc_id = o.local
        LEFT JOIN instituicao AS i ON i.inst_cod = o.instituicao
        LEFT JOIN usuarios AS u ON u.user_id = o.operador
        LEFT JOIN usuarios AS ua ON ua.user_id = o.aberto_por
        LEFT JOIN `status` AS s ON s.stat_id = o.status
        LEFT JOIN status_categ AS stc ON stc.stc_cod = s.stat_cat
        LEFT JOIN problemas AS p ON p.prob_id = o.problema
        LEFT JOIN sla_solucao AS sls ON sls.slas_cod = p.prob_sla
        LEFT JOIN prioridades AS pr ON pr.prior_cod = l.loc_prior
        LEFT JOIN sla_solucao AS slr ON slr.slas_cod = pr.prior_sla
        LEFT JOIN script_solution AS sol ON sol.script_cod = o.oco_script_sol
        LEFT JOIN prior_atend AS prioridade_atendimento ON prioridade_atendimento.pr_cod = o.oco_prior
     WHERE
          o.status IN (4)
          AND MONTH( o.data_fechamento) = MONTH(NOW())
          AND YEAR( o.data_fechamento) = YEAR(NOW())
          GROUP BY  DATE(o.data_fechamento),u.nome
          ORDER BY  o.data_fechamento ASC

Ele retorna algo como:

 Data       Pessoa  Total
2017-04-01  MARCOS  3
2017-04-01  PAULO   5
2017-04-02  MARCOS  7
2017-04-02  PAULO   3
2017-04-03  MARCOS  8
2017-04-03  PAULO   9
2017-04-04  MARCOS  4
2017-04-04  PAULO   10

Gostaria de aplica-lo com os retornos automaticamente em um while php mostrando o resultado como a exemplo da imagem que anexei abaixo em um line chart do google.

Como poderia estar fazendo esse processo ?

Google - Line Chart

inserir a descrição da imagem aqui

Obs: Tentei da seguinte forma, mais o gráfico esta saindo vazio:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(ChamadosPorTec);

    function ChamadosPorTec() {

      var data = new google.visualization.DataTable();

      <?php while ($row = mysql_fetch_array($QueryChamadosDiarios)){ 

        $VarPessoa = $row['Pessoa'];
        $VarTotal  = $row['Total'];
        $VarDia    = $row['Data'];

        ?>
      data.addColumn('number', 'DIA');
      data.addColumn('number', '<?php echo $VarPessoa;?>');


      data.addRows([
        [ <?php echo $VarDia;?>,<?php echo $VarTotal;?>]


        <?php } ?>  
      ]);

      var options = {
        chart: {
          title: 'CHAMADOS POR TECNICO',
          subtitle: 'MÊS: <?php echo $mes_extenso["$mes"];?>'
        },
        width: 900,
        height: 500
      };

      var chart = new google.charts.Line(document.getElementById('ChamadosPorTec'));

      chart.draw(data, options);
    }
    </script>

<div class="panel panel-default">
  <div class="panel-body">




<div id="ChamadosPorTec" style="width: 900px; height: 500px"></div>


  </div>
</div>
6
  • O que tem na sua variável $QueryChamadosDiarios? 10/04/2017 às 12:18
  • A query é a que ta no inicio da pergunta e o resultado também: 2017-04-01 MARCOS 3 10/04/2017 às 12:27
  • Você já tentou usar google.visualization.arrayToDataTable no lugar de google.visualization.DataTable? 10/04/2017 às 12:30
  • Já sim, também não deu :( 10/04/2017 às 12:31
  • Quando usa google.visualization.arrayToDataTable a montagem dos dados é um pouco diferente. Olha esse exemplo. Se te ajudar eu detalho na resposta 10/04/2017 às 12:48

1 Resposta 1

1
+150

Quando vou criar gráficos com dado cadastrados no banco, gosto de usar google.visualization.arrayToDataTable. Faço a construção dos dados no Controller e passo para a View só o que eu preciso.

No Controller, eu crio uma função para montar esses dados:

public static List<object[]> Grafico(ICollection<ValoresInvestimento> lista)
{    
    List<object[]> data = new List<object[]>();

    data.Add(new[] { "Label", "Líquido", "Bruto"});

    foreach (var valores in lista)
    {
        data.Add(new object[] { valores.Mes.ToString1800("MMM/yy"), valores.ValorLiquido, valores.ValorBruto });
    }
    return data;
}

Dentro da lista que eu passo como parâmetro está a query com a busca. O retorno de data é um array de array:

Array [ Array[3], Array[3], Array[3] ]

Dentro de cada Array[3] temos a seguinte estrutura:

0: Array[3]
0: "Label"
1: "Liquido"
2: "Bruto"

1: Array[3]
0: "jan/17"
1: "208480.03"
2: "260600.04"

2: Array[3]
0: "fev/17"
1: "777708"
2: "972135"

Na View, faço uma chamada para buscar os dados e desenhar o gráfico:

$.ajax({
    type: "POST",
    async: false,
    url: '@Url.Action("BuscaRelatorio", "RelatorioInvestimento")',
        contentType: 'application/json',
        dataType: "json",
        data: JSON.stringify({ grid: grid }),
        success: function (data)
        {
            Grafico(data.Retorno.Grafico);          
        }       
    });
}

A função BuscaRelatorio, que é passada no ajax, tem o seguinte retorno:

return Json(new RetornoAjax
{
    Retorno = new
    {                  
        Grafico = Grafico(lista)
    }
});

Dentro desse retorno, chamo a função Grafico pra desenhar:

function Grafico(data) {

    var dadosGrafico = google.visualization.arrayToDataTable(data);

    var options = {                
            legend: { position: 'right', textStyle: { color: 'black' }, fontSize: 12 },
            width: "100%",
            height: 400,                
            vAxis: {
                title: "Valor",
                titleTextStyle: {
                    color: '#000',
                    bold: true,
                    italic: false
                },                   
            },
            chartArea: {
                height: "80%",
            },
            hAxis: {
                title: "Meses",
                 titleTextStyle: {
                     color: '#000',
                     bold: true,
                     italic: false
                 },
                 textStyle: { color: 'black' }
             },
            fontSize: 11,                
        };

    var chart = new google.visualization.LineChart(document.getElementById('grafico'));
    chart.draw(dadosGrafico, options);

    function resizeCharts() {
        // redraw charts, dashboards, etc here
        chart.draw(dadosGrafico, options);
    }

    $(window).resize(resizeCharts);
};

Existem outras formas de fazer esse gráfico, eu prefiro trazer o gráfico pronto do Controller. Espero que esse código em C# te ajude a entender a estrutura, assim você vai conseguir fazer em PHP.

3
  • 1
    Vou testar e já retorno. Obrigado 10/04/2017 às 13:12
  • 2
    Olá Tais, tudo bem? Então, o código dele é em PHP, devido isso eu acho que seria interessante mostrar ao menos a estrutura dos dados retornados pelo Controller, para quem ler a resposta futuramente conseguir entender melhor o que foi feito.
    – Randrade
    10/04/2017 às 14:48
  • @Randrade, boa sugestão, adicionei a estrutura =) 10/04/2017 às 15:06

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 .