[RESOLVIDO] - Data em gráfico

[Jhess 46]

Olá pessoas, estou pegando do banco alguns registros por data, e monto o gráfico em cima, assim:

 

 

O formato está: "Y-m-d", quando mudo pra "d/m/Y" ele mostra o gráfico assim:

 

E não retorna dados do banco com a coluna nesse formato: "d/m/Y".

[Matheus Tavares 167]

Poste seu código...

[Jhess 46]

Gráfico:

 

  $(function () {
    "use strict";
    var area = new Morris.Area({
      element: 'revenue-chart',
      resize: true,
      data: [
        {d: '<?php echo $six_day; ?>', abertas: <?php echo $rowssix_daya; ?>, fechadas: <?php echo $rowssix_dayf; ?>},
        {d: '<?php echo $five_day; ?>', abertas: <?php echo $rowsfive_daya; ?>, fechadas: <?php echo $rowsfive_dayf; ?>},
        {d: '<?php echo $four_day; ?>', abertas: <?php echo $rowsfour_daya; ?>, fechadas: <?php echo $rowsfour_dayf; ?>},
        {d: '<?php echo $three_day; ?>', abertas: <?php echo $rowsthree_daya; ?>, fechadas: <?php echo $rowsthree_dayf; ?>},
        {d: '<?php echo $two_day; ?>', abertas: <?php echo $rowstwo_daya; ?>, fechadas: <?php echo $rowstwo_dayf; ?>},
        {d: '<?php echo $one_day; ?>', abertas: <?php echo $rowsone_daya; ?>, fechadas: <?php echo $rowsone_dayf; ?>},
        {d: '<?php echo $hoje;?>', abertas: <?php echo $rowsHojea; ?>, fechadas: <?php echo $rowsHojef; ?>}
      ],
      xkey: 'd',
      ykeys: ['abertas', 'fechadas'],
      labels: ['Ocorrências abertas', 'Ocorrências fechadas'],
      lineColors: ['#2ea026', '#bc3c3c'],
      fillOpacity: 0.7,
      hideHover: 'auto',
      behaveLikeLine: true,
      resize: true,
      pointFillColors:['#ffffff'],
      pointStrokeColors: ['gray'],
      lineColors:['#2ea026','#bc3c3c']
    });
  });

 

Eu fiz muita gambiarra nesse código, mas vou resolver com um FOR, estou fazendo essa doideira só pra testar, se funcionar, eu faço o laço.

 

De onde pego as variáveis: $six_day / $five_day / $four_day / $three_day / $two_day / $one_day / $hoje

 

$hoje = date("Y-m-d");
$one_day = date( 'Y-m-d', strtotime( $hoje . ' -1 day' ) );
$two_day = date( 'Y-m-d', strtotime( $hoje . ' -2 day' ) );
$three_day = date( 'Y-m-d', strtotime( $hoje . ' -3 day' ) );
$four_day = date( 'Y-m-d', strtotime( $hoje . ' -4 day' ) );
$five_day = date( 'Y-m-d', strtotime( $hoje . ' -5 day' ) );
$six_day = date( 'Y-m-d', strtotime( $hoje . ' -6 day' ) );

Pego hoje, e vou removendo 1 dia em cada variável, pra ser o gráfico de 1 semana.

 

De onde busco no banco:

//Pego de 1 dia atrás, caso aberta
$one_day = date( 'Y-m-d', strtotime( $hoje . ' -1 day' ) );
$queryone_daya = $mysqli->prepare("SELECT * FROM af WHERE tipo_af = 'a' AND data = '".$one_day."'");
$queryone_daya->execute();
$queryone_daya->store_result();
$rowsone_daya = $queryone_daya->num_rows;

//Pego de 1 dia atrás, caso fechada
$one_day = date( 'Y-m-d', strtotime( $hoje . ' -1 day' ) );
$queryone_dayf = $mysqli->prepare("SELECT * FROM af WHERE tipo_af = 'f' AND data = '".$one_day."'");
$queryone_dayf->execute();
$queryone_dayf->store_result();
$rowsone_dayf = $queryone_dayf->num_rows;

 

Faço esse código de SQL para cada dia. Agradeço a disposição.

[Matheus Tavares 167]

Não não, bro... Muda sua consulta. Você não precisa fazer várias, uma é suficiente:

SELECT data, COUNT( id ) quantidade
FROM tabela
WHERE data BETWEEN '2018-01-15' AND '2018-01-22'
GROUP BY data

Com essa consulta o resultado seria tipo assim (usei numa tabela q eu tinha aqui pra testar):

data_checkin	quantidade
2017-01-15	3
2017-01-16	6
2017-01-17	6
2017-01-18	2
2017-01-19	13
2017-01-20	15
2017-01-21	6
2017-01-22	6

 

Agora é só pôr no gráfico... :)

[Jhess 46]

E depois só preciso fazer um while com o row? para pegar as variáveis: $rowsone_dayf / $rowsone_daya

 

Certo, com isso, eliminei metade de código, agora só a data que fica errada nesse formato.

[Matheus Tavares 167]

Sobre a data, não sei o que pode ser pq não conheço essa biblioteca, mas veja a documentação. Tem muita coisa relacionada a data ali no meio: http://morrisjs.github.io/morris.js/lines.html

 

Eu usei e recomendo o http://www.chartjs.org/

 

Vou mover para a área correta (JS).

[Jhess 46]

Beleza, usei o chartjs.org mas ele não aparece pra mim (os gráficos).

 

Referente ao SQL, estou com problemas, como eu defino a variável: $hoje para pegar o resultado apenas de hoje no while?

 

$hoje = date("Y-m-d");
$sql = "SELECT data, COUNT(id_af) quantidade FROM af WHERE data BETWEEN '2018-01-15' AND '".$hoje."' AND tipo_af = 'a' GROUP BY data";
$result = $mysqli->query($sql);
if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        //Aqui eu gostaria de pegar separadamente, cada dia o seu resultado.
    }
}

 

[Matheus Tavares 167]

16 minutos atrás, Jesse&Francinete disse:

pegar o resultado apenas de hoje no while?

echo $row[ 'data' ];
echo $row[ 'quantidade' ];

 

16 minutos atrás, Jesse&Francinete disse:

usei o chartjs.org mas ele não aparece pra mim (os gráficos).

Olha o exemplo e tenta fazer igual: http://www.chartjs.org/samples/latest/charts/line/basic.html

Se não conseguir, poste o código.

 

[Jhess 46]

Em 22/01/2018 at 14:11, Matheus Tavares disse:

Eu usei e recomendo o http://www.chartjs.org/

 

Dei uma lida na documentação e vi os erros nos quais os meus gráficos não apareciam, era a versão do html... >,<

 

Agora ficou perfeito, do jeito que queria!

 

 

Até coloquei "Ontem  | Hoje" para ficar mais xique. Já tinha desistido de gráficos, e as datas ficaram normais (d/m/Y). 

 

Tópico resolvido!

[Matheus Tavares 167]

49 minutos atrás, Jesse&Francinete disse:

Agora ficou perfeito, do jeito que queria!

Show de bola. Parabéns!

 

É escolha sua, mas se quiser, seria legal compartilhar parte da sua solução pra ajudar quem cair aqui de paraquedas no futuro.

[Jhess 46]

Com certeza,

 

Gráfico:

 

function createConfig(position) {
            return {
                type: 'line',
                data: {
                    labels: ["19/01/2018", "20/01/2018", "21/01/2018", "22/01/2018", "23/01/2018", "Ontem", "Hoje"],
                    datasets: [{
                        label: "Ocorrências abertas",
                        borderColor: '#04B404',
                        backgroundColor: '#04B404',
                        data: [0, 0, 0, 0, 0, 0, 0],
                        fill: false,
                    }, {
                        label: "Ocorrências fechadas",
                        borderColor: '#B40404',
                        backgroundColor: '#B40404',
                        data: [0, 0, 0, 0, 0, 0, 0],
                        fill: false,
                    }]
                },
                options: {
                    responsive: true,
                    title:{
                        display: true,
                        text: 'Relatório semanal'
                    },
                    tooltips: {
                        position: position,
                        mode: 'index',
                        intersect: false,
                    },
					//Tratamento para remover decimais: 0.1 / 0.5 / 1.0...
                    scales: {
                         yAxes: [{
                             ticks: {
                                 beginAtZero: true,
                                 userCallback: function(label, index, labels) {
                                     if (Math.floor(label) === label) {
                                         return label;
                                     }

                                 },
                             }
                         }],
                     },
                }
            };
        }

        window.onload = function() {
            var container = document.querySelector('.chart');
            ['average'].forEach(function(position) {
                var div = document.createElement('div');
                div.classList.add('chart-container');

                var canvas = document.createElement('canvas');
                div.appendChild(canvas);
                container.appendChild(div);

                var ctx = canvas.getContext('2d');
                var config = createConfig(position);
                new Chart(ctx, config);
            })
        };

 

Página HTML:

 

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="height: 100%;">
  <div class="chart">
  </div>
</div>
</body>
</html>

 

Também fiz o include dentro do head:

 

<script src="dist/js/Chart.bundle.js"></script>

 

Fica aí para quem precisar, hehe.