1

el problema que tengo es que quiero imprimir unos datos en una grafica , tengo el canvas y las consultas ya echas pero no sé como imprimir los valores en la grafica específicamente en el data[], puse un vardumb y las consultas si estas jalando la información, para la impresión de datos yo se que tengo que hacer uso de un array o de pasar la información a un json y luego mandársela a la grafica pero no tengo ni idea de como hacer eso y la razón por la que no los imprimo directamente es por que tengo que imprimir los datos que sean de la misma numero departe calendario y mismo proveedor por lo que deja de ser un solo registro.

<!DOCTYPE html>
<html lang="es">

<head>

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

<body> 

<?php

 include ("conexion_bd.php");

 $consulta = $_GET['id_registro'];  //creo una variable que trae el id_registro
// $prov=$_GET['nombre_proveedor'];



 $sql1= mysqli_query($conexion,"SELECT id_registro, t1, t2, t3, t4, t5, nombre_proveedor, numero_parte, calendario FROM act WHERE id_registro = $consulta");  //selecciono los campos necesarios de la tabla con el id_registro

 if ($sql1){
     $dat1 = mysqli_fetch_array($sql1);
 }else {
     echo "error: " . $query . "<br>" .mysqli_error($conexion);
 

 }

 $proveedor= $dat1['nombre_proveedor'];
 $parte= $dat1['numero_parte'];
 $calendario= $dat1['calendario'];

 $sql= mysqli_query($conexion,"SELECT id_registro, t1, t2, t3, t4, t5, nombre_proveedor, numero_parte, calendario FROM act WHERE nombre_proveedor = '$proveedor' AND calendario = '$calendario' AND numero_parte ='$parte'");  //selecciono los campos necesarios de la tabla con el id_registro

 /*if ($sql){
    $dat2 = mysqli_fetch_array($sql);
}else {
    echo "error: " . $query . "<br>" .mysqli_error($conexion);

}*/
?>


<?php
while($dat=mysqli_fetch_array($sql)){
    var_dump($dat1);
 $t1= $dat['t1'];      //creo vrables guardando los datos consultados 
 $t2= $dat['t2'];
 $t3= $dat['t3'];
 $t4= $dat['t4'];
 $t5= $dat['t5'];
 $id= $dat['id_registro'];

 //$proveedor= $dat['nombre_proveedor'];
 //$parte= $dat['numero_parte'];
 //$calendario= $dat['calendario'];

 $resultado = $t1 + $t2 + $t3 + $t4 + $t5;   

 if($t1>=$t2 && $t1>=$t3 && $t1>=$t4 && $t1>=$t5) 
  {
 $maximo = $t1;
 }elseif ($t2>=$t1 && $t2>=$t3 && $t2>=$t4 && $t2>=$t5)
 {
     $maximo = $t2;
 }elseif ($t3>=$t1 && $t3>=$t2 && $t3>=$t4 && $t3>=$t5)
 {
     $maximo = $t3;
 }elseif ($t4>=$t1 && $t4>=$t2 && $t4>=$t3 && $t4>=$t5)
 {
     $maximo=$t4;
 }elseif ($t5>=$t1 && $t5>=$t2 && $t5>=$t3 && $t5>=$t4)
 {
     $maximo=$t5;
 }
  
     
     $promedio = $resultado/5; 
 ?>
 <?php 
 if($t1<=$t2 && $t1<=$t3 && $t1<=$t4 && $t1<=$t5)  
 {
     $minimo = $t1;
 }elseif ($t2<=$t1 && $t2<=$t3 && $t2<=$t4 && $t2<=$t5)
 {
     $minimo = $t2;
 }elseif ($t3<=$t1 && $t3<=$t2 && $t3<=$t4 && $t3<=$t5)
 {
     $minimo = $t3;
 }elseif ($t4<=$t1 && $t4<=$t2 && $t4<=$t3 && $t4<=$t5)
 {
     $minimo=$t4;
 }elseif ($t5<=$t1 && $t5<=$t2 && $t5<=$t3 && $t5<=$t4)
 {
     $minimo=$t5;
 }
?>



<div class="chart-container">
<canvas id= "graf"></canvas>


    <?php
}
?>


<?php

$stringDatos = "";

$arrayDataSets = "[{type: 'bar', 'label': 'CYCLE TIME', data:[ ";

while($datos = mysqli_fetch_object($sql)){

                $stringDatos .= "$datos[t1],[t2],[t3],[t4],[t5]";

}

// Elimina la última coma

$stringDatos = substr($stringDatos, 0, -1);


$arrayDataSets .= $stringDatos . "]}";

$arrayDataSets .= ", {type: 'line', 'label': 'MAXIMO', data:[";

 

// Borramos la cadena anterior

$stringDatos = "";

while($datos = mysqli_fetch_object($sql)){

      $stringDatos .= "$datos[t1],";

}

// Elimina la última coma

$stringDatos = substr($stringDatos, 0, -1);

$arrayDataSets .= $stringDatos . "]}";

$arrayDataSets .= ", {type: 'line', 'label': 'MINIMO', data:[";

 

// Borramos la cadena anterior

$stringDatos = "";

while($datos = mysqli_fetch_object($sql)){

                $stringDatos .= "$datos[t2],";

}

// Elimina la última coma

$stringDatos = substr($stringDatos, 0, -1);


$arrayDataSets .= $stringDatos . "]}";

$arrayDataSets .= "]";


?>

<script type="text/javascript">

                var mixedChart = new Chart(graf, {

    data: {

        datasets: <?php echo $arrayDataSets; ?>,

        labels: ['T1', 'T2', 'T3', 'T4', 'T5', 'AVERAGE']

    },

    options: {}

});

</script>


</body>
</html>

1 respuesta 1

0
<?php
session_start();
if (isset($_SESSION['usuarios'])) {
    if ($_SESSION['usuarios']['tipo'] != "Admin") {
        header('Location: ../Usuario/usuario.php'); 
    } 
} else {
         header('Location: ../../index.php');
}

$host='localhost'; 
$username = 'root';
$password = '';
$database = 'thanks';

try{
    $pdo = new  PDO("mysql:host=localhost;database=$database", $username, $password);
    
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}catch (PDOExeption $e){

    die("ERROR: could not connect. ".  $e->getMessage());
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>THANKS Digital</title>
    <link style="width:30px;" rel="shortcut icon" href="img/Pr.png" type="image/x-icon">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/panel-act4.css">
    <link rel="stylesheet" type="text/css" href="css/menu-opciones2.css">
    <link rel="stylesheet" type="text/css" href="css/view-activity3.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="stylesheet" type="text/css" href="css/i.css">
    
</head>


<?php

$consulta = $_GET['id_registro'];  //creo una variable que trae el id_registro
// $prov=$_GET['nombre_proveedor'];

 $sql1= "SELECT * FROM thanks.act WHERE id_registro = $consulta";  //selecciono los campos necesarios de la tabla con el id_registro
 $result1 = $pdo->query($sql1);
 while ($row1 = $result1->fetch()){
 $proveedor= $row1['nombre_proveedor'];
 $parte= $row1['numero_parte'];
 $calendario= $row1['calendario'];
 }
try {
    // $sql= mysqli_query($conexion,"SELECT id_registro, t1, t2, t3, t4, t5, nombre_proveedor, numero_parte, calendario FROM act WHERE nombre_proveedor = '$proveedor' AND calendario = '$calendario' AND numero_parte ='$parte'");  //selecciono los campos necesarios de la tabla con el id_registro

    $sql = "SELECT * from thanks.act WHERE nombre_proveedor = '$proveedor' AND calendario = '$calendario' AND numero_parte ='$parte'"; 
     $result = $pdo->query($sql);
         if($result->rowCount()>0){
           $t1 = array();                       //aqui se crean los arrays
           $t2 = array();
           $t3 = array();
           $t4 = array();
           $t5 = array();

              while ($row = $result->fetch()){
                 $t1[] = $row["t1"];
                 $t2[] = $row["t2"];                //aqui recorre el array llenandolo con datos de la BD 
                 $t3[] = $row["t3"];
                 $t4[] = $row["t4"];
                 $t5[] = $row["t5"];

        }unset($result); 

    } else {
            echo "no records matching" ; 
    }
}catch (PDOExeption $e){
    die ("ERROR: could not able to execute $sql. ". $e->getMessage());
} 

unset($pdo);
?>
<!-- //setup Block  -->
<canvas id="myChart" width="400" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"</script>

<script> 

console.log (<?php echo json_encode($t1); ?>)
console.log (<?php echo json_encode($t2); ?>)
console.log (<?php echo json_encode($t3); ?>)
console.log (<?php echo json_encode($t4); ?>)
console.log (<?php echo json_encode($t5); ?>)
const t1 = <?php echo json_encode($t1); ?>              //pasamos los datos a json
const t2 = <?php echo json_encode($t2); ?> 
const t3 = <?php echo json_encode($t3); ?> 
const t4 = <?php echo json_encode($t4); ?> 
const t5 = <?php echo json_encode($t5); ?> 
const data = {
labels: ['REGISTRO 1', 'REGISTRO 2', 'REGISTRO 3', 'REGISTRO 4', 'REGISTRO 5', 'REGISTRO 6'],
        datasets: [{
            label: 't1',
            data: t1,           //en este data se impirmen los datos
            backgroundColor: [
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',         //el color de las graficas
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)'
            ],
            borderColor: [
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)'
            ],
            borderWidth: 1
        },{
            label: 't2',
            data: t2,
            backgroundColor: [
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)'
            ],
            borderColor: [
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)'
            ],
            borderWidth: 1
        },{
            label: 't3',
            data: t3,
            backgroundColor: [
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)'
            ],
            borderColor: [
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)'
            ],
            borderWidth: 1
        },{
            label: 't4',
            data: t4,
            backgroundColor: [
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)'
            ],
            borderColor: [
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)'
            ],
            borderWidth: 1
        },{
            label: 't5',
            data: t5,
            backgroundColor: [
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)'
            ],
            borderColor: [
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)',
                'rgba(128, 128, 128, 128)'
            ],
            borderWidth: 1
        } 
        
        
        ]
    };
//     const actions = [    //ese codigo es para agregar en la grafica un boton para agregar datos.
//         {
//     name: 'Add Data',
//     handler(chart) {
//       const data = chart.data;
//       if (data.datasets.length > 0) {
//         data.labels = Utils.months({count: data.labels.length + 1});

//         for (var index = 0; index < data.datasets.length; ++index) {
//           data.datasets[index].data.push(Utils.rand(-100, 100));
//         }

//         chart.update();
//       }
//     }
//   }

//     ];

    const data2 = {
labels: ['Average'],
        datasets: [{
            label: 'Average',
            data: t1,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }
        ]};
//config Block 

const config  = {

        type :'bar',
        data, 
        options: {
            scales: {
                y:{ 
                    beginAtZero: true 
                }
            }
        }
};



//Render Block
const myChart = new Chart (document.getElementById('myChart'),config);  //aqui carga la grafica y la imprime en pantalla

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.