0

Tengo una pequeña inquietud, actualmente requiero generar estadisticas de registros por fechas del año:

CONSULTA MYSQL

SELECT fecha_registro AS Fecha,
count(*) AS Registros
FROM persona
WHERE id_tipoUsuario = '4'
AND  empresa_per = '$id_empresa'
GROUP BY MONTH(Fecha)

RESULTADO

La consulta responde a lo esperado, que es obtener los registros realizados durante el mes correspondiente.

RESULTADO CONSULTA

MySql

FUNCIÓN ANGULARJS

  $scope.importarEstadisticas = function()
{
  $http({
      method: 'GET',
      url: 'mainApp/Estadisticas/estadisticaMeses.php'
    })
    .then(function successCallback(datosEstadisicasMeses)
    {
      $scope.tableEstadisticas = datosEstadisicasMeses.data;

    },function errorCallback(datosEstadisicasMeses)
    {
      console.log("Error, al tratar de traer los datos")
    });
}
$scope.importarEstadisticas();

RESULTADO FUNCIÓN

AngularJS

GOOGLE CHART

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Mes', 'Registros'],
    ['Enero',  214],
    ['Febrero',  789],
    ['Marzo',  894],
    ['Abril',  1030]
  ]);

  var options = {
    title: 'Gráfica de Visitantes',
    hAxis: {title: 'Meses',  titleTextStyle: {color: 'Black'}},
    vAxis: {minValue: 0}
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

Aquí es donde radica mi problema, porque requiero pasarle los datos obtenidos de mi consulta al array de GoogleChart. Derivado en sus dos filas, Fecha y Registros. En vez de Mes sería la fecha obtenida, y en vez de los valores dados manualmente sería el conteo obtenido de la consuolta.

Gracias!

formatoGrafica

introducir la descripción de la imagen aquí

2
  • muestranos el valor de $scope.tableEstadisticas = datosEstadisicasMeses.data;
    – sioesi
    Commented el 4 dic. 2017 a las 13:50
  • disculpa, creí que habia subido las imagenes, ahora puedes echar un vistaso el valor que retorna. El valor de la consulta es de produccion, el de la funcion es un valor que se retorna en local Gracias! @sioesi,
    – jecorrales
    Commented el 4 dic. 2017 a las 14:05

1 respuesta 1

1

Lo que debes hacer es recorrer el arreglo que tienes de respuesta.

La estructura que recibes del servicio que consumes son objetos con Fecha y Registro, por lo tanto :

Para obtener las cabeceras Fecha y Registro

var cabeceras = Object.keys($scope.tableEstadisticas[0]); //Aqui se obtiene los valores Fecha y Registros, para las cabeceras de tu grafico.
var formatoGrafico = [];
formatoGrafico.push(cabeceras); //Se dejan como primer elemento en el arreglo Formato.
$scope.tableEstadisticas.forEach(function(registro, index) {
    //Se recorren los datos y se cargan al arreglo con el mismo formato.
    formatoGrafico.push([registro.Fecha, registro.Registros]);
});

var data = google.visualization.arrayToDataTable([formatoGrafico]);
14
  • me da como respuesta Data column(s) for axis #0 cannot be of type string en la vista.
    – jecorrales
    Commented el 4 dic. 2017 a las 14:36
  • 1
    puedes mostrarme que te imprime formatoGrafico? creo que me falto []
    – sioesi
    Commented el 4 dic. 2017 a las 15:54
  • claro, puedes visualizarlo.
    – jecorrales
    Commented el 4 dic. 2017 a las 16:09
  • 1
    @jecorrales perfcto, actualizare mi respuesta!
    – sioesi
    Commented el 4 dic. 2017 a las 19:58
  • 1
    @jecorrales el error es por el formato que acepta el grafico, hay que modificar eso, pero no tuve tiempo de modificar mi respuesta, apenas pueda te ayudo con eso!, en todo caso estamos super cerca :D, solo hay que modificarlo
    – sioesi
    Commented el 7 dic. 2017 a las 14:12

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.