Gráfico Dinâmico c/ PHP e Mysqli

odiegodias · Fevereiro 12, 2023

Boa noite a todos,

Gostaria de uma ajuda de vocês

Estou desenvolvendo uma aplicação web que visa possibilitar o acompanhamento de minhas finanças.

Nesta aplicação estou tentando vincular à um gráfico (ApexCharts) o resultado de alguns lançamentos presentes no meu banco de dados a partir de um intervalo de datas

A ideia é atualizar meu gráfico toda vez que um intervalo de data for selecionado

Minha dificuldade está em refletir o intervalo de data no eixo x do gráfico

Meu Código:

<!DOCTYPE html>

<head>

<body>

------------ Formulário que recebe as datas de início e fim-----------------------------------

<?php

//Recebe os dados do formulário

       $dados = filter_input_array(INPUT_POST, FILTER_DEFAULT);
   ?>

   <form class="search-form d-flex align-items-center" method="POST" action="">


   <?php
$data_inicio = "";
if (isset($dados['data_inicio'])) {
$data_inicio = $dados['data_inicio'];
}
?>

       <div class="row mb-3">
       <div class="col-sm-10">
           <input type="date" name="data_inicio" value="<?php echo $data_inicio; ?>" class="form-control">
       </div>
       </div>

       <?php
$data_final = "";
if (isset($dados['data_final'])) {
$data_final = $dados['data_final'];
}
?>

       <div class="row mb-3">
       <div class="col-sm-10">
           <input type="date" name="data_final" value="<?php echo $data_final; ?>" class="form-control">
       </div>
       </div>

       <div class="row mb-3">
       <div class="col-sm-10">
           <button type="submit" value="Pesquisar" name="PesqEntreData" class="btn btn-primary">Submit</button>
       </div>
       </div>

</form>

---------------------------- Select que considera o Intervalo de dados ---------------------------------------------

<?php

$ligacao = mysqli_connect('localhost','root','','minhas_economias');

$ligacao-> set_charset("utf8");

$resultados = mysqli_query($ligacao, "SELECT * FROM parcelamento WHERE dt_vencimento BETWEEN :data_inicio AND :data_final");

-------------------------Variavel que recebe as datas de inicio e fim --------------------------------------------------------

       $result_usuarios->bindParam(':data_inicio', $dados['data_inicio']);
       $result_usuarios->bindParam(':data_final', $dados['data_final']);
       $result_usuarios->execute();

-----------------------------Array p/ armanezar os dados do While ---------------------------------------

       $nomes = [];
       $quantidades = [];

       While ($linha = mysqli_fetch_array($resultados, MYSQLI_ASSOC)){

           $nomes[] = "'{$linha['dt_vencimento']}'";

       }

$nomes = implode(',', $nomes);
$quantidades = implode(',', $quantidades);

?>

---- Script do Gráfico ----

let chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

</script>

O resultado que espero seria esse :

image.png.12dcd7ec981e18bce19ac29fe12084dc.png

Se alguém puder me ajudar eu agradeço !

Frank K Hosaka · Fevereiro 12, 2023

Para fazer esse trabalho, eu peguei um chart da cdn. A tabela contém 6 pontos, mas o chart só plotou cinco pontos. Talvez o chart da Apex seja melhor, mas o meu trabalho é só mostrar o algorítimo:

MySQL

CREATE TABLE `tbparcelas` (
  `id` int NOT NULL AUTO_INCREMENT,
  `vencimento` date DEFAULT NULL,
  `valor` float DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

INSERT INTO `tbparcelas` VALUES (1,'2023-02-01',10),(2,'2023-02-02',20),(3,'2023-02-03',5),(4,'2023-02-04',15),(5,'2023-02-05',7),(6,'2023-03-06',15.5);

astudy.php

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" 
    rel="stylesheet" 
    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" 
    crossorigin="anonymous">
<body style="width:50%;margin:0 auto"><div style=height:5%></div>
<title>Dashboard - Minhas Economias</title>
Sugestão: 01/02/2023 12/02/2023
<form class="search-form d-flex align-items-center" method="POST" action="">
    <div class="row mb-3"><div class="col-sm-10">
    <input type=date name=data_inicio class=form-control required>
    </div></div>
    <div class="row mb-3"><div class="col-sm-10">
    <input type=date name=data_final class=form-control required>
    </div></div>
    <div class="row mb-3"><div class="col-sm-10">
    <input type=submit>
    </div></div>        
</form>
<div><canvas id=chart></canvas></div>
<?php
if (!isset($_POST['data_inicio'])) {exit;}
$data_inicio = $_POST['data_inicio'];
$data_final = $_POST['data_final']; 
$mysqli=new mysqli("localhost","root","","astudy");
$query = $mysqli->query("select * from tbparcelas where vencimento 
    between '$data_inicio' and '$data_final'");          
$nomes = [];
$valores = [];
While ($row=$query->fetch_assoc()){
    array_push($nomes,date('d/m',strtotime($row['vencimento'])));
    array_push($valores,$row['valor']);}
$jnomes=json_encode($nomes);
$jvalor=json_encode($valores);
?>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
<script>   
el = document.getElementById('chart');
new Chart(el,{
    type: 'line',
    data: {
        labels: <?=$jnomes?>,
        datasets: [{
            label: "Minhas Economias",
            data: <?=$jvalor?>,
            borderWidth: 1 }]},
        options: {scales: {y: {beginAtZero: false}}}})
</script>

odiegodias · Fevereiro 12, 2023

Simplesmente SENSACIONAL

Muitíssimo obrigado pela ajuda, ficou perfeito

Deu outra cara para meu código ...

Parabéns pelo conhecimento e por poder compatilha-lo

Entrar

Gráfico Dinâmico c/ PHP e Mysqli

Pergunta

odiegodias

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

odiegodias

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades