PHP Colocar gráfico que muda os valores ao clicar em um botão

David Martinho · 19 de janeiro de 2022

Bom Dia Pessoal

Eu queria colocar um simulador de capacidade de produção, e pensei em fazer um post do valor dos botões, que corresponde á linha de produção (isso é que vai mudar de linha para linha)

porém se eu colocar o valor na query manualmente funciona, mas se colocar uma váriavel os dados não aparecem.

Quem souber a solução por favor ajude.

Funcionando -> QUERY COM INFORMAÇÕES INSERIDAS MANUALMENTE:

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

COM O POST ->

O SUPOSTO ERA AO CLICAR NUM DOS BOTÕES CINZENTOS ELE ASSUMIR A LINHA COMO ACIMA ("2N21") E MOSTRAR OS DADOS DESSA LINHA MAS EU CLICO NO BOTÃO E A VARIÁVEL ASSUME O VALOR DO BOTÃO MAS O GRÁFICO NÃO MUDA.

CÓDIGO PÁG PRINCIPAL:

<?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">
    <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>
</button>
    <table align="center">
<tr>
<td align="center"><b>Linha:</td>
<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>
    <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>

<div id="chart-container2">
        <canvas id="graphCanvas2"></canvas>
    </div>

    <script>
        $(document).ready(function () {
            showGraph2();
        });


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

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

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

                    var graphTarget = $("#graphCanvas2");

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

CÓDIGO DATA.PHP (QUERY)

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

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

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


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

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

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

mysqli_close($conn);

echo json_encode($data);



}
?>

David Martinho · 19 de janeiro de 2022

Bom dia pessoal, eu tenho um sistema de gráficos onde ao clicar em um botão, supostamente o gráfico devia mostrar os valores do botão selecionado...

Porém tem um problema, eu criei um post onde o valor do botão vai para a Query SQL e ai eu coloco a variável do botão na consulta:

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

Só que o gráfico também vai buscar os valores à mesma Query, e quando vai, a Váriavel $linha ainda está vazia porque ele executa a consulta sempre primeiro do que o POST do botão (e então o valor da variável está sempre null).

Como eu faço para o gráfico só executar a consulta após eu clicar no botão, e assim a variável ter um valor

Código POST dos Botões:

<form method="POST" action="data.php">
    <button class="a" type="submit" name="botão" value="2N20">2N20</button>
    <button class="b" type="submit" name="botão" value="2N21">2N21</button>
    <button class="c" type="submit" name="botão" value="2N22">2N22</button>
    <button class="d" type="submit" name="botão" value="2N23">2N23</button>
    <button class="e" type="submit" name="botão" value="2N24">2N24</button>
    <button class="f" type="submit" name="botão" value="2N25">2N25</button>
</form>

Código dos Gráficos:

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

Código SQL (data.php):

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

$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 = '$linha' AND variante = 'V2' ORDER BY ID";

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

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

mysqli_close($conn);

echo json_encode($data);

?>