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 tieneque 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: "grvDatos" runat="server" AutoGenerateColumns="true" CSSSelectorClass="grid"> 2: "btnGraficar" runat="server" Text="Generar Gráfica"> 3:
4:
"container" style="width: 800px; height: 400px; margin: 0 auto">

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: <scriptsrc="scripts/jquery-1.6.2.min.js"type="text/javascript">script> 2: 3: