Jump to content
Fórum Script Brasil
  • 0

Ajuda em algoritmo e chartjs - página php


alternativo em

Question

Boa tarde a todos,

Sou iniciante e fiz um algoritmos para um dashboard contabilizar os erros de produção de peças e necessito incluir uma tabela e um gráfico mostrando por defeito, qual seria a distribuição dos erros entre 4 categorias (Não aplicável, defeito mínimo, defeito grande e peça inutilizável. Tenho que contabilizar pela quantidade o percentual de desperdício do processo. Fiz um código utilizando php e Chartjs (Sou júnior/iniciante) e a tabela esta sendo gerada conforme espero, incluindo o % de desperdício (quanto maior, pior). O problema é que gráfico não carrega corretamente as informações pois acho que a formatação dos números e a fórmula utilizada para gerar os percentuais do gráfico estão incorretos. Outra coisa que acontece é que o gráfico fica muito grande, o limite passa de 100% mesmo eu tentando restringir o tamanho e o percentual máximo das categorias (n Se alguém puder me ajudar eu agradeço).

Segue abaixo o código completo:

A tabela utilizada tem as seguintes colunas: Tipo da peça, erro, classifica (que é um select com 4 opções como você pode ver no script) e um campo valor_defeito que uso para contar ou somar (sempre 1 para todos os registros).

===========================================================================

<!DOCTYPE html>

<html>

 

<head>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

</head>

 

<body>

    <?php

 

    // Conexão com o banco de dados

    $servername = "localhost";

    $username = "root";

    $password = "adm123";

    $dbname = "defeitos";

 

    $conn = new mysqli($servername, $username, $password, $dbname);

 

    // Verifica se a conexão foi estabelecida com sucesso

    if ($conn->connect_error) {

        die("Falha na conexão: " . $conn->connect_error);

    }

 

    // Query para obter os valores necessários

    $sql = "SELECT tipo_peca, COUNT(valor_defeito) AS total,

        SUM(CASE WHEN classifica = '1 – Não aplicável THEN valor_defeito ELSE 0 END) AS na_count,

        SUM(CASE WHEN classifica = '2 -– defeito minimo' THEN valor_defeito ELSE 0 END) AS nc_count,

        SUM(CASE WHEN classifica = '3 – defeito grande' THEN valor_defeito ELSE 0 END) AS pc_count,

        SUM(CASE WHEN classifica = '4 – peça inutilizavel' THEN valor_defeito ELSE 0 END) AS fc_count

        FROM master_table

        GROUP BY tipo_defeito";

 

    $result = $conn->query($sql);

 

    ?>

    </br>

 

    <main class="content">

        <div class="container-fluid p-0">

            <h1 class="h3 mb-3"> Dashboard</h1>

        </div>

 

        </br>

 

        <?php

 

        if ($result->num_rows > 0) {

            // Início da tabela com borda

            echo "<table style='border: 1px solid black;'>

    <tr style='background-color: black; color: white;'>

        <th> tipo_peca</th>

        <th style='text-align: center;'>Total</th>

        <th style='text-align: center;'>1 – Não aplicável</th>

        <th style='text-align: center;'>2 - defeito minimo</th>

        <th style='text-align: center;'>3 - defeito grande</th>

        <th style='text-align: center;'>4 - peça inutilizavel</th>

        <th style='text-align: center;'>Level defeito (%)</th>

    </tr>";

 

            // Loop através dos registros

            while ($row = $result->fetch_assoc()) {

                // Cálculo do Level

                $defeitoLevel = (($row['nc_count']) / $row['total'] - $row['na_count']) * 0.025 +

                    (($row['pc_count']) / $row['total'] - $row['na_count']) * 0.75 +

                    (($row['fc_count']) / $row['total'] - $row['na_count']) * 1;

 

                // Determina a cor de fundo com base no Level

                $defeitoColor = '';

                if ($defeitoLevel >= 0 && $defeitoLevel <= 0.3) {

                    $defeitoLevel = '#f5b7b1';

                } elseif ($defeitoLevel > 0.3 && $defeitoLevel <= 0.6) {

                    $defeitoColor = ' #f7dc6f';

                } elseif ($defeitoLevel > 0.6 && $defeitoLevel <= 0.85) {

                    $defeitoColor = '#58d68d';

                } elseif ($defeitoLevel > 0.85 && $defeitoLevel <= 1) {

                    $defeitoColor = '#5dade2';

                }

 

                // Arredonda o valor do Compliance Level e remove as casas decimais

                $defeitoLevel = round($defeitoLevel * 100);

 

                // Exibição dos valores na tabela com formatação de cores

                echo "<tr style='background-color: white;'>

                <td>" . $row['tipo_peca'] . "</td>

                <td style='text-align: center;'>" . $row['total'] . "</td>

                <td style='text-align: center;'>" . $row['na_count'] . "</td>

                <td style='text-align: center;'>" . $row['nc_count'] . "</td>

                <td style='text-align: center;'>" . $row['pc_count'] . "</td>

                <td style='text-align: center;'>" . $row['fc_count'] . "</td>

                <td style='background-color: $defeitoColor; text-align: center;'>" . $defeitoLevel . "%</td>

            </tr>";

            }

 

            // Fim da tabela

            echo "</table>";

        } else {

            echo "Nenhum registro encontrado";

        }

        $conn->close();

 

        ?>

        </br>

        </br>

        <!-- Elemento do canvas para renderizar o gráfico -->

        <canvas id="radarChart"></canvas>

 

        <script>

            // Dados para o gráfico

            var labels = [

                <?php

                // Loop através dos registros para obter as labels do gráfico

                $result->data_seek(0);

                while ($row = $result->fetch_assoc()) {

                    echo "'" . $row['tipo_peca'] . "',";

                }

                ?>

            ];

 

            var data = {

                labels: labels,

                datasets: [{

                    label: 'Defeito Level',

                    data: [

                        <?php

                        // Loop através dos registros para obter os dados das séries do gráfico

                        $result->data_seek(0);

                        while ($row = $result->fetch_assoc()) {

                            $complianceLevel = (($row['nc_count']) / $row['total'] - $row['na_count']) * 0.025 +

                                (($row['pc_count']) / $row['total'] - $row['na_count']) * 0.75 +

                                (($row['fc_count']) / $row['total'] - $row['na_count']) * 1;

                            //$complianceLevel = round($complianceLevel * 100);

                            echo $defeitoLevel . ",";

                        }

                        ?>

                    ],

                    backgroundColor: 'rgba(179, 181, 198, 0.2)',

                    borderColor: 'rgba(179, 181, 198, 1)',

                    pointBackgroundColor: 'rgba(179, 181, 198, 1)',

                    pointBorderColor: "#fff",

                    pointHoverBackgroundColor: "#fff",

                    borderWidth: 8

                }]

            };

 

            // Configurações do gráfico

            var options = {

                scale: {

                    angleLines: {

                        color: 'black' // Define a cor das linhas do gráfico como preto

                    },

                    ticks: {

                        display: true, // Oculta os ticks (rótulos) do gráfico

                        beginAtZero: true,

                        min: 0,

                        max: 100

                    }

                },

                plugins: {

                    title: {

                        display: true,

                        text: 'Defeito Level', // Define o nome do gráfico

                        font: {

                            size: 18 // Define o tamanho da fonte do nome do gráfico

                        }

                    }

                }

            }

 

            // Renderiza o gráfico

            var ctx = document.getElementById('radarChart').getContext('2d');

            new Chart(ctx, {

                type: 'radar',

                data: data,

                options: options

            });

        </script>

</body>

 

</html>

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Eu coloquei os seguintes dados na master_table (id,tipo_peca,valor_defeito,tipo_defeito,classifica):

(1,1,1,1),(2,2,2,2),(3,3,3,3) e o nível de defeito deu -178%,5% e 225%, e o JavaScript desenhou um monte de triângulos.

O primeiro problema é a tabela. Vamos supor que a fábrica produz 1000 parafusos redondos e 1000 parafusos quadrados, e o pessoal do Controle e Qualidade encontrou 999 parafusos redondos com defeito mais 999 parafusos quadrados com defeitos, e eles classificaram 998 parafusos redondos como inúteis e 997 parafusos quadrados como inúteis, 1 parafuso redondo como recuperável e 2 parafusos quadrados como recuperáveis. Como colocar essa informação na tabela?

Mesmo com tantos parafusos com tantos defeitos, o maior nível de defeito é 100%, logo essa equação tem problema:

 $defeitoLevel = (($row['nc_count']) / $row['total'] - $row['na_count']) * 0.025 +
      (($row['pc_count']) / $row['total'] - $row['na_count']) * 0.75 +
      (($row['fc_count']) / $row['total'] - $row['na_count']) * 1;
    $defeitoColor = '';
    if ($defeitoLevel >= 0 && $defeitoLevel <= 0.3) 
        {$defeitoColor = '#f5b7b1';} elseif ($defeitoLevel > 0.3 && $defeitoLevel <= 0.6) 
        {$defeitoColor = ' #f7dc6f';} elseif ($defeitoLevel > 0.6 && $defeitoLevel <= 0.85)
        {$defeitoColor = '#58d68d';} elseif ($defeitoLevel > 0.85 && $defeitoLevel <= 1) 
        {$defeitoColor = '#5dade2';}

Tem um erro de digitação nesse código, você escreveu $defeitoNivel ao invés de $defeitoColor logo na primeira linha. Essa equação também é utilizada para alimentar os dados no JavaScript.

Para testar o seu código, eu fiz algumas simplificações:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<?php
$conn=new mysqli("localhost","root","","laravel");
$sql="SELECT tipo_peca, COUNT(valor_defeito) AS total,
        SUM(CASE WHEN classifica = 1 THEN valor_defeito ELSE 0 END) AS na_count,
        SUM(CASE WHEN classifica = 2 THEN valor_defeito ELSE 0 END) AS nc_count,
        SUM(CASE WHEN classifica = 3 THEN valor_defeito ELSE 0 END) AS pc_count,
        SUM(CASE WHEN classifica = 4 THEN valor_defeito ELSE 0 END) AS fc_count
        FROM master_table GROUP BY tipo_defeito";
$result = $conn->query($sql); ?>
<main>
<h1>Dashboard</h1>
<?php
if ($result->num_rows > 0) {
  echo "<table>
        <th>Tipo_peca<th>Total<th>NaoAplica<th>Minimo<th>Grande<th>Inutilizável<th>Nível-%";
  while ($row = $result->fetch_assoc()) {
    $defeitoLevel = (($row['nc_count']) / $row['total'] - $row['na_count']) * 0.025 +
      (($row['pc_count']) / $row['total'] - $row['na_count']) * 0.75 +
      (($row['fc_count']) / $row['total'] - $row['na_count']) * 1;
    $defeitoColor = '';
    if ($defeitoLevel >= 0 && $defeitoLevel <= 0.3) 
        {$defeitoColor = '#f5b7b1';} elseif ($defeitoLevel > 0.3 && $defeitoLevel <= 0.6) 
        {$defeitoColor = ' #f7dc6f';} elseif ($defeitoLevel > 0.6 && $defeitoLevel <= 0.85)
        {$defeitoColor = '#58d68d';} elseif ($defeitoLevel > 0.85 && $defeitoLevel <= 1) 
        {$defeitoColor = '#5dade2';}
    $defeitoLevel = round($defeitoLevel * 100);
    echo "<tr><td>" . $row['tipo_peca'] . "
          <td>" . $row['total'] . "
          <td>" . $row['na_count'] . "
          <td>" . $row['nc_count'] . "
          <td>" . $row['pc_count'] . "
          <td>" . $row['fc_count'] . "
          <td style='background-color: $defeitoColor; text-align: center;'>" 
          . $defeitoLevel . "%";}
    echo "</table>";} else {echo "Nenhum registro encontrado";}
    $conn->close();?>
<canvas id="radarChart"></canvas>
<script>
labels = [
  <?php
  $result->data_seek(0);
  while ($row = $result->fetch_assoc()) {
    echo "'" . $row['tipo_peca'] . "',";} ?> ];
data = {labels: labels,
  datasets: [{label: 'Defeito Level',
    data: [
      <?php
      $result->data_seek(0);
      while ($row = $result->fetch_assoc()) {
        $complianceLevel = (($row['nc_count']) / $row['total'] - $row['na_count']) * 0.025 +
          (($row['pc_count']) / $row['total'] - $row['na_count']) * 0.75 +
          (($row['fc_count']) / $row['total'] - $row['na_count']) * 1;
          echo $defeitoLevel . ",";} ?> ],
    backgroundColor: 'rgba(179, 181, 198, 0.2)',
    borderColor: 'rgba(179, 181, 198, 1)',
    pointBackgroundColor: 'rgba(179, 181, 198, 1)',
    pointBorderColor: "#fff",
    pointHoverBackgroundColor: "#fff",
    borderWidth: 8}]};
options = {scale: {angleLines: {color: 'black'},
                  ticks: {display: true,beginAtZero: true,min: 0,max: 100}},
           plugins: {title: {display: true,text: 'Defeito Level', 
                    font: {size: 18}}}}
ctx = document.getElementById('radarChart').getContext('2d');
new Chart(ctx, {type: 'radar',data: data,options: options});
</script>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      651.8k
×
×
  • Create New...