Combining Silverlight and Google Chart API

It's already almost a year ago when I found out about Google Chart API. I used it for my year ending post of 2007. I haven't done anything useful with Google Chart API after this post. But I'd like to experiment, so I thought what about an integration between Silverlight and the Google Chart API.

Integration

The integration is a very slim line. Just a HTTP Get to an Uri that follows the specs in the Google Chart API. The documentation consists of the following parts:

But all I used was basically the example on the API front page:

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

This example contains the following parts: Chart Type, Chart Data, Chart Size and Chart Labels.

How I want it to work?

I want to be able to do a very simple thing in the Silverlight application. No logic about how the integration is done, is a very important idea. I also have the meaning that we should not have to use a special control to view a chart, just because we already have an Image control for viewing an image. A chart is not that much more than an image, isn't it?

1 var chartData = new GoogleChartData 2 { 3 Size = new Size(400, 200), 4 Type = ChartType.Pie3d, 5 Labels = {"Silverlight", "Flex"}, 6 Data = {"20", "80"}, 7 Title = string.Format("RIA's{0}Compared", Environment.NewLine) 8 }; 9 10 chartImage.SetValue(HeightProperty, chartData.Size.Height); 11 chartImage.SetValue(WidthProperty, chartData.Size.Width); 12 13 chartImage.Source = googleChartBuilder.ConvertFrom(chartData);

Set up the chart data in lines 1 to 8. After this I want to make sure the target image control has the same dimensions as set in the chart data. Then run the GoogleChartBuilder to convert the data to an image.

The inner workings

The GoogleChartData class is just a data structure class.

1 public class GoogleChartData 2 { 3 public GoogleChartData() 4 { 5 Data = new List<string>(); 6 Labels = new List<string>(); 7 } 8 9 public IList<string> Data { get; set; } 10 public IList<string> Labels { get; set; } 11 public Size Size { get; set; } 12 public ChartType Type { get; set; } 13 14 public string Title { get; set; } 15 }

The logic is divided in two classes, one for constructing any uri you can think of, the other one for transforming the GoogleChartData into a querystring dictionary. The UriBuilder is very simple just ensures that the first part is preceded by a ?-character and the next parts are preceded by the &-character.

1 public class UriBuilder : IUriBuilder 2 { 3 public Uri Build(string baseUri, string page, IDictionary<string, string> queryString) 4 { 5 if(string.IsNullOrEmpty(baseUri) && string.IsNullOrEmpty(page)) 6 throw new Exception("baseUri and/or page should be provided."); 7 8 UriKind kind; 9 if (string.IsNullOrEmpty(baseUri)) 10 kind = UriKind.Relative; 11 kind = UriKind.Absolute; 12 13 var uriBuilder = new StringBuilder(string.Concat(baseUri,page)); 14 if(queryString!=null && queryString.Count >0) 15 { 16 char separatorCharacter = '?'; 17 foreach (var queryPart in queryString) 18 { 19 uriBuilder.Append(separatorCharacter); 20 uriBuilder.Append(queryPart.Key); 21 uriBuilder.Append('='); 22 uriBuilder.Append(HttpUtility.UrlEncode(queryPart.Value)); 23 24 separatorCharacter = '&'; 25 } 26 } 27 return new Uri(uriBuilder.ToString(), kind); 28 } 29 }

Now for the part that's responsible for the translation of the GoogleChartData into an uri.

1 public class GoogleChartBuilder : IGoogleChartBuilder 2 { 3 private readonly IUriBuilder uriBuilder; 4 5 public GoogleChartBuilder(IUriBuilder uriBuilder) 6 { 7 this.uriBuilder = uriBuilder; 8 } 9 10 public BitmapImage ConvertFrom(GoogleChartData googleChartData) 11 { 12 IDictionary<string,string> queryString = new Dictionary<string, string>(); 13 14 //ChartSize 15 queryString.Add("chs",string.Format("{0}x{1}",googleChartData.Size.Width,googleChartData.Size.Height)); 16 17 //ChartType 18 if(googleChartData.Type == ChartType.Pie3d) 19 queryString.Add("cht","p3"); 20 21 //Labels 22 if (googleChartData.Labels != null && googleChartData.Labels.Count > 0) 23 queryString.Add("chl",string.Join("|", googleChartData.Labels.ToArray())); 24 25 //Data 26 if (googleChartData.Data != null && googleChartData.Data.Count > 0) 27 queryString.Add("chd", string.Concat("t:",string.Join(",", googleChartData.Data.ToArray()))); 28 //Title 29 if(!string.IsNullOrEmpty(googleChartData.Title)) 30 queryString.Add("chtt",googleChartData.Title.Replace(" ","+").Replace(Environment.NewLine,"|")); 31 return new BitmapImage(uriBuilder.Build("http://chart.apis.google.com/", "chart", queryString)); 32 } 33 }

This isn't that difficult and translates into something like the following.

Google Chart API and Silverlight combined

This solution is not done at all, it's just a proof-of-concept of the integration of Silverlight and the Google Chart API. You can download the sources here.

  • Gravatar Nathan December 8th, 2008 at 18:03
    Just wondering how google handles the maximum url length though? Doesn't this limit you in charting?
  • Gravatar Mark Monster December 9th, 2008 at 22:26
    The maximum url length is more of a trouble for the software that's been used to make or serve the request.

    The following site has some information about the maximum url length: http://www.boutell.com/newfaq/misc/urllength.html

    I gues Silverlight has the same limitations as the browser used by the end user. This is because Silverlight makes use of the browser to do the connecting to resources like urls.

    Even though the url lengths that are supported are very long, it's past the 2000 characters, I know it's possible to have a chart with more data than this, but I think this won't be in 80 percent of the chart situations.
  • Gravatar http://hiendcorner.pl/?p=7402 August 12th, 2014 at 03:21
    Steps to finding a proper fitting shoe:
  • Gravatar leather collar hamilton October 25th, 2014 at 04:52
    For hottest news you have to pay a quick visit web and on web I found this website as a best web site for most up-to-date updates.
  • Gravatar optimus smartphone standard December 5th, 2014 at 19:21
    Hi, i feel that i noticed you visited my web site so i came to return the favor?.I am attempting to
    to find issues to improve my web site!I suppose its good enough to use some of your ideas!!
  • Gravatar Anne December 7th, 2014 at 06:52
    Undeniably believe that which you said. Your favorite reason seemed to be at the
    internet the simplest factor to take into accout of.
    I say to you, I certainly get irked even as people consider issues that they plainly
    do not understand about. You managed to hit the nail upon the highest and defined out
    the whole thing without having side-effects , folks can take a signal.

    Will probably be again to get more. Thanks

    web page [Anne]
  • Gravatar Nicolas December 14th, 2014 at 08:15
    Yes! Finally someone writes about soporiferous.

    webpage (Nicolas)
  • Gravatar Selena January 12th, 2015 at 03:08
    Quality posts is the main to interest the users to pay a visit the site, that's
    what this web site is providing.

    web site; Selena,
  • Gravatar dinero urgente February 22nd, 2015 at 18:39
    It's a shame you don't have a donate button! I'd most certainly donate to this superb blog!
    I guess for now i'll settle for bookmarking and adding your RSS feed to
    my Google account. I look forward to fresh updates and will
    talk about this website with my Facebook group. Talk soon!
    dinero urgente
  • Gravatar Cecila March 14th, 2015 at 22:58
    When some one searches for his essential thing, so he/she wants to be available that in detail, thus that thing is maintained over here.

    site (Cecila)
  • Gravatar Valeria March 28th, 2015 at 18:18
    Simply want to say your article is as surprising. The clarity on your put up is simply
    great and i can suppose you are a professional in this subject.
    Fine along with your permission let me to grasp your RSS feed to stay up to date with drawing close
    post. Thanks a million and please continue the rewarding work.

    webpage (Valeria)
  • Gravatar Darrell April 4th, 2015 at 19:46
    It is not my first time to visit this web site, i am browsing this site dailly and obtain fastidious information from here daily.

    web page (Darrell)
  • Gravatar Consuelo April 8th, 2015 at 21:47
    Pretty part of content. I simply stumbled upon your site and in accession capital to say that I get in fact enjoyed account your blog posts.
    Anyway I'll be subscribing for your feeds or even I achievement you
    get entry to consistently fast.
    homepage (Consuelo)
  • Gravatar Jacquie May 19th, 2015 at 02:36
    I am really enjoying the theme/design of your website. Do
    you ever run into any web browser compatibility problems?
    A handful of my blog audience have complained about my blog not working correctly in Explorer but
    looks great in Chrome. Do you have any solutions
    to help fix this problem?
    web site (Jacquie)
  • Gravatar Cathryn May 22nd, 2015 at 23:00
    I know this website offers quality based articles or reviews and other stuff, is there any other
    site which provides these kinds of things in quality?

    homepage (Cathryn)
  • Gravatar Rosalyn May 24th, 2015 at 08:20
    Useful info. Fortunate me I found your web site by chance, and I'm shocked why this accident did not came about
    earlier! I bookmarked it.
    site (Rosalyn)
  • Gravatar Garfield June 3rd, 2015 at 21:24
    Excellent site you have here but I was curious if you
    knew of any community forums that cover the same topics talked about here?
    I'd really love to be a part of community where I
    can get suggestions from other experienced people that share the same interest.
    If you have any recommendations, please let me know.
    Cheers!
    web page (Garfield)
  • Gravatar jeu gratuit de voitures en ligne July 4th, 2015 at 06:06
    PagesJaunes: retrouvez aisement et vite les coordonnées de spécialistes et via
    particuliers.
  • Gravatar Kasey October 29th, 2015 at 00:23
    Nice post. I learn something new and challenging on blogs I stumbleupon every day.
    It's always helpful to read content from other writers and use a little something from their sites.
  • Gravatar why do guys always play video games November 4th, 2015 at 00:25
    The one thing is normally that you have got to make
    certain that the emulator you download can assist the Xbox
    video game you would like to perform in your Mac pc OSX.
  • Gravatar investments with high returns November 12th, 2015 at 17:05
    Many online job opportunities don't require you to make any
    investment at all. Universal trustee is one of the best reputed companies investing in all the
    real projects and getting high returns. Most business owners understand the importance of
    an online presence.
  • Gravatar clash of clans mac December 6th, 2015 at 04:32
    Computer games are also well-known in China.
  • Gravatar comment hacker clash of clans February 21st, 2016 at 22:41
    How is playing video games with your children better than taking
    a short hiking journey, or playing catch with your children?
  • Gravatar gemme illimité February 28th, 2016 at 22:59
    ) Moms and dads also use gaming to talk about
    the dangers of communicating with strangers on the internet.
  • Gravatar Serena February 29th, 2016 at 07:41
    With women the amounts are not perhaps secondary - almost 50% of women between 25 and
    44's ages get acne.
  • Gravatar BethanyKJahn July 25th, 2016 at 07:13
    What's up friends, its impressive paragraph regarding teachingand fully defined, keep
    it up all the time.
  • Gravatar free MovieStarPlanet vip September 1st, 2016 at 19:20
    There are several big-name applications that use Touch ID, including 1Password, Dashlane, Dropbox
    and evernote.
  • Gravatar Virgilio September 16th, 2016 at 02:31
    Plase let me know if you're looking for a writer for your
    weblog. You have some really good articles and I beleve I would be a good asset.
    If youu ever want too take some of the load off, I'd absolutely love to write some content for your blog in exchange for a link bacfk to mine.
    Please shoot me an e-mail if interested. Regards!
  • Gravatar www.bicyclistrights.com February 20th, 2017 at 10:56
    It's enormous that you are getting thoughts from this
    post as well as from our dialogue made here.
  • Gravatar Dedra March 9th, 2017 at 14:48
    I believe other website proprietors should take
    this site as an example, very clean and fantastic user friendly design.
  • Gravatar マッチブック March 15th, 2017 at 16:00
    結婚したい。

    そんな恋愛事情でお悩みの方におすすめしたいマッチングサービスがあります。

    それはマッチブックです。

    マッチブックは、リクルートグループが運営する、安全な婚活マッチングアプリです。

    Facebook広告でもよく表示されていますよね?

    マッチブックはFacebook認証が必要なのでサクラが入りずらくなっており業者対策も万全です。

    また、異性のプロフィールにはほとんど相手の顔写真が掲載されているので連絡する前にどんな人か一目瞭然です。

    今まで業者ばかりでなかなか出会えないと嘆いているメンズや、イケメンと出会いたいのに写真が無くて怖いと嘆いている女性におすすめしたいマッチブックです。
  • Gravatar Lottery Date Result May 19th, 2017 at 12:14
    You can put things from across the various social networks into this as well as
    post articles. The prominent phrase, "Winning is not everything" is better demonstrated
    by the individuals noted below. Keywords are words and phrases that filters (and every
    email reader in the world) have come to associate with spam.

    A lot of poker blogs have sprung up in the name of the now-so-widespread online poker and internet gambling trends that the problem is you don.
Gravatar