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 lo de amarillo es lo que quiero que aparezca