Mostrar Gráfico ao clicar no botão

ONTheBankz · January 26, 2022 at 09:59 AM

Bom Dia Pessoal

Eu tenho um gráfico que mostra os tempos de ciclo de uma linha de produção e tenho cerca de 5 linhas.

Gostava de ter 5 botões que ao clicar num deles, o gráfico mudasse conforme o valor do botão.

Já criei a pág inicial, os gráficos e a BD, mas os gráficos só funcionam se eu colocar na Query um valor fixo do género:

$sqlQuery = "SELECT linha, variante, tc, mês, id FROM tc_variante WHERE linha = '2N20' AND variante = 'V1' ORDER BY ID";

Cada botão tem o value de uma linha e eu queria criar uma variável que na Query identificasse a linha que o utilizador escolheu através do botão;

Pensei em fazer isso através do POST, mas o gráfico não muda os valores e além disso, ao substituir o "2N20" por "$T_linha" que era a variável que criei, o gráfico fica a zeros.

Será que alguém sabe qual é o problema e que me possa ajudar por favor.

Código INDEX.PHP

<?php
// Create connection
$conn = new mysqli('localhost', 'root', '', 'bootlenecks');
// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT DISTINCT linha FROM variantes";
$result = $conn->query($sql);
?>
<!DOCTYPE html>
<html>
<head>
<title>Bootlenecks Linhas</title>
<link rel="stylesheet" href="index.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<h1>Simulador Capacidade Linhas</h1>
</head>
<body>
    <div id="chart-container">
        <canvas id="graphCanvas"></canvas>
    </div>
    <table>
    <tr>
    <form method='POST' action=''>
    <button class="a" type="submit" name="T_Linha[]" value="2N20">2N20</button>
    <button class="b" type="submit" name="T_Linha[]" value="2N21">2N21</button>
    <button class="c" type="submit" name="T_Linha[]" value="2N22">2N22</button>
    <button class="d" type="submit" name="T_Linha[]" value="2N23">2N23</button>
    <button class="e" type="submit" name="T_Linha[]" value="2N24">2N24</button>
    <button class="f" type="submit" name="T_Linha[]" value="2N25">2N25</button>
</form>
    <table align="center">
<tr>
<td align="center"><b>Linha:</td>
<form method="POST" action=''>
<td><select class="combo" size=1 name="Linha">

  <?php
     while($row = $result->fetch_assoc()) { ?>                
                    <option value="<?php echo $row['linha'] ?>"><?php echo $row['linha'] ?></option> <?php } ?>        
                    <td align="center"><b>Variante:</td>

<td>
<select class="combo" size=1 name="Variante">

<?php
$sql = "SELECT DISTINCT variante FROM variantes";
$result = $conn->query($sql);
while($row2 = $result->fetch_assoc()) { ?>  
?>

<option value="<?php echo $row2['variante'] ?>"><?php echo $row2['variante'] ?></option> <?php } ?>           
</select>
</form>
<script>
        $(document).ready(function () {
            showGraph();
        });

        function showGraph()
        {
            {
                $.post("data.php",
                function (data)
                {
                    console.log(data);
                    var mês = [];
                    var linha = [];
                    var tc = [];

                    for (var i in data) {
                        linha.push(data[i].linha);
                        mês.push(data[i].mês);
                        tc.push(data[i].tc);
                    }

                    var chartdata = {
                        labels: mês, tc, linha,
                        datasets: [
                            {
                                label: 'Bootleneck Linha',
                                backgroundColor: '#49e2ff',
                                borderColor: '#46d5f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: tc
                            }
                        ]
                    };

                    var graphTarget = $("#graphCanvas");


                    var barGraph = new Chart(graphTarget, {
                        type: 'bar',
                        data: chartdata
                    });
                });
            }
        }      
        </script>
  </body>
</html>

CÓDIGO QUERY:

<?php
header('Content-Type: application/json');

if ($_SERVER["REQUEST_METHOD"] == "POST") {
$T_linha = filter_input(INPUT_POST, 'T_Linha');

$conn = mysqli_connect("localhost","root","","bootlenecks");

$sqlQuery = "SELECT linha, variante, tc, mês, id FROM tc_variante WHERE linha = '$T_linha' AND variante = 'V1' ORDER BY ID";

$result = mysqli_query($conn,$sqlQuery);

$data = array();
foreach ($result as $row) {
	$data[] = $row;
}

mysqli_close($conn);

echo json_encode($data);

}

?>

Sign In

Mostrar Gráfico ao clicar no botão

Recommended Posts

ONTheBankz

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information