Charting with DataGrid Control
page 1 of 1
Published: 17 Apr 2006
Unedited - Community Contributed
Abstract
In this article, Amal discusses how to create charts inside a DataGrid control using an XML file.
by Amal ElHosseiny
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 11666/ 28

In this article, I will demonstrate how to present data for school classes with their related student numbers using a DataGrid. Figure 1 shows the DataGrid in design mode in Visual Studio .NET 2003.

Figure 1

The relevant data is stored in an XML file named GridData.xml

Listing 1 : XML Code GridData.xml

<?xml version="1.0"encoding="utf-8" ?> 
<Classes>
<Class>
<Name>Class A</Name>
<Students>120</Students>
</Class>
<Class>
<Name>Class B</Name>
<Students>150</Students>
</Class>
<Class>
<Name>Class C</Name>
<Students>220</Students>
</Class>
<Class>
<Name>Class D</Name>
<Students>100</Students>
</Class>
<Class>
<Name>Class E</Name>
<Students>320</Students>
</Class>
</Classes>

In the Page_Load event I have applied a function entitled LoadGrid().

Listing 2 : DataGrid.aspx.cs

void LoadGrid()
{
  DataSet dsGrid=new  DataSet ();
 dsGrid.ReadXml(Server.MapPath(@"GridData.xml"),XmlReadMode.Auto);
  dgDisplay.DataSource=dsGrid;
  dgDisplay.DataBind ();
}

This function loads data from the XML file and binds it to the DataGrid.  In DataGrid binding, we have 3 columns (2 bound columns and 1 for template columns).

Listing 3 : HTML Code in DataGrid.aspx

<asp:BoundColumn DataField="Name"HeaderText="Class Name"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="StudentsPercentage">
<ItemTemplate>
<Table width="100%" >
<tr width="100%"height="10" ><td class=GTitleBack
width='<%#((int.Parse(DataBinder.Eval(Container.DataItem,"Students").ToString())*100)/nStudent) %>%' ></td>
<td width=' <% #100-((int.Parse(DataBinder.Eval(Container.DataItem,"Students").ToString())*100)/nStudent)%>%' ></td>
</tr>
</Table>
</ItemTemplate>
</asp:TemplateColumn>

In the template column we have an HTML table with one row and two columns.  Its width changes according to the relevant student number and its percentage to the whole student number

First column width=
int.Parse(DataBinder.Eval(Container.DataItem,"Students").ToString())*100/nStudent
Second column width=
100- (int.Parse(DataBinder.Eval(Container.DataItem,"Students").ToString())*100/nStudent)

The width for columns is in a percentage and to give the appearance of charting we use a style sheet class called GTitleBack

Listing 4 : Style Sheet Code in style.css

.GTitleBack
{ filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#F7B611);
}

If you do not want use an ingredient filter, you can use a background color for the column.  To be able to see all styles for your page, do not forget to link the style sheet with your page.

Listing 5 : HTML Code in DataGrid.aspx

<LINK href="style.css"type="text/css" rel="stylesheet"/>

The final output will be as shown in the Figure given below.

Figure 2

Downloads

[Download Sample]

Conclusion

In this article, you have learned how to graphically display data using a DataGrid with the help of relevant code samples.

 



User Comments

No comments posted yet.

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2017 ASPAlliance.com  |  Page Processed at 2017-11-22 1:24:20 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search