Line Chart being populated only with last record only in while/php

Asked

Viewed 93 times

1

Code:

<!doctype html>
<html>

<head>
    <title>Line Chart</title>
    <script src="dist/Chart.bundle.js"></script>
    <script src="utils.js"></script>
    <style>
    canvas{
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    </style>
</head>

<body>
    <div style="width:75%;">
        <canvas id="canvas"></canvas>
    </div> 
    <script>
        var config = {
            type: 'line',
            data: {
                labels: ["1", "2", "3", 
                         "4", "5", "6", 
                         "7", "8", "9", 
                         "10", "11", "12", 
                         "13", "14", "15", 
                         "16", "17", "18", 
                         "19", "20", "21", 
                         "22", "23", "24",
                         "25", "26", "27", 
                         "28", "29", "30", 
                         "31"],

                datasets: [{ 
                            <?php
                            $servername = "192.168.0.29";
                            $username = "root";
                            $password = "";
                            $dbname = "ocomon_rc6";
                            $conn = mysqli_connect($servername, $username, $password, $dbname);
                            if (!$conn) {
                                die("Connection failed: " . mysqli_connect_error());
                            }
                            $sql = "SELECT * FROM view_chamadosrow";
                            $result = mysqli_query($conn, $sql);
                                while($row = mysqli_fetch_assoc($result)) { 
                                    $TECNICO = $row["TEC"];
                                    $DIA1  = $row["1"];   $DIA2  = $row["2"];    $DIA3  = $row["3"]; 
                                    $DIA4  = $row["4"];   $DIA5  = $row["5"];    $DIA6  = $row["6"]; 
                                    $DIA7  = $row["7"];   $DIA8  = $row["8"];    $DIA9  = $row["8"]; 
                                    $DIA10 = $row["10"];  $DIA11 = $row["11"];   $DIA12 = $row["11"]; 
                                    $DIA13 = $row["13"];  $DIA14 = $row["14"];   $DIA15 = $row["14"]; 
                                    $DIA16 = $row["16"];  $DIA17 = $row["17"];   $DIA18 = $row["17"]; 
                                    $DIA19 = $row["19"];  $DIA20 = $row["20"];   $DIA21 = $row["20"]; 
                                    $DIA22 = $row["22"];  $DIA23 = $row["23"];   $DIA24 = $row["23"]; 
                                    $DIA25 = $row["25"];  $DIA26 = $row["26"];   $DIA27 = $row["26"]; 
                                    $DIA28 = $row["28"];  $DIA29 = $row["29"];   $DIA30 = $row["30"]; 
                                    $DIA31 = $row["31"]; 

                                      }
                                     mysqli_close($conn);
                                    ?>

                               label: "<?php echo "$TECNICO"; ?>",
                               data: [
                                      <?php echo "$DIA1";  ?> , <?php echo "$DIA2";  ?> , <?php echo "$DIA3";  ?> ,
                                      <?php echo "$DIA4";  ?> , <?php echo "$DIA5";  ?> , <?php echo "$DIA6";  ?> ,
                                      <?php echo "$DIA7";  ?> , <?php echo "$DIA8";  ?> , <?php echo "$DIA9";  ?> ,
                                      <?php echo "$DIA10"; ?> , <?php echo "$DIA11"; ?> , <?php echo "$DIA12"; ?> ,
                                      <?php echo "$DIA13"; ?> , <?php echo "$DIA14"; ?> , <?php echo "$DIA15"; ?> ,
                                      <?php echo "$DIA16"; ?> , <?php echo "$DIA17"; ?> , <?php echo "$DIA18"; ?> ,
                                      <?php echo "$DIA19"; ?> , <?php echo "$DIA20"; ?> , <?php echo "$DIA21"; ?> ,
                                      <?php echo "$DIA22"; ?> , <?php echo "$DIA23"; ?> , <?php echo "$DIA24"; ?> ,
                                      <?php echo "$DIA25"; ?> , <?php echo "$DIA26"; ?> , <?php echo "$DIA27"; ?> ,
                                      <?php echo "$DIA28"; ?> , <?php echo "$DIA29"; ?> , <?php echo "$DIA30"; ?> ,
                                      <?php echo "$DIA31"; ?> 
                                     ]

                          }]
                      },

            options: {
                responsive: true,
                title:{
                    display:true,
                    text:'CONTROLE DE CHAMADOS FECHADOS'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Dias'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Quantidades'
                        }
                    }]
                }
            }
        };

        window.onload = function() {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myLine = new Chart(ctx, config);
        };

    </script>
</body>

</html>

My query returns as follows:

Aline           0   2   0   0   1   0   0   0   0   1   4   0   0   0   1   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0
Antonio         0   0   0   0   0   0   0   0   3   2   0   0   0   0   1   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0
Leonardo        0   0   0   1   0   0   0   0   1   5   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0
Daniel          0   6   2   8   1   0   0   10  2   8   6   5   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0
Danilo          0   2   0   2   9   0   0   0   0   0   1   1   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0
Marcelo         0   4   0   0   0   0   0   0   0   0   0   1   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0
Fernando        0   1   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0
Paulo           0   5   0   0   3   2   0   5   4   5   0   7   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0
Leandro         0   0   0   0   0   0   0   0   7   0   4   1   0   0   4   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0
Portuga         0   1   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0
Rodrigo         0   0   0   0   0   0   0   0   4   0   6   2   0   0   2   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0
Vieira          0   1   1   27  3   0   0   1   0   1   0   1   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0
Ass. Tec.       0   2   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0   0

Doc do chartjs: Chart js.

Only Chart is only being populated with the last record:

inserir a descrição da imagem aqui

Example of SQL: http://sqlfiddle.com/#! 9/b4fba3/1

  • Dude, there are some things I don’t understand why you did it. For example: why <?php echo "$DIA1"; ?>? If you’re passing echo, you don’t need to turn it into string, it might just be <?php echo $DIA1; ?>. I also need to warn you to avoid including all your logic in the middle of javascript, you will end up regretting it when you maintain this code later. Stores the whole string there at the beginning of the code and only gives echo where you want.

1 answer

2


My implementation for this problem by following the same basic commands described would be something like:

https://gist.github.com/wilcorrea/797500f5fed2f8e27bd8a6cf0c6d1e68

  <?php

  // JS property
  $label = "";
  // JS property
  $data = [];

  $host = "192.168.0.29";
  $user = "root";
  $password = "";
  $database = "ocomon_rc6";
  $connection = mysqli_connect($host, $user, $password, $database);
  if (!$connection) {
      die("Connection failed: " . mysqli_connect_error());
  }
  $sql = "SELECT * FROM view_chamadosrow";
  $result = mysqli_query($connection, $sql);
  /** @noinspection PhpAssignmentInConditionInspection */
  while ($row = mysqli_fetch_assoc($result)) {
      $label = utf8_encode($row["TEC"]);
      unset($row["TEC"]);
      $data[] = $row;
  }
  mysqli_close($connection);

  ?>
  <!doctype html>
  <html>

  <head>
    <title>Line Chart</title>
    <script src="dist/Chart.bundle.js"></script>
    <script src="utils.js"></script>
    <style>
      canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
      }
    </style>
  </head>

  <body>
  <div style="width:75%;">
    <canvas id="canvas"></canvas>
  </div>
  <script>
    var config = {
      type: 'line',
      data: {
        labels: ["1", "2", "3",
          "4", "5", "6",
          "7", "8", "9",
          "10", "11", "12",
          "13", "14", "15",
          "16", "17", "18",
          "19", "20", "21",
          "22", "23", "24",
          "25", "26", "27",
          "28", "29", "30",
          "31"],

        datasets: [{
          label: "<?php echo "$label"; ?>",
          data: "<?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>"
        }]
      },

      options: {
        responsive: true,
        title: {
          display: true,
          text: 'CONTROLE DE CHAMADOS FECHADOS'
        },
        tooltips: {
          mode: 'index',
          intersect: false,
        },
        hover: {
          mode: 'nearest',
          intersect: true
        },
        scales: {
          xAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'Dias'
            }
          }],
          yAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'Quantidades'
            }
          }]
        }
      }
    };

    window.onload = function () {
      var ctx = document.getElementById("canvas").getContext("2d");
      window.myLine = new Chart(ctx, config);
    };

  </script>
  </body>

  </html>
  • Gist updated with business-related needs.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.