0

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.

. aquí lo que llevo y donde surgió mi duda

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 aparezca así

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.

6
  • ¿Te refieres a hacer algo como esto: Línea de “límite” horizontal en chartjs?
    – Alvaro Montoro
    Commented el 22 abr. 2019 a las 18:07
  • Si, algo así. revise la publicación pero la linea la establecen fija (Es lo que comprendo ,realmente no se mucho de esto, comienzo a involucrarme y me es interesante ). La cuestión que tengo es como puedo hacerlo desde la consulta.
    – Gerardo
    Commented el 22 abr. 2019 a las 18:14
  • El promedio sería algo "fijo" también. Una vez obtienes los valores, calcula el promedio y pinta la línea
    – Alvaro Montoro
    Commented el 22 abr. 2019 a las 18:20
  • Esto sin importar que se sigan agregando datos a la tabla??
    – Gerardo
    Commented el 22 abr. 2019 a las 21:27
  • No estás cargando los datos de forma dinámica, es decir, tus datos los cargas de la base de datos cuando se carga la página y los pones en variables de JavaScript que no van a cambiar hasta que se vuelva a recargar la página. Por lo tanto, la media no va a variar hasta que no se recargue la página. Puedes aplicar alguno de los métodos explicados en la otra pregunta para dibujar la línea horizontal que indique el promedio.
    – Alvaro Montoro
    Commented el 22 abr. 2019 a las 21:33

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.