Google charts in ASP.NET MVC by custom helpers

2. January 2013 21:34 by Oscar.SS in Web Development  //  Tags:   //   Comments (0)

I like ASP.NET MVC Framework for many reasons but if I have to choose just one of them I will say because it is very easy to extend. Let me show you how easy it can be to extend the System.Web.Mvc.HtmlHelper class to call Google Chart API by an extension method.

Here is the code of the whole class. After that I am going to explain it.

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

            
//Size chart
            
url.Append(chartSize.Width);
            
url.Append("x");
            
url.Append(chartSize.Height);

            
//Data chart
            
url.Append(chd);
            foreach 
(PropertyDescriptor descriptor in TypeDescriptor.GetProperties(model))
            {
                url.Append(descriptor.GetValue(model).ToString())
;
                
url.Append(",");
            
}
            url.Remove(url.Length - 
11);

            
//Label chart
            
url.Append(chl);
            foreach 
(PropertyDescriptor descriptor in TypeDescriptor.GetProperties(model))
            {
                url.Append(descriptor.Name)
;
                
url.Append("|");
            
}
            url.Remove(url.Length -
11);

            
//Make img tag
            
TagBuilder img = new TagBuilder("img");
            
img.MergeAttribute("src", HttpUtility.UrlDecode(url.ToString()));

            
//Add anonymous object's attributes
            
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; }
    }
}

The extension method returns a string which contains the URL to call to Google API. I have used a Pie Chart for this example. The first method parameter specifies that we are extending HtmlHelper class. The second parameter is a struct with the chart size. The rest of the parameters are two anonymous objects which represent the data chart and the image attributes, respectively.

Now we are ready to use our helper in a view.

<div>
    @Html.GooglePieChart(
        
new GoogleChartSize { Width 620, Height 200 },
        
new { Spain 30, France 25, Germany 10, Italy 35 },
        
new { id "chartID", @class "cssClass", alt "Unemployment Survey})
</div>

A browser will render it like that.

If we see the source code which has been rendered in our browser we will be able to see how the URL was constructed.

<img alt="Unemployment Survey" class="cssClass" id="chartID" src="https://chart.googleapis.com/chart?cht=p3&chs=620x200&chd=t:30,25,10,35&chl=Spain|France|Germany|Italy"> </img> 

Category list

Tag cloud

Recent Comments

None

Month List