C# ASP.NET: Google Chart API Integration

Sometimes you need a graph to visualize numeric value. You could use any of the  3rd party libraries for graph rendering, or you could make a quick call to Google Chart API.

With a simple <IMG> tag you can add good looking graphs to any of your pages.

Basic Pie Chart

<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100" />

Labeled Pie Chart

<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World" />

Integrate the API call in your presentation class.

Presentation class:
public class SomePresentationData { public string Name { get; private set; } public string Value { get; private set; } public string GetImgUrl() { return "<img src=\"http://chart.apis.google.com/chart?chs=50x50&chd=t:" + ValueString + "&cht=p\" alt=\"Index\" />"; } public string GetImgLargeUrl() { return "<img src=\"http://chart.apis.google.com/chart?chs=120x120&chd=t:" + ValueString + "&cht=p\" alt=\"Index\" />"; } public SomePresentationData(string name, double value) { Name = name; Value = value.ToString("F2"); ValueString = value.ToString(CultureInfo.InvariantCulture) + "," + (100 - value).ToString(CultureInfo.InvariantCulture); } protected string ValueString { get; set; } public SomePresentationData(string name, double value) { Name = name; Value = value; } }

Usage in ASP.Net form:

<asp:Repeater ID="_myRepeater" runat="server"> <HeaderTemplate> <h2> Results</h2> <table class="myTable"> </HeaderTemplate> <ItemTemplate> <tr class="myTableTr"> <td class="myTableTd"> <%# ((PresentationData)Container.DataItem).Name%> </td> <td class="myTableTd"> <%# ((PresentationData)Container.DataItem).Value%> </td> <td> <%# ((PresentationData)Container.DataItem).GetImgUrl() %> </td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater>

In most situations these charts are more than enough.
Visit the Google Chart API site for a complete view of the charts that the API supports.

Comments

[Erkan]

OMG, thats amazing

[JoNtE]

Quite Nice I think, and it's free.

Well sometimes you need more control, but hey!!
.. in 90% of the cases this will work just fine.