Skip to main content

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

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

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();

Comments

Popular posts from this blog

How to merge cells with equal values in the GridView

My solution is not the first; however, I think, it is rather universal and very short - less than 20 lines of the code.

The algorithm is simple: to bypass all the rows, starting from the second at the bottom, to the top. If a cell value is the same as a value in the previous (lower) row, then increase RowSpan and make the lower cell invisible, and so forth.

The code that merges the cells is very short:
public class GridDecorator { public static void MergeRows(GridView gridView) { for (int rowIndex = gridView.Rows.Count - 2; rowIndex >= 0; rowIndex--) { GridViewRow row = gridView.Rows[rowIndex]; GridViewRow previousRow = gridView.Rows[rowIndex + 1]; for (int i = 0; i < row.Cells.Count; i++) { if (row.Cells[i].Text == previousRow.Cells[i].Text) { row.Cells[i].RowSpan = previousRow.Cells[i].RowSpan < 2 ? 2 : prev…

Merging columns in GridView/DataGrid header

As necessity to show header columns in a few rows occurs fairly often it would be good to have such functionality in the GridView/DataGrid control as an in-built feature. But meanwhile everyone solves this problem in his own way.

The described below variant of the merging implementation is based on irwansyah's idea to use the SetRenderMethodDelegate method for custom rendering of grid columns header. I guess this approach can be simplified in order to get more compact and handy code for reuse.
The code overview
As it may be required to merge a few groups of columns - for example, 1,2 and 4,5,6 - we need a class to store common information about all united columns.
[Serializable]
private class MergedColumnsInfo
{
// indexes of merged columns
public List<int> MergedColumns = new List<int>();
// key-value pairs: key = the first column index, value = number of the merged columns
public Hashtable StartColumns = new Hashtable();
// key-value pairs: key = the first column in…

JIRA REST API: Cookie-based Authentication

Three authentication methods are proposed by the JIRA REST API documentation: Basic Authentication is a simple but not very safe approach. Credentials are sent in the header on every request and encoding to Base64 is not a proper protection in this case; HTTPS connection is required. OAuth authentication - looks a bit complex and requires additional configuration at the JIRA server that is not always possible. Cookie-based Authentication - this approach seems to be the most convinient one: credentials are checked once, then the authentication cookie only is sent on subsequent requests. However, trying to use the cookie-based authentication I encountered an issue. The approach described in the documentation worked partially: I was able to create a new session and get the response containing the session cookie but all subsequent requests using this session cookie were rejected as unauthorized. Spending some time investigating this I found the cause of the issue: JSESSIONID is not th…