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

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
  

Chart Doc: Chart.js

Only the chart is populated only with the last record:

SQLexample: link

    
asked by anonymous 15.05.2017 / 16:47

1 answer

2

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

link

  <?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>
    
15.05.2017 / 17:34