[Tips] WebMatrix & Razor, trabando con gráficos.
Una de las tareas más recurrentes en los desarrollos web es el trabajo con gráficos, es por eso que WebMatrix & Razor proveen un helper Chart que nos permite trabajar con gráficos de barra, columnas, de torta y más.
Para que te hagas una idea de lo que se puede lograr:
Voy a resumir mostrando ejemplos de como crear gráficos, el primer caso es mostrar un gráfico a partir de un arreglo.
@{ // chartType: "Pie",
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Horas Extras del Mes - Abril")
.AddSeries(
name: "Empleados",chartType: "Pie",
xValue: new[] { "Gonzalo", "Felipe", "Carolina", "José", "Cristina" },
yValues: new[] { "2", "6", "4", "5", "3" })
.Write();
}
Solo este simple código nos permite generar un gráfico de torta:
Ahora si cambiamos chartType: "Pie", a “Line” obtendremos:
Lo cambiamos a “Bar”
y ahora “Radar”
En realidad, puedes ver todos los tipos por acá , la lista es grande, prueba que tal van quedando 
(el Default es Column)
http://msdn.microsoft.com/en-us/library/system.web.ui.datavisualization.charting.seriescharttype.aspx
Ahora bien, si quieres agregar contenido, te vas a dar cuenta se esta generando una imagen que se visualiza a partir de la url en donde se ejecuta el helper:
Ahora, veremos como incrustar este gráfico en una página web, con contenido (la nada misma, es solo para ejemplo) y obteniendo los la info desde la base de datos.
Vamos a tener una página que es donde se va “incrustar” el gráfico, noten que podemos pasarle parámetros por Get a al archivo que va a generar el gráfico(GraficoBD.cshtml?valor=4)
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Grafico</title>
</head>
<body>
<h1>Ejemplo</h1>
<p>El siguiente gráfico se genera en <em>GraficoBD.cshtml</em></p>
<p><img src="GraficoBD.cshtml?valor=4" /> </p>
</body>
</html>
Ahora si revisamos el archivo GraficoBD.cshtml veremos:
@{
var db = Database.Open("productos");
var valor = Request["valor"];
var data = db.Query("SELECT Nombre, Precio FROM Productos where
id<@0",valor);
var myChart = new Chart(width: 300, height: 200)
.AddTitle("Precio de Productos")
.AddSeries("Default", chartType:"pie",
xValue: data,
xField: "nombre",
yValues: data,
yFields: "Precio")
.Write();
}
En este caso se esta consultado una tabla desde la base de datos y se filtra por Id (si, si sé el ejemplo es burdo y quizás la consulta es peor, pero se entiende no?). Entonces al ahora momento de ejecutar el ejemplo (la página contenedora).
Como ves, es bastante fácil, el helper Chart es bastante útil para crear gráficos de manera bastante rápida y sencilla.
Si están interesados en WebMatrix & Razor puedes ver este resumen de WebCast con sus materiales de ejemplo y presentación:
http://geeks.ms/blogs/gperez/archive/2011/05/28/webmatrix-recopilaci-243-n-de-todas-las-sesiones-del-ciclo.aspx
Nos vemos!
Chalalo