Una de las cosas que más me gusta de .NET es las facilidades que nos brinda para extender el Framework. Y claro está, ASP.NET MVC no iba a ser menos. Vamos a ver lo sencillo que es extender la clase System.Web.Mvc.HtmlHelper para aprovechar la API de gráficos de Google mediante un método extensor.
Basta de hablar, aquí os dejo el código de la clase completa.
namespace System.Web.Mvc
{
public static class GoogleChartsHelpers
{
private static string urlRoot = "https://chart.googleapis.com/chart?cht=p3&chs=";
private static string chd = "&chd=t:";
private static string chl = "&chl=";
public static MvcHtmlString GooglePieChart(this HtmlHelper helper, GoogleChartSize chartSize,
object model, object htmlAttributes)
{
StringBuilder url = new StringBuilder();
url.Append(urlRoot);
//Concatenamos el tamaño de la gráfica
url.Append(chartSize.Width);
url.Append("x");
url.Append(chartSize.Height);
//Concatenamos los datos de la gráfica
url.Append(chd);
foreach (PropertyDescriptor descriptor in TypeDescriptor.GetProperties(model))
{
url.Append(descriptor.GetValue(model).ToString());
url.Append(",");
}
url.Remove(url.Length - 1, 1);
//Concatenamos las etiquetas de la gráfica
url.Append(chl);
foreach (PropertyDescriptor descriptor in TypeDescriptor.GetProperties(model))
{
url.Append(descriptor.Name);
url.Append("|");
}
url.Remove(url.Length -1, 1);
//Construimos la imagen
TagBuilder img = new TagBuilder("img");
img.MergeAttribute("src", HttpUtility.UrlDecode(url.ToString()));
//Añadimos la lista de atributos del objeto anónimo
foreach (PropertyDescriptor descriptor in TypeDescriptor.GetProperties(htmlAttributes))
{
img.MergeAttribute(
descriptor.Name,
descriptor.GetValue(htmlAttributes).ToString()
);
}
return MvcHtmlString.Create(img.ToString());
}
}
public struct GoogleChartSize
{
public int Width { get; set; }
public int Height { get; set; }
}
}
Como se puede apreciar es muy sencillo, simplemente estamos construyendo la URL para llamar a la API de Google, en este caso a un gráfico de tipo Pie Chart o también llamado de tarta.
Fijaros también en el namespace de la clase, al incluirla dentro de System.Web.Mvc nos evitará añadir este namespace desde nuestras vistas. En los parámetros del método extensor especificamos que estamos extendiendo la clase HtmlHelper, y le pasamos una estrutura para el tamaño de la gráfica, y dos objetos, que serán objetos anónimos, para los datos y para los atributos de la etiqueta <img />.
La forma de utilizarlo en nuestrás vistas, en este caso con el motor de vistas Razor, es muy sencilla.
<div>
@Html.GooglePieChart(
new GoogleChartSize { Width = 620, Height = 200 },
new { España = 30, Francia = 25, Alemania = 10, Italia = 35 },
new { id = "idGrafica", @class = "claseCss", alt = "Encuesta desempleo" })
</div>
Como hemos comentado antes, le pasamos una estructura con el tamaño y dos objetos anónimos. Uno que representará los datos de la gráfica y sus etiquetas y otro para los atributos html de la imagen. El resultado es el siguiente.
Si vemos el código fuente que se ha renderizado en nuestro explorador podremos comprobar como se ha construido la URL para llamar a la API de Google.
<img alt="Encuesta desempleo" class="claseCss" id="idGrafica" src="https://chart.googleapis.com/chart?cht=p3&chs=620x200&chd=t:30,25,10,35&chl=España|Francia|Alemania|Italia"> </img>