Using the Google Visualization API, Basic Pie Image Charts

As we move away from server-side generation of graphics, many people have been inquiring as to how to use Google Charts, Graphs and Maps in their applications.  In this series I'll start with the simplest integration and slowly add complexity to see what is possible.

There is lots of great documentation on Google's site and in various blogs, so please don't use this as your sole reference, only as a starting point to get an idea of what is possible.

Starting Basic

Let's say you have a simple dataset like the following and you just want to add a pie chart your users can download and use in their presentations.

Species Count
Bridgelip Sucker 1
Brook Trout X Bull Trout 23
Bull Trout 2
Chinook Salmon 365
Mountain Whitefish 15
Sculpin (Var. Species) 0
Steelhead (Snake River Basin) 118
Westslope Cutthroat Trout 3

While there are lots of fancy tools available in the Google Charts API, but making a pie chart with a small dataset like this can be as simple a calling their API and getting an image returned inside an <img> tag.

Let's look at the basic image URI structure from the Chart API Documentation:

http://chart.apis.google.com/chart?chs={width}x{height}&cht={charttype}&chd=t:{comma-delimited values}&chdl={pipe-delimited legend}

Adding our data we get:


If you're a Windows Developer, at this point you may be wondering how you get your data to display with all these funky pluses and %29 characters.  The answer for .Net is server.urlencode(string).

To build the string above I'd loop through the data once and create two strings, one pipe-delimited, one comma-delimited.  Outside the loop I'd concatenate them all into one string and finally urlencode:

string labels = "";
string vals = "";
foreach (specieslistitem a in specieslist)
    labels += a.Species +  "|";
    vals += a.Count + ",";
string uri = "http://chart.apis.google.com/chart?chs=500x250&cht=p&chd=t:" + server.urlencode(vals.substring(0,vals.length-1)) + "&chdl=" + server.urlencode(labels.substring(0,labels.length-1));

We can then create an image tag that looks like this to display the chart:

<img src="http://chart.apis.google.com/chart?chs=500x250&amp;cht=p&
River+Basin%29|Westslope+Cutthroat+Trout"  alt="Pie Chart"/>

Pie Chart


That was pretty painless.  Let's see what we can do to make that better.


Add Data Labels

We can change that by changing the legend to labels by modifying the "chdl" parameter to "chl":

<img src="http://chart.apis.google.com/chart?chs=500x250&amp;cht=p&
River+Basin%29|Westslope+Cutthroat+Trout"  alt="Pie Chart"/>

Pie Chart


Some Final Tweaks

Now let's add a few fixes to improve legibility.

  • Add a color gradient using the Chart Color parameter (chco): chco=006633,FFFF33.
  • Insert a Chart Title Top parameter (chtt): chtt=Observed+Species+on+Secesh+River
  • Change the Chart Type (cht) to a 3D Pie: cht=p3
  • Modify the Chart Size (chs) to better accomodate the long labels: chs=500x150

Pie Chart

That's better, and a way more Fish and Gamey color scheme.  It could certainly use work, but it's good enough to get the general idea. 


In the Next Episode

In the next posts I'll explore a few more chart types and then move beyond building your charts in the URL to creating and using JSON data sources to build charts, add some interactive features to allow users to modify features of the chart and finally illustrate how to expose your JSON data sources as APIs for our collaborators and the public to use and explore.

Displaying Recent Roadkill on your Webpage

You can use the Roadkills API to display the most recently reported roadkill on your webpage.

Passionate about Mule Deer perchance?  In a couple quick steps you can add a real-time list of the Recent Mule Deer Roadkills using the magic of JQuery and the Roadkills API.  First, a demo, then the code.


Recent Mule Deer Roadkill

    Loading Roadkill...

The Code

<ul id="roadkillfeed">Loading Roadkill...</ul><script type="text/javascript" src="http://www.google.com/jsapi?key={YOUR GOOGLE API KEY}">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript">
        google.load("feeds", "1");

        google.setOnLoadCallback(function () {

        function initializefeeds() {
            var feed = new google.feeds.Feed("http://fishandgame.idaho.gov/ifwis/core/view/roadkills/list.rss?species=16300&start=-365&end=now&pageSize=25&cachebuster=" + parseInt(Math.random() * 99999999, 10));
            feed.load(function (result) {
                if (!result.error) {

                    var content = document.getElementById('roadkillfeed');
                    var html = '';

                    for (var i = 0; i < result.feed.entries.length; i++) {
                        var entry = result.feed.entries[i];

                        html += '<li><a href="' + entry.link + '">' + entry.title + '</a></li>';

                    content.innerHTML = html;

Substitute your Google API Key and your customized URL and you're live!  Well, not the roadkill, but the page is displaying live data as it arrives!