0

Hola soy nuevo con esto de las graficas y tengo un detalle con el Google chart.js quiero imprimir unos valores en la grafica pero no sé como hacerlo. lo que quiero hacer es imprimir unos valores que tengo que son t1, t2,t3,t4 y t5 pero la grafica me imprime solo t1 de manera vertical y no horizontal como se debería hacer además de que me gustaría agregar una línea tipo average de fondo para ver las cantidades optimas.

datos.php

    <?php
    // Seteamos la cabecera a JSON
    header('Content-Type: application/json');
    
    // Configuramos la conexión a la base de datos
    define('DB_HOST', 'localhost');
    define('DB_USERNAME', 'root');
    define('DB_PASSWORD', '');
    define('DB_NAME', 'thanks');
    
    // Desplegamos la conexión a la Basde de Datos
    $mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
    
    $mysqli->query("SET NAMES 'utf8'");
    
    if(!$mysqli){
        die("La Conexión ha fallado: " . $mysqli->error);
    }
    
    // Seleccionamos los datos de la tabla de act
    $query = sprintf("SELECT t1, t2, t3, t4, t5 FROM act" );
    
    $result = $mysqli->query($query);
    
    // Hacemos un bucle con los datos obntenidos
    $data = array();
    foreach ($result as $row) {
        $data[] = $row;
    }
    
    // Limpiamos memoria consumida al extraer los datos
    $result->close();
    
    // Cerramos la conexión a la Base de Datos
    $mysqli->close();
    
    // Mostramos los datos en formato JSON
    print json_encode($data);
    
    //var_dump($data);

datos.js

    $(document).ready(function() {
        $.ajax({
            url: "php/datos.php",
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            method: "GET",
            success: function(data) {
                var t1 = [];
                var t2 = [];
                var t3 = [];
                var t4 = [];
                var t5 = [];
            
                var color = ['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)'];
                var 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)'];
                console.log(data);
    
                for (var i in data) {
                    t1.push(data[i].t1);
                    t2.push(data[i].t2);
                    t3.push(data[i].t3);
                    t4.push(data[i].t4);
                    t5.push(data[i].t5);
    
                }
    
                var chartdata = {
                    labels: t1,
                    datasets: [{
                        label: t1,
                        backgroundColor: color,
                        borderColor: color,
                        borderWidth: 2,
                        hoverBackgroundColor: color,
                        hoverBorderColor: bordercolor,
                        data: t2
                    }]
                };
                
    
                var mostrar = $("#miGrafico");
    
                var grafico = new Chart(mostrar, {
                    type: 'bar',
                    data: chartdata,
                    options: {
                        responsive: true,
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                });
            },
            error: function(data) {
                console.log(data);
            }
        });
    });

estuve buscando tutoriales y documentación pero casi todo es para saber como se conecta y las cosas basicas de mostrar datos pero no eh encontrado nada sobre lo que busco o no sé como buscarlo.

Esto es lo que me apareze introducir la descripción de la imagen aquí lo de amarillo es lo que quiero que aparezca introducir la descripción de la imagen aquí

2 respuestas 2

0

al parecer pueden ser 2 cosas. 1) La data no la estás armando bien en tu array o 2) en las variables del gráfico no la estás colocando como debe ser.

En la documentación de chart.js te explican cómo debe ser la estructura. Te dejo el link por acá. https://www.chartjs.org/docs/latest/samples/bar/vertical.html

Gráfico de barras vertical

Así mismo entiendo que para tu proyecto, la estructura que deberías sería más o menos así:

const data = {
labels: ['t1','t2','t3','t4','t5'],
datasets: [
  {
    label: 't1',
    data: [3,34,13],
    borderColor: Utils.CHART_COLORS.red,
    backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  },
  {
    label: 't2',
    data: [2,35,4],
    borderColor: Utils.CHART_COLORS.red,
    backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  },
  {
    label: 't3',
    data: [3,36,3],
    borderColor: Utils.CHART_COLORS.yellow,
    backgroundColor: Utils.transparentize(Utils.CHART_COLORS.yellow, 0.5),
  },
  {
    label: 't4',
    data: [3,37,6],
    borderColor: Utils.CHART_COLORS.blue,
    backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
  },
  {
    label: 't5',
    data: [4,38,5],
    borderColor: Utils.CHART_COLORS.green,
    backgroundColor: Utils.transparentize(Utils.CHART_COLORS.green, 0.5),
  }
]

Espero pueda ayudarte en algo. Saludos.

1
  • nop no es eso , lo que quiero es que aparezca lo de amarillo el "3, 2,3,3,4" y no el "3, 34, 13" , pero lo del manuel del chart es para ponerlo de manera manual mientras que yo lo tengo de manera automatica pero me trae el "3, 34, 13" y no se como poner la syntaxis para traer el "3,2,3,3,4" a eso me referia con manera horizontal. Commented el 4 may. 2021 a las 23:16
0

datos.js

$(document).ready(function() {
        $.ajax({
            url: "php/datos.php",
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            method: "GET",
            success: function(data) {
                var t1 = [];
                var t2 = [];
                var t3 = [];
                var t4 = [];
                var t5 = [];
            
                var color = ['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)'];
                var 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)'];
                console.log(data);
    
                for (var i in data[0]) {
                    t1.push(data[0][i].t1);
                    t2.push(data[0][i].t2);
                    t3.push(data[0][i].t3);
                    t4.push(data[0][i].t4);
                    t5.push(data[0][i].t5);
    
                }
                var labels = [];
                var valores = [];
                var general = [];
    
    for (const [index, [key, value]] of Object.entries(Object.entries(data[0]))) {
    valores.push(value);
        labels.push(key);
       var datos =
    
            {
                label: value,
                backgroundColor: color[index],
                borderColor: color[index],
                borderWidth: 2,
                hoverBackgroundColor: color[index],
                hoverBorderColor: bordercolor[index],       
                data: Number(value)
            };
    
            general.push(  {
                label: value,
                backgroundColor: color[index],
                borderColor: color[index],
                borderWidth: 2,
                hoverBackgroundColor: color[index],
                hoverBorderColor: bordercolor[index],       
                data: Number(value)
            });
    }
    
    console.log(general);
    
                var chartdata = {
                    labels: labels,
                    datasets: [{
    
                        label: labels,
                    
                        backgroundColor: color,
                    
                        borderColor: color,
                    
                        borderWidth: 2,
                    
                        hoverBackgroundColor: color,
                    
                        hoverBorderColor: bordercolor,
                    
                        data: valores
                    
                    }]
                };
    
                var mostrar = $("#miGrafico");
                var grafico = new Chart(mostrar, {
                    type: 'bar',
                    data: chartdata, 
                    options: {
                        responsive: true,
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                });
                
            },
            error: function(data) {
                console.log(data);
            }
        });
    });

datos.php se queda igual , solo cambie el .js

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.