Hace unos días estoy probando chart.js para generar gráficos, puesto que me a parecido muy interesante. Pero llego un momento en el cual estoy generando un gráfico donde mostraría un promedio.
los datos como el promedio los traigo con una consulta de MySQL, lo que me gustaría hacer es de este valor (el promedio generado de la consulta) se trace una linea en toda la gráfica.
quedando como la siguiente imagen
revise varias publicaciones referente a este tema. pero no logro plasmar el resultado que busco, este es parte del código
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grafica ventas</title>
<script src="Chart.bundle.min.js"></script>
</head>
<body>
<div><canvas id="venta" width="100" height="40"></canvas></div>
<script>
<?php
$servidor="localhost";
$base="tienda";
$user="root";
$pass="";
$conexion=new mysqli($servidor,$user,$pass,$base);
if($conexion->connect_errno){
die("La conexion falló: " . $conexion->connect_error);
}
if (!mysqli_set_charset($conexion,"utf8")) {
printf("Error cargando el conjunto de caracteres utf8: %s\n", $mysqli->error);
exit();
}
$sql= "SELECT * FROM `ventam`";
$sqlP= "SELECT ROUND(AVG(ventat),2) as prom FROM `ventam`";
?>
new Chart(document.getElementById("venta"), {
type: 'bar',
data: {
labels: [<?php
$result=mysqli_query($conexion,$sql);
while($registros=mysqli_fetch_array($result))
{
?>
'<?php echo $registros["id"]?>',
<?php
}
?>],
datasets: [
{
label: "Mes",
type: "bar",
backgroundColor: "rgba(49,117,142,0.5)",
backgroundColorHover: "#3e95cd",
data: [<?php
$result=mysqli_query($conexion,$sql);
while($registros=mysqli_fetch_array($result))
{
?>
'<?php echo $registros["ventat"]?>',
<?php
}
?>]
},
{
label: "Promedio venta",
type: "line",
borderColor: "#FF5733",
data: [<?php
$result=mysqli_query($conexion,$sqlP);
while($registros=mysqli_fetch_array($result))
{
?>
'<?php echo $registros["prom"]?>',
<?php
}
?>],
fill: false
}
]
},
options: {
title: {
display: true,
text: 'Venta mensual-promedio '
},
scales: {
ticks: {
beginAtZero:true,
userCallback: function(tick) {
return tick.toString() + '$';
}
}
}
},
legend: { display:true }
});
esta es la tabla
CREATE TABLE `ventam` (
`id` int(30) NOT NULL,
`mes` varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
`year` int(10) NOT NULL,
`ventat` int(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
INSERT INTO `ventam` (`id`, `mes`, `year`, `ventat`) VALUES
(12019, 'Enero', 2018, 4689),
(22019, 'Febrero', 2018, 3549),
(32018, 'Marzo', 2018, 3895),
(42018, 'Abril', 2018, 4893);
Espero puedan ayudarme, gracias.