A Quick and Easy HTMLHelper for Google Charts

Virtually every project I do now days needs some form of a chart in it. Up until now I’ve been using DevExpress for their great range of web controls including a very powerful Chart control. However recently I’ve been reading about the Google Charts API for quickly and easily creating charts on the fly, so I decided to give it a go. After all it’s free and there is no need to add any DLL’s to the project, two very good attributes in my book!

In order to make it easier to add charts to my MVC web pages I built an HTMLHelper extension method so now all I need to do is write the following for a chart:

<%= Html.GoogleChart(rdi.Series, ChartType.Pie, width: 400, height: 225) %>

The extension method and its associated classes look like the following:

  public enum ChartType { Pie = 1, Bar = 2 };
   public class SeriesData
   {
       public int Value { get; set; }
       public string Description { get; set; }
       public SeriesData(int value, string description)
       {
           this.Value = value;
           this.Description = description;
       }
   }
   public class GoogleChart
   {
       public int Height { get; set; }
       public int Width { get; set; }
       public ChartType ChartType { get; set; }
       public List<SeriesData> Series = new List<SeriesData>();
       public string GetURL()
       {
           string result = "http://chart.apis.google.com/chart?";
           //add the chart size
           result += String.Format("chs={0}x{1}&", this.Width, this.Height);
           //add the type
           result += String.Format("cht={0}&", ChartTypeAsString());
           //add the data
           string seriesValues = "chd=t:" ;
           string axisLabels = "chl=" ;
   
           foreach (var s in this.Series)
           {
               seriesValues += s.Value.ToString() + ",";
               axisLabels += s.Description + "|";
           }
           result += seriesValues.TrimEnd(","[0]) +"&"  + axisLabels;
           return String.Format("<img src='{0}' width='{1}' height='{2}' alt='' />", result, this.Width, this.Height);
       }
       private string ChartTypeAsString()
       {
           switch (this.ChartType)
           {
               case ChartType.Pie:
                   return "p";
               case ChartType.Bar:
                   return "bvs";
               default:
                   return "p";
           }
       }
   }
   public static class GoogleChartExtensions
   {
       public static string GoogleChart(this HtmlHelper helper, List<KeyValuePair<string,int>>   SeriesValues,
           int width, int height)
       {
           GoogleChart gc = new GoogleChart();
           gc.Height = height;
           gc.Width = width;
           gc.ChartType = ChartType.Pie;
           seriesValues.ForEach(x => gc.Series.Add(new SeriesData(x.Value,x.Key)));
           return gc.GetURL();
       }
   }

This is enough to get a pretty basic pie or bar chart showing on your web page. The Google Charts API is extremely powerful and their are a myriad of options available for customisation, I plan to add further capabilities to this helper and blog about them in the future.

Enjoy your charts!