Tuesday, December 5, 2006

Building User control for Horizontal Graph Using Xml data

Introduction

This article describe how to develop the web user control for horizontal graph using xml data,

Web user control

The web user control used for rapid application development, here I describe how to create the web user control for generating the horizontal graph using XML data,

Web user control is similar to a web form, with both a user interface page and code behind file. The user control differ from an .aspx file in this way

1. The extension must be. ascx
2. The user control does not have , and

creating graph user control:


To create the user control, we have to add a user control file to a project, At first create a new web application in c#.Right click on the project title in project explorer and add the web user control item from the selection tool, Give the file name for the newly add user control(graph.ascx),This is the file for developer to expose the control, An .ASCX file can’t be viewed directly in the browser, IT need container to viewed such as web form,Place the following code in .ASCX code behind file

Code Sample:

Place the following code in page load event in user control


void Page_Load(Object sender, EventArgs e)
{
ds.ReadXml(_xmlpath);
k=ds.Tables[0].Rows.Count;
first_val=new Int32[k];
second_val=new Int32[k];
avalue=new String[k];

for(i=0;i<=k-1;i++)
{
avalue[i]=ds.Tables[0].Rows[i]["title"].ToString();
val_1=ds.Tables[0].Rows[i]["value1"].ToString();
val_2=ds.Tables[0].Rows[i]["value2"].ToString();
first_val[i]=Int32.Parse(val_1);
second_val[i]=Int32.Parse(val_2);

}


if (first_val != null)
{

String [] sColor = new String[9];
sColor[0] = "red";
sColor[1] = "lightblue";
sColor[2] = "green";
sColor[3] = "orange";
sColor[4] = "yellow";
sColor[5] = "blue";
sColor[6] = "lightgrey";
sColor[7] = "pink";
sColor[8] = "purple";


Int32 iColor = 0;

lblChartTitle.Text = _sChartTitle;


Int32 iMaxVal = 0;
Int32 siMaxVal=0;

for (int i = 0; i < first_val.Length; i++)
{
if (first_val[i] > iMaxVal)
iMaxVal = first_val[i];
if (second_val[i]>siMaxVal)
siMaxVal=second_val[i];
}
Int32 iMod = Math.Abs(_UserWidth/iMaxVal);
Int32 siMod=Math.Abs(_UserWidth/siMaxVal);


String sOut = "";

for (int i = 0; i < first_val.Length; i++)
{


if (first_val[i] > 0)
{

sOut += " " + avalue[i] + " ";
sOut += " " + RenderItem(first_val[i],second_val[i], iMod, sColor[iColor]) + " ";
iColor++;

if (iColor > 8) iColor = 0;
}

}
lblItems.Text = sOut;
lblXAxisTitle.Text = _sXAxisTitle;


}
}


The above code read the data from the xml file and it stored into array variable,

The following method are used to get and set the properties of the variable,


public Int32 UserWidth
{
get { return _UserWidth; }
set { _UserWidth = value; }
}


public String XAxisTitle
{
get { return _sXAxisTitle; }
set { _sXAxisTitle = value; }
}

public String ChartTitle
{
get { return _sChartTitle; }
set { _sChartTitle = value; }
}
public String xmlpath
{
get{ return _xmlpath;}
set{ _xmlpath=value; }
}


After that we have to register the user control in webfrom,Once the control registered on the page,you freely add many instances of the controls to the page,The following code is used to register the contol in web form


<%@ Register TagPrefix="DNG" TagName="dotgraph" Src="graph.ascx" %>


Add the above Tag in html view of the web form, The register directive used to register the user control in web form, The “TagPrefix” attribute in register directive used to specifies the prefix to use for the control, The “TagName” attribute specifies the name of the control . Together, the tags create an instance of the control specified at the location of the "Src" attribute,The following code used place the control in webform





For this control we have to set the following properties,


dngchart.xmlpath="D:\\chart.xml";
dngchart.ChartTitle = "Modern Life:";
dngchart.XAxisTitle = "(units display actual numbers)";


Here the dngchart is ID of the user control, In above code the xmlpath contain the path of the xml file stored, The file format of the xml file as follows








Conclusion


While this user control is quit simple, User controls are very useful for divide the large application into smaller units ,Mostly it reduce the application development burden