[SOLUCIONADO] Problema gráfica jquery.flot

[somisomi79]

Hola a todos.
Estoy desesperado, ya que no consigo hacer funcionar las graficas con peticiones ajax al servidor.
Ahora estoy probando con jquery.flot pero nada, no sonsigo sacarle punto, asi que recurro a vosotros a ver si me podeis echar una mano.

Este es el código javascript que tengo

Código:

<!-- jQuery 3 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- FLOT CHARTS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.resize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.pie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.categories.min.js"></script>
<script>
  $(document).ready(function() 
  {
    cliente = document.getElementById("codigoCliente").value;  
    $.ajax(
    {
      url : "core/ss/consumo.php?cliente="+cliente,
      method : "GET",
      success : function(datos)
      {
        console.log(datos);
        $.plot('#bar-chart', [datos], 
        {
          grid  : 
          {
            borderWidth: 1,
            borderColor: '#f3f3f3',
            tickColor  : '#f3f3f3'
          },
          series: 
          {
            bars: 
            {
              show    : true,
              barWidth: 0.5,
              align   : 'center'
            }
          },
          xaxis : 
          {
            mode      : 'categories',
            tickLength: 0
          }
        })
      },
      error : function(data) 
      {
        console.log("ERROR"+data);
      }
    });
  });
</script>

La petición ajax me devuelve lo siguiente:

Pongo link a la imagen, porque parece ser que no se ve en el post
https://imgur.com/a/Zeh66a9
Pero el resultado es una gráfica completamente vacía.
Yo soy más de php y no estoy muy puesto en javascript, cualquier tipo de ayuda es agradecida.

[ocp001a]

Revisa en la pestaña de consola si te muestra los datos en la línea console.log(datos);

O bien si te muestra algún error, pudiera ser que te falta algún script o tengas algún error de sintaxis.

Por último, prueba a pasar el arreglo directo al graficador, en vez de

$.plot('#bar-chart', [datos],

usa

$.plot('#bar-chart', datos,

[Alexis88]

Recibes un objeto JSON como respuesta del servidor, pero no lo tratas como tal. Añade el par atributo-valor dataType: "json" a las opciones del método $.ajax() o, en el cuerpo del método success, usa el método JSON.parse(datos) para parsear la respuesta.

[somisomi79]

Iniciado por ocp001a

Revisa en la pestaña de consola si te muestra los datos en la línea console.log(datos);

O bien si te muestra algún error, pudiera ser que te falta algún script o tengas algún error de sintaxis.

Por último, prueba a pasar el arreglo directo al graficador, en vez de

$.plot('#bar-chart', [datos],

usa

$.plot('#bar-chart', datos,

Muchas gracias, en la pestaña consola los datos se muestran correctamente, esto es lo que muestra console.log(datos):

Código:

[{"fecha":"29","total":"25"},{"fecha":"28","total":"25"},{"fecha":"27","total":"0"},{"fecha":"26","total":"0"},{"fecha":"25","total":"21"}]

He probado también cambiado:
$.plot('#bar-chart', [datos],

por

$.plot('#bar-chart', datos,

y tampoco funciona.

Iniciado por Alexis88

Recibes un objeto JSON como respuesta del servidor, pero no lo tratas como tal. Añade el par atributo-valor dataType: "json" a las opciones del método $.ajax() o, en el cuerpo del método success, usa el método JSON.parse(datos) para parsear la respuesta.

Gracias tambien por tu ayuda.
Si cambio y parseo o pongo el atributo-valor dataType: "json", me cambia el resultado de salida de console.log pero sigue sin funcionar la gráfica.


Pongo nuevamente link a la imagen.
https://imgur.com/a/B9vWcCm
Alguna otra sugerencia???

[Alexis88]

Revisando la documentación oficial (que es a donde uno debe acudir primero), el formato de la información no coincide con el que usas.

Lo primero que debes cambiar son tus fecha y total por label y data. Inicialmente supuse que los nombres de esas propiedades eran irrelevantes; pero hice una prueba y comprobé que es necesario que sean nombradas de esa forma. Luego, vas a tener que cambiar el formato que tienes en mente para mostrar la información. En los ejemplos disponibles en la documentación oficial, el valor correspondiente a data (que actualmente usas como total), es un arreglo que contiene a varios arreglos con dos valores: uno para los valores del eje X y otro para el eje Y. Por lo que veo, quieres mostrar el total de algo (quizá ventas, producción, etc.) por día. El problema con eso es que no se dibujará ninguna gráfica ya que básicamente serían puntos sin conexión (por eso no se visualizan las líneas). Te sugiero que la muestra se realice por meses (lo que iría en label que ahora usas como fecha) y, en cada par de arreglos contenidos en el arreglo de data (que ahora usas como total), irían el día y el total del día.

Si después de esto sigues sin obtener el resultado esperado, por favor, muéstranos la parte crítica del código actualizado. No olvides contrastar lo que estás haciendo con lo que se indica en la documentación oficial.

[somisomi79]

Iniciado por Alexis88

Revisando [URL="https://github.com/flot/flot/blob/master/API.md"]la documentación oficial[/URL] (que es a donde uno debe acudir primero), el formato de la información no coincide con el que usas.

Lo primero que debes cambiar son tus fecha y total por label y data. Inicialmente supuse que los nombres de esas propiedades eran irrelevantes; pero hice una prueba y comprobé que es necesario que sean nombradas de esa forma. Luego, vas a tener que cambiar el formato que tienes en mente para mostrar la información. En los ejemplos disponibles en la documentación oficial, el valor correspondiente a data (que actualmente usas como total), es un arreglo que contiene a varios arreglos con dos valores: uno para los valores del eje X y otro para el eje Y. Por lo que veo, quieres mostrar el total de algo (quizá ventas, producción, etc.) por día. El problema con eso es que no se dibujará ninguna gráfica ya que básicamente serían puntos sin conexión (por eso no se visualizan las líneas). Te sugiero que la muestra se realice por meses (lo que iría en label que ahora usas como fecha) y, en cada par de arreglos contenidos en el arreglo de data (que ahora usas como total), irían el día y el total del día.

Si después de esto sigues sin obtener el resultado esperado, por favor, muéstranos la parte crítica del código actualizado. No olvides contrastar lo que estás haciendo con lo que se indica en la documentación oficial.

Muchísimas gracias. It Works!