[RESOLVIDO] - Data em gráfico

Poste seu código...

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.

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... :)

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.

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

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

>

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.

>

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!

/applications/core/interface/imageproxy/imageproxy.php?img=https://image.prntscr.com/image/uzYIhviIQQGRY9nhMFRrTQ.png&key=415d91b884ee4fb10c4c9d5bbb345531f003a969995a179176bc06fa18467f2b" alt="uzYIhviIQQGRY9nhMFRrTQ.png" />

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!

>

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.

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.