Wednesday, June 4, 2008

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

Sunday, April 6, 2008

How to use standard FileUpload in AJAX-enabled web applications

I would like to note that this article is not about the ability to upload files to the server without the postback. There are a lot of articles on this topic, just type "AJAX FileUpload" on any search engine and you'll get many examples. However with AJAX they actually have little in common, because the XMLHttpRequest does not support asynchronous uploading of files to the server, they are rather a variety of imitations, for example, using hidden IFRAME element. Nevertheless I want to emphasize that the article is not about that but about the standard FileUpload control.

There are two problems you might encounter when using it on UpdatePanel.

Problem 1
If the postback is caused by the control which lies on UpdatePanel, FileUpload is always empty when it has come to the server, regardless whether a file has been selected or not.
Example:
<asp:UpdatePanel ID="UpdatePanel1" runat=server>
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat=server />
<asp:Button ID="btnUpload" runat=server Text="Upload" OnClick="btnUpload_Click"/>
</ContentTemplate>
</asp:UpdatePanel>

Solution
As XMLHttpRequest does not allow to send files asynchronously, they have to be submitted in a common manner. This problem is well described around, it is solved by registration of the control that has to submit the form as a postback trigger (in the above example it is btnUpload button).
<asp:UpdatePanel ID="UpdatePanel1" runat=server>
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat=server />
<asp:Button ID="btnUpload" runat=server Text="Upload 2" OnClick="btnUpload_Click"/>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
</asp:UpdatePanel>

Problem 2
FileUpload does not work if it is loaded not on the initial page load but appears only after asynchronous update of the page part.
Example (pnlUpload panel is invisible at the beginning and is shown after clicking on btnShowFileUpload button):
<asp:UpdatePanel ID="UpdatePanel1" runat=server>
<ContentTemplate>
<asp:Button ID="btnShowFileUpload" runat=server Text="Show File Upload" OnClick="btnShowFileUpload_Click"/>
<asp:Panel ID="pnlUpload" runat=server Visible="False">
<asp:FileUpload ID="FileUpload1" runat=server />
<asp:Button ID="btnUpload" runat=server Text="Upload" OnClick="btnUpload_Click"/>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
</asp:UpdatePanel>

.......................

protected void btnShowFileUpload_Click(object sender, EventArgs e)
{
pnlUpload.Visible = true;
}

Solution
The problem is caused by the requirement that for the normal work of FileUpload the form should have enctype="multipart/form-data". Usually, it is set in overriden OnPreRender method of FileUpload control.
protected internal override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
HtmlForm form = this.Page.Form;
if ((form != null) && (form.Enctype.Length == 0))
{
form.Enctype = "multipart/form-data";
}
}

Although during asynchronous postback this code is also executed but the form is not updated. That is why it is required to set the form content type explicitly during the first page load, for example, in the Page_Load event handler of the page or a control where FileUpload is placed.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
this.Page.Form.Enctype = "multipart/form-data";
}

In case if this task is repeated in a few places you may do a simple control derived from FileUpload with overriden OnLoad method and use it.
public class CustomFileUpload : FileUpload
{
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);

if (!Page.IsPostBack)
this.Page.Form.Enctype = "multipart/form-data";
}
}

Friday, March 14, 2008

Simultaneous Selection of Checkboxes in a GridView's column

If you are using checkboxes in GridView in order to select a few rows, then, no doubt, you have been faced with the task how to select/deselect all checkboxes in a selected column at a time. Usually it is solved by addition of special buttons somewhere or addition a checkbox in the GridView's column header.

I want to dwell on the second variant. In order to refrain from repetition of code all of required functionality can be hidden inside of a special control. This control is inherited from the CheckBox and have only one method overriden (OnLoad).
Inside the method a script is registered, this script allows to select/deselect all checkboxes in a GridView's column if a checkbox in the GridView's header is clicked. Besides, the script tracks situation when all checkboxes in rows are selected one by one and selects the checkbox in the column's header.
public class GridViewCheckBox : CheckBox
{
protected override void OnLoad(EventArgs e)
{
GridViewRow parentRow = this.NamingContainer as GridViewRow;

//checks whether the checkbox is inside of a template column (TemplateField)
if (parentRow != null)
{
//registers the script
string script = @"function gvCheckBoxClicked(sender,isHeader) {
var cell = sender.parentNode;
var rows = cell.parentNode.parentNode.rows;
if (isHeader) {
for(i=1; i<rows.length; i++)
rows[i].cells[cell.cellIndex].getElementsByTagName(""input"")[0].checked = sender.checked;
}
else {
var headerCheckBox = rows[0].cells[cell.cellIndex].getElementsByTagName(""input"")[0];
if (!sender.checked)
headerCheckBox.checked = false;
else {
for(i=1; i<rows.length; i++) {
if (!rows[i].cells[cell.cellIndex].getElementsByTagName(""input"")[0].checked) {
headerCheckBox.checked = false;
return;
}
}
headerCheckBox.checked = true;
}
}
}";

if (!Page.ClientScript.IsClientScriptBlockRegistered(typeof(Page), "GridViewCheckBox"))
Page.ClientScript.RegisterClientScriptBlock(typeof(Page), "GridViewCheckBox", script, true);

//adds onclick event handler
if (parentRow.RowType == DataControlRowType.Header)
this.Attributes["onclick"] = "gvCheckBoxClicked(this,true);";
else if (parentRow.RowType == DataControlRowType.DataRow)
this.Attributes["onclick"] = "gvCheckBoxClicked(this,false);";
}

base.OnLoad(e);
}
}
That is all. In order to use just add the control to HeaderTemplate and ItemTemplate of the required column:
<asp:GridView ID="GridView1" runat="server" >
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<wc:GridViewCheckBox id="GridViewCheckBox1" runat="server"/>
</HeaderTemplate>
<ItemTemplate>

<wc:GridViewCheckBox id="GridViewCheckBox2" runat="server"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ...
...
</Columns>
</asp:GridView>