[jQuery] Graficando un GridView con jQuery

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:

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:

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!

Filtrar GridView con un slider

Cada vez se desea que el cliente tenga más herramientas y facilidades para realizar tareas en una aplicación, una de dichas tareas se encuentra cuando se tiene una tabla (en nuestro caso un gridview) el cual lista unos determinados productos, con una cantidad y un precio, bueno es un ejemplo algo sencillo pero será de utilidad para poder realizar el ejemplo.

Bien, lo que se desea tener es un slider que permita realizar un filtro de esa grilla y muestre solo los productos que cumplen con la condición especifica.

Para esta tarea vamos a hacer uso de jQuery y en especial de la librería jQuery UI la cual ofrece varios widgets bastantes buenos.

Ahora, tenemos un problema al utilizar el gridview, ya que su renderizado normal no es el mejor, así que vamos a hacer uso de los css friendly control adapters, los cuales ayudan a mejorar el renderizado del grid.

Y manos a la obra:

1. Referenciamos la librería core de jQuery, la librería de jQuery UI y las hojas de estilos a utilizar:

   1:  <script src="scripts/jquery-1.5.1.min.js" type="text/javascript"></script>

   2:  <script src="scripts/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>

   3:  <link href="styles/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />

   4:  <link href="styles/Grid.css" rel="stylesheet" type="text/css" />

2. Creamos el GridView (en el ejemplo encontrará como se realiza el cargue de datos), lo importante en este línea es que para asignar un estilo se usa el atributo CSSSelectorClass:

   1:  <asp:GridView ID="grvDatos" runat="server" AutoGenerateColumns="true" 

   2:      CSSSelectorClass="grid">

   3:  </asp:GridView> 

3. Definimos un div el cual será el slider:

   1:  <div id="slider"></div>

4. Definimos un label y una caja de texto para mostrar el valor actual del slider:

   1:  <p>

   2:      <label>Precio mínimo (Incremento 100):</label>

   3:      <input type="text" id="txtValor" style="border:0; color:#f6931f; font-weight:bold;" />

   4:  </p>

5. Y finalmente el código jQuery:

   1:  $(function () {

   2:      $("#slider").slider({

   3:          value:0,

   4:          min:0,

   5:          max:5000,

   6:          step: 200,

   7:          animate: true,

   8:          range: true,

   9:          slide: function (event, ui) {

  10:             $("#txtValor").val("$" + ui.value);

  11:             filterGrid(ui.value);

  12:          }

  13:      })

  14:      $("#txtValor").val("$" + $("#slider").slider("value"));

  15:  })

  16:  function filterGrid(valorMin) {

  17:      var min = valorMin;

  18:      var max = 5000;

  19:      $("#<% = grvDatos.ClientID %>  table tbody tr").each(function () {

  20:          var price = parseInt($(this).find('td:last').text());

  21:          if (price >= min && price <= max) {

  22:              $(this).fadeIn();

  23:          } 

  24:          else {

  25:              $(this).fadeOut();

  26:          }

  27:      });

  28:  }

Bueno vamos a revisar ese código:

En la línea 1 verificamos que el DOM este listo, luego de la línea 2 – 13 viene la declaración del widget de tipo slider, y las propiedades que le definimos son:

• value: valor inicial
• min: valor mínimo
• max: valor máximo
• step: valor del incremento
• animated: si el slider será animado
• range: indica si se mostrará un color de fondo sobre la parte del slider que ya ha sido seleccionada
• slide: función que se ejecuta cada vez que se cambia el valor del slider, en este caso primero se asigna el valor seleccionado a la caja de texto y segundo se llama a la función que realizará el filtro.

Luego de la línea 16 – 28 es la función que realiza el filtro del grid, esta función recibe como parámetro el valor mínimo el cual para este ejemplo será el valor seleccionado en el slider, la línea 17 y 18 asignan el valor mínimo y máximo en dos variables, luego en la línea 19 le decimos por medio del selector que seleccione del div grvDatos la tabla, luego que de esa tabla seleccione el cuerpo de la tabla y finalmente las filas del cuerpo de la tabla, y por medio de la función each entonces vamos a recorrer todas las coincidencias encontradas.

En la línea 20 guardamos en una variable el valor de la última celda de la tabla de cada fila que para nuestro ejemplo será el precio, en la siguiente línea se válida que si ese valor está entre un determinado rango entonces que muestre la fila, de lo contrario que la oculte.

Finalmente se verá algo así:

Espero les sea de utilidad, como siempre les dejo el código del ejemplo, para este caso solo en VB, ya que en C# lo único que cambia es la forma de cargar el grid y pues la idea de este ejemplo es otra:

Link al ejemplo !

Filtrar GridView con JQuery

En el post pasado (miralo aca) vimos como podemos añadir la funcionalidad de ordenamiento a un gridview utiizando jQuery, mencionamos el uso del los css friendly controls adapters para mejorar el renderizado del grid  poder hacer uso del plugin de jQuery.

En este artículo vamos a revisar como podemos añadir un textbox el cual al ir ingresado caracteres nos ayudará a ir filtrando nuestro grid, similarmente como el ejemplo del post anterior haremos uso de los css friendly controls adapters para mejorar el renderizado del grid.

Para este ejemplo vamos a utilizar el plugin de jQuery quickSearch, en este caso utilizaremos el mismo ejemplo del post anterior solo que le añadiremos esta nueva funcionalidad.

Primero añadimos una referencia al plugin de jQuery quickSearch, luego añadimos un textbox donde al ir escribiendo se realizará el friltro del grid,  finalamente el código jQuery:

  
$(function () { 
$("#<% = grvDatos.ClientID %> table").tablesorter(); 
$("#<% = txtBuscar.ClientID %>").quicksearch("#<% = grvDatos.ClientID %> table tbody tr"); 
}) 

Lo importante aca es la 3ra línea de código es donde vamos a hacer uso del plugin, primero el selector que desencadanará el evento es el campo de texto, luego le decimos que seleccione el gridview, y le añadimos algunos filtros los cuales son table para que seleccione la tabla (como vimos en el post anteriores la tabla se crea dentro de un div), luego que filtre el cuerpo de la tabla tbody y finalamente que seleccione las filas tr.

Como siempre les dejo el ejemplo en VB y en C#.

Ejemplo en VB !
Ejemplo en C# !