[jQuery] Graficando un GridView con jQuery

Posted on


Hola, uno de los controles que más me gusta utilizar es el GridView, y mostrar algunos datos en este control es bastante sencillo, pero al final siempre vamos a obtener una tabla, y en esos casos donde se debe marcar al diferencia se tiene  que ofrecer al usuario la posibilidad de ver más que un simple tabla con algunos estilos css.

Así que me decidí a realizar una gráfica de un GridView, algo que uno le muestre al usuario y diga “me encanta!"”, en el mercado existen muchos controles free y de pago para realizar gráficas, incluso para Visual Studio se ofrecen los Microsoft Chart Controls, sin embargo y como ya sabrán jQuery me encanta así que he decidido a utilizarlo.

Para graficar el GridView, vamos a hacer uso de un plugin bastante bueno que tiene muchas características y es Highcharts, además haremos uso de los CSS Friendly Controls Adapters para mejorar el renderizado del Grid.

Si no recuerdas como usar los CSS Friendly Controls DataAdapter revisa este post.

Entonces manos a la obra:

1. Creamos un GridView para mostrar los datos y un div, este div será el encargado de mostrar la gráfica y un LinkButton para que al darle click genere la gráfica:

   1:  <asp:GridView ID="grvDatos" runat="server" AutoGenerateColumns="true"     CSSSelectorClass="grid"></asp:GridView>
   2:  <asp:LinkButton ID="btnGraficar" runat="server" Text="Generar Gráfica"></asp:LinkButton>
   3:  <hr />
   4:  <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

Para entender un poco la idea de la gráfica la idea es listar unos productos, y mostrar la cantidad vendida en enero y febrero, es decir:

Chart_1

2. Ahora, agregamos las referencias a los archivos js necesarios:

   1:  <script src="scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
   2:  <script src="scripts/highcharts.js" type="text/javascript"></script>
   3:  <script src="scripts/exporting.js" type="text/javascript"></script>

3. El código jQuery, lo voy a dividir en dos partes para que sea más claro. Parte 1:

   1:  $(function () {
   2:      $("#<% = btnGraficar.ClientID %>").click(function (e) {
   3:          Highcharts.visualize(table, options);
   4:          e.preventDefault();
   5:      });
   6:   
   7:      var table = $("#<% = grvDatos.ClientID %>  table")
   8:      options = {
   9:          chart: {
  10:              renderTo: 'container',
  11:              defaultSeriesType: 'column'
  12:          },
  13:          title: {
  14:              text: 'Datos extraidos de un GridView'
  15:          },
  16:          xAxis: {
  17:              title: {
  18:                  text: 'Productos'
  19:              }
  20:          },
  21:          yAxis: {
  22:              title: {
  23:                  text: 'Cantidad'
  24:              }
  25:          },
  26:          tooltip: {
  27:              formatter: function () {
  28:              return '<b>' + this.series.name + '</b><br/>' +
  29:              this.y + ' ' + this.x.toLowerCase();
  30:              }
  31:          }
  32:      };
  33:  });

Ahora vamos a explicar:

Línea 1: Se válida la carga de la página.

Línea 2 – 5: Creamos un manejador para el click del LinkButton, el cual llama a la función visualize, como parámetro se le envía el grid que se quiere graficar y unas opciones que ya veremos, al final decimos e.preventDefault() para evitar que e linkbutton haga postback.

Línea 7: En la variable tabla guardamos el selector que hace referencia al tabla generada por el GridView, recuerden que con los adaptadores primero se genera un div y luego si la tabla.

Línea 8 – 32: Definimos las opciones generales para el gráfico como el título del mismo, el subtitulo de los valores en x y en y, y la información que se quiere ver al colocar el mouse sobre cada barrita, como ven el nombre de las propiedades son muy explicitas.

4. Parte 2:

   1:  Highcharts.visualize = function (table, options) {
   2:      options.xAxis.categories = [];
   3:      options.yAxis.categories = [];
   4:   
   5:      options.series = [];
   6:      options.series[0] = {
   7:          name: 'Enero',
   8:          data: []
   9:      };
  10:      options.series[1] = {
  11:          name: 'Febrero',
  12:          data: []
  13:      };
  14:   
  15:      $('tbody tr', table).each(function (i) {
  17:          options.xAxis.categories.push($('td:eq(1)', this).text());
  18:          options.yAxis.categories.push($('td:eq(2)', this).text());
  19:          options.series[0].data.push(parseFloat($('td:eq(2)', this).text()));
  20:          options.series[1].data.push(parseFloat($('td:eq(3)', this).text()));
  21:      });
  22:   
  23:      var chart = new Highcharts.Chart(options);
  24:  }

Vamos a explicar:

Línea 1: Declaramos la función que se llama para generar la gráfica, recibe como parámetro la tabla que se desea graficar y las opciones de la gráfica.

Línea 2 y 3: Declaramos dos vectores para los valores en x y en y respectivamente.

Línea 5 – 13: Declaramos un vector que va a tener los datos de cada mes (Enero y Febrero).

Línea 15 – 21: Recorremos todas las filas del cuerpo de la tabla, y a cada vector le vamos asignando el valor correspondiente según la celda, para ello usamos eq(#) para decirle que tome el valor de una determinada celda.

Línea 23: Le decimos a la gráfica que tome as opciones de configuración que le fueron enviadas.

Y eso es todo, se creará una bonita gráfica como la siguiente:

Chart_2

La gráfica tiene las opciones de exportar e imprimir, esto se logra adicionando una referencia a la librería exporting.js

Espero les sea de mucha utilidad este ejemplo.

Descarga el ejemplo!

12 comentarios sobre “[jQuery] Graficando un GridView con jQuery

    angelo riquelme escribió:
    01/30/2012 en 15:05

    hola amigo, el link para descarga el ejemplo esta malo, puedes verlo porfavor..

    gracias

    Pedro Hurtado escribió:
    03/09/2012 en 14:09

    Muy bueno Julio

    Andres escribió:
    07/20/2012 en 11:15

    que buen post brother una alternativa mas para hacer cosas de otra forma vamos a ver si lo implementamos

      Julio Avellaneda respondido:
      07/20/2012 en 11:16

      Gracias Andres!

        Andres escribió:
        07/20/2012 en 13:13

        brother una pregunta esta parte que hace

        $(‘tbody tr’, table).each(function (i) {
        17: options.xAxis.categories.push($(‘td:eq(1)’, this).text());
        18: options.yAxis.categories.push($(‘td:eq(2)’, this).text());
        19: options.series[0].data.push(parseFloat($(‘td:eq(2)’, this).text()));
        20: options.series[1].data.push(parseFloat($(‘td:eq(3)’, this).text()));

    Pit escribió:
    11/27/2012 en 13:46

    Excelente Post

    criszz escribió:
    08/09/2013 en 12:22

    de donde jalas los datos que muestras en el gridview

      Julio Avellaneda respondido:
      08/10/2013 en 11:46

      Hola amigo, si te fijas en el code behind creo un datatable y se lo asigno al gridview.. saludos.

    criszz escribió:
    08/09/2013 en 12:23

    podrias mostrar un ejemplo con base de datos de sql y asp y poner el link de descarga del proyecto

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s