Gráficos de Google en ASP.NET MVC con un Helper personalizado

29. May 2011 14:27 by Oscar.SS in Desarrollo Web  //  Tags:   //   Comments (0)

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 - 
11);

            
//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 -
11);

            
//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> 

Recent Comments

Comment RSS

Month List