Charts: let Google work for you

I can't class myself as an developer who is always hip to the latest news in the software industry, partly through laziness and partly through necessity to write code, and not merely to surf the Internet :) That is why I missed appearance of a very cute and handy service from Google, which allowed to integrate charts into the web pages.

For the time being it is only half a year old as far as I can judge by the date of the first record in the discussion group, therefore I think this information can be interesting for someone else besides me.

The service allows to dynamically generate practically all essential types of charts such as bar charts, pie charts and so on. The only thing you have to do to get the chart is forming the url in concordance with some rules and the service will return the PNG-format image.

As an example I decide to use data from another Google service, namely Google Analytics, which together with all its merits has one lack: the absence of public access to the analytic data that does not allow to boast :) of the nice designed statistics of your site unlike, for example, ClustrMaps.

At the beginning I save the data about visits to my site for the last three monthes (Mar 1, 2008 - May 31, 2008) in the XML format. I want to build two graphs - the map overlay and the pie chart - based on these data.

//analytic data file path
string xmlFilePath = Server.MapPath("~/map-overlay.xml"); 

XmlDocument doc = new XmlDocument();
doc.Load(xmlFilePath);

XmlNodeList nodes = doc.SelectNodes("/AnalyticsReport/Report/GeoMap/Region");

//the world map overlay
Image1.ImageUrl = GetGeoMapChartUrl(nodes);
//the pie chart
Image2.ImageUrl = GetPieChartUrl(nodes);

Chart #1. The site visits overlay on the world map

Google Charts is one of the few services that has the clear and comprehensible documentation, therefore this is realy pleasant to use it :)

//maximal number of visits from a country
private int max;

private string GetGeoMapChartUrl(XmlNodeList nodes)
{
    //list of countries names
    StringBuilder sbCountries = new StringBuilder();
    //list of values for each country to be colored 
    StringBuilder sbColors = new StringBuilder();

    if (nodes.Count > 0)
    {
        //maximal number of visits from a country (data in the file are sorted in descending order)

        max = int.Parse(nodes[0]["Value"].InnerText, NumberStyles.Number);

        foreach (XmlNode node in nodes)
        {
            //NumberStyles.Number has to be set because of the presence of whitespaces in the numbers spelling, for example, "1 329"
            int value = int.Parse(node["Value"].InnerText, NumberStyles.Number);
            //country code in concordance with ISO 3166  
            sbCountries.Append(node["Id"].InnerText);
            //country color which depends on the number of visits - the more visits the more saturated color
            sbColors.Append(GetColorCode(value));
        }
    }

    //http://chart.apis.google.com/chart - service url
    //?chs=440x220 - image size (440х220 is the maximum available for all maps)
    //&cht=t - chart type
    //&chtm=world - geographical area (there are also available separate continents and the territory of USA)
    //&chd=s:{0} - codes of colors
    //&chld={1} - codes of countries
    //&chco=ffffff,ffebcc,ff9900 - ffffff (default country color), ffebcc ... ff9900 (color gradient for painted countries)
    //&chf=bg,s,99ccff - color of the image background (seas, oceans) 
    return string.Format("http://chart.apis.google.com/chart?chs=440x220&chd=s:{0}&cht=t&chtm=world&chld={1}&chco=ffffff,ffebcc,ff9900&chf=bg,s,99ccff",
        sbColors,
        sbCountries
        );
}

The country color depends on the number of visits and has to be one of the symbols from A...Za...z0...9 array, where A is the least value and 9 is the greatest one.

private char GetColorCode(int value)
{
    int res = value*61/max;
    if (res < 26) //A...Z 
        return (char)(65 + res);
    else if (res < 51) //a...z 
        return (char)(71 + res);
    else //0...9 
        return (char)(res - 4);
}

Chart #2. Pie chart

Unfortunately, if you simply pass an array of data (for example: 4, 6, 10) the pie chart is shown incorrectly, all secrors are of the same size. You have to pass percentage instead of absolute values (for the above example it should be 20, 30, 50). Through percentage calculation next code looks more complicated then the previous chart code.

private string GetPieChartUrl(XmlNodeList nodes)
{
    //the total number of visits 
    int total = 0;
    //the number of visits from each country    
    List<int> values = new List<int>(nodes.Count);
    //list of countries names 
    List<string> names = new List<string>(nodes.Count);

    foreach (XmlNode node in nodes)
    {
        //NumberStyles.Number has to be set because of the presence of whitespaces in the numbers spelling, for example, "1 329"

        int value = int.Parse(node["Value"].InnerText, NumberStyles.Number);
        total += value;
        values.Add(value);
        names.Add(string.Format("{0} ({1})", node["Name"].InnerText, value));
    }

    //data have to be in percents 
    List<string> data = new List<string>();
    
    int sumPercents = 0;
    int sumValues = 0;

    for (int i = 0; i < values.Count; i++)
    {
        int percent = values[i] * 100 / total;
        if (percent > 1)
        {
            sumPercents += percent;
            sumValues += values[i];
            data.Add(percent.ToString());
        }
        else
        {   
            //visits from the countries that take 1% or less are shown together 
            names.RemoveRange(i, names.Count - i);
            names.Add(string.Format("Other Countries ({0})", total - sumValues));
            data.Add((100 - sumPercents).ToString());
            break;
        }
    }


    //http://chart.apis.google.com/chart - service url
    //?cht=p3 - chart type
    //&chd=t:{0} - data
    //&chs=600x150 - image size (limited to 300000 pixels that is, for example, 300х1000) 
    //&chl={1} - labels 
    return string.Format("http://chart.apis.google.com/chart?cht=p3&chd=t:{0}&chs=600x150&chl={1}",
        string.Join(",", data.ToArray()),
        string.Join("|", names.ToArray()));
}

P.S. One thing that you can't find in the documentation: how to pass non-latin characters?
Is this case you have to convert characters to UTF8 encoding: for example, cyrilic character "B" has to be "%D0%92".

string value = ...//text that contains non-latin characters 
byte[] bytes = System.Text.Encoding.UTF8.GetBytes(value);

StringBuilder sb = new StringBuilder();
foreach (byte b in bytes)
    sb.AppendFormat("%{0}", b.ToString("X"));

string encodedValue = sb.ToString();