0

Tengo una función en mi controller la cual me da como resultado un json que necesito para graficar, el problema es que no tengo idea de como graficar todos los datos, solo me muestra el ultimo en la gráfica. Con console.log(result); veo que si me trae los datos pero solo me gráfica el ultimo.

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

 function drawChart() {
 var i;
   $.ajax({
   url: "/Indicadores/Grafica",
   type: "GET",
   ContentType: "application/json; charset=utf-8",
   success: function (result)
   {
   for (var i = 0; i < result.length; i++) {
   console.log(result[i].Mes);
   console.log(result[i].Total);
   var data = google.visualization.arrayToDataTable([
       ['Task', 'Visitas por mes'],
       [result[i].Mes, result[i].Total]
   ]);     
  var chart = new google.visualization.ColumnChart(document.getElementById('Vchart'));
  chart.draw(data);
   }   
  },
  error: function (jqxhr, status, exception) {
  console.log(jqxhr.responseText);
  }
  });       
}
}

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Datos que quiero graficar (resultado de mi query sql server)

Total	Mes
3	A-Julio
50	D-Octubre
135	E-Noviembre
157	F-Diciembre
109	G-Enero

6
  • me puedes dar un sample de los datos para probar la grafica Commented el 30 ene. 2020 a las 17:16
  • @stanchacon osea los resultados de mi query?? Commented el 30 ene. 2020 a las 17:59
  • Puedes ponerlos en el formato original, asi me ahorrar trabajo para adjuntarte un ejemplo Commented el 30 ene. 2020 a las 18:06
  • @stanchacon formato de que disculpa? no entiendo, de mi query? Commented el 30 ene. 2020 a las 18:23
  • la respuesta de tu ajax, si es JSON agregalo en formato json si es array en formato array Commented el 30 ene. 2020 a las 18:43

2 respuestas 2

0

El siguiente ejemplo lo realice teniendo en cuenta los siguientes puntos:

  1. Suponiendo que la respuesta de la llamada ajax sea un objeto JSON se realiza la transformacion de este a un array de arrays que contiene especificaciones de elementos a crear en forma de objetos.
  2. Cree una función que realiza dicho procedimiento por lo que es probable que solamente tomes el encapsulado de la función dentro de llamada Ajax.

      function drawColumnChart(){
            //suponiendo que recibes un json la variable json es la respuesta de tu backend
      let json = [
      {mes:'Noviembre', total: 1200, anio: 2019},
      {mes:'Diciembre', total: 1350, anio: 2019},
      {mes:'Enero', total: 500, anio: 2019}
      ];
      //array es el inicializador que contiene las columnas y argumentos de tu grafico en el indice 0
      let array = [
        [ 'Name','Visitas' ,{role:'annotation'}, {role:'tooltip'}]
        ],
        // json_a_array es el mapeo de los elementos de tu json a array
      	json_a_array = json.map((e)=>{
        return [
        ...[e.mes,e.total,e.anio,`${e.mes} ${e.anio} : ${e.total} visita(s)`]];
        });
       //seguidamente pasamos los valores de json_a_array a tu array de argumentos donde los indices que siguen despues de 0 son la data de la grafica
			json_a_array.map((e)=>{ array.push(e) });
              var data = google.visualization.arrayToDataTable(
              array
                );
// establecemos las opciones d ela grafica
        var options = {
          title: 'Visitas por mes',
          hAxis: {title: 'Meses', titleTextStyle: {color: 'red'}},
                tooltip: {legend:'none',isHtml:true, textStyle: {color: '#FF0000'}, showColorCode: true}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
       
      }
//cargamos la grafica
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawColumnChart);
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

Espero sea de ayuda si tienes alguna duda puedes consultarla

1
  • Ya lo he resuelto, gracias de antemano Commented el 30 ene. 2020 a las 23:07
0

Finalmente lo he resuelto asi. Lo dejo aqui por si es de ayuda para alguien

    function grafica() {
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);      

        function drawChart() {           
            $.ajax({
                url: "/Indicadores/Grafica",
                type: "GET",
                ContentType: "application/json; charset=utf-8",
                success: function (data)
                {
                    var arrSales = [['Mes', 'Total']];   

                    $.each(data, function (index, value) {
                        arrSales.push([value.Mes, value.Total]);
                    });
                    var options = {
                        title: 'Visitas al mes',
                        curveType: 'function',
                        legend: { position: 'bottom', textStyle: { color: '#555', fontSize: 14 } }  
                    };                    
                    var figures = google.visualization.arrayToDataTable(arrSales)
                    var chart = new google.visualization.LineChart(document.getElementById('Vchart'));
                    chart.draw(figures, options); 

                },
                error: function (jqxhr, status, exception) {
                    console.log(jqxhr.responseText);
                }
            });           
        }
    }

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.