Thursday, 23 February 2012

how to create online poll system with percentage graphs using asp.net

Introduction

Here I will explain how to create online poll system with percentage graphs using asp.net.

Description:

In many websites we will see online polls like which browser is best browser? We can submit our votes to these polls and they will display result with graphs after seen all these polls I tried to implement simple application for online polls with percentage graphs using as.net.
Here I am using XML to store all the poll options and retrieving all the options and displaying result based on polls options. Here I need to say one thing before implement this application I don’t know the exact purpose of XML whenever I implement this application I got idea regarding XML. XML is used to store the data and we can use it in any application and it will support for all the languages. Here I explained clearly how to insert and retrieve data from XML and how to bind that data to repeater

Here in my application I used only simple table concepts to display graphs I didn’t used any graph tools let see how I implemented

Design your aspx page like this 


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">

.ButtonStyle {
background-color: #9EBEDE;
color: Black;
font-family: verdana;
font-size: 8pt;

}
.BarStyle
{

background-color: #996633;
}
.TablePollResultFoot
{
background-color: #B0C4DE;
font-weight: bold;
height:30px;
font-size: 13px;
}
.gridview
{
border: solid 1px #CCCCCC;
width: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="border:1px solid #9EBEDE" align="center" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td  align="left">
<b><span style="color:#FF6600"> Online Poll Example with XML </span>  </b>
</td>
</tr>
<tr>
<td height="10px"></td>
</tr>
<tr>
<td  >
<b>which one is best browser?</b>
</td>
</tr>
<tr>
<td height="5px"></td>
</tr>
<tr>
<td align="left">
<asp:RadioButtonList ID="radVote" runat="server">
<asp:ListItem>Mozilla</asp:ListItem>
<asp:ListItem>Internet Explorer</asp:ListItem>
<asp:ListItem>Google Chrome</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<asp:Button ID="btnVote" runat="server" Text="Vote"
onclick="btnVote_Click" CssClass="ButtonStyle" />
<asp:Button ID="btnResult" runat="server" Text="Reult" CssClass="ButtonStyle"
onclick="btnResult_Click" />
<br />
<asp:Label ID="lblStatus" runat="server" />
</td>
</tr>
<tr>
<td align="left">
<asp:GridView runat="server" ID="gvResult" BackColor="White" CellPadding="4"
EnableModelValidation="True" AutoGenerateColumns="false"
onrowdatabound="gvResult_RowDataBound" EmptyDataText="No one submit votes">
<FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
<HeaderStyle BackColor="#4682B4" Font-Bold="True" ForeColor="#FFFFCC" />
<PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />

<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
<Columns>
<asp:TemplateField HeaderText="Options" HeaderStyle-HorizontalAlign="Left"  ItemStyle-Width="20%">
<ItemTemplate>
<asp:Label ID="lblOptions" runat="server" Text='<%#Bind("OPTION_NAME") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Votes" HeaderStyle-HorizontalAlign="Left"  ItemStyle-Width="10%">
<ItemTemplate>
<asp:Label ID="lblVotes" runat="server" Text='<%#Bind("VOTES") %>' ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="%" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="15%">
<ItemTemplate>
<asp:Label ID="lblpercentage" runat="server" Text='<%#Bind("PERCENTAGE","{0:f2}") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Bar" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="55%" >
<ItemTemplate>
<table runat="server" id="tblBar">
<tr class="BarStyle"><td height="8px"></td></tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
After that add XML file to your application and give name as "Votes.xml" intially xml file like this root element is compulsory for XML files that’s why I added CommentInformation in XML file that root element in XML file.

<?xml version="1.0" encoding="utf-8"?>
<VotesInformation>
 </VotesInformation>
After that add this namespace in codebehind


using System.Xml;
using System.Drawing;
After that write the following code in code behind


int Count = 0;
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnVote_Click(object sender, EventArgs e)
{
if (radVote.SelectedItem != null)
{
InsertVotes(radVote.SelectedItem.ToString());
}
else
{

lblStatus.ForeColor = Color.Red;
lblStatus.Text = "Please select at least one option to vote for poll";
}
}

protected void InsertVotes(string theVote)
{
try
{
XmlDocument xmldoc = new XmlDocument();
xmldoc.Load(Server.MapPath("Votes.xml"));
XmlElement parentelement = xmldoc.CreateElement("Vote");
XmlElement votechoice = xmldoc.CreateElement("Choice");
votechoice.InnerText = theVote;
parentelement.AppendChild(votechoice);
xmldoc.DocumentElement.AppendChild(parentelement);
xmldoc.Save(Server.MapPath("Votes.xml"));
lblStatus.ForeColor = Color.Green;
lblStatus.Text = "Thank you for your vote.";
}

catch
{
lblStatus.Text = "Sorry, unable to process request. Please try again.";
}
}

protected void readXML()
{
int mCount=0;
int iCount=0;
int gCount=0;
XmlTextReader xmlreader = new XmlTextReader(Server.MapPath("Votes.xml"));
DataSet ds = new DataSet();
ds.ReadXml(xmlreader);
xmlreader.Close();
if (ds.Tables.Count>0)
{
int dscount = ds.Tables[0].Rows.Count;
for (int i = 0; i < dscount; i++)
{
if (ds.Tables[0].Rows[i][0].ToString() == "Mozilla")
mCount++;
else if (ds.Tables[0].Rows[i][0].ToString() == "Internet Explorer")
iCount++;
else if (ds.Tables[0].Rows[i][0].ToString() == "Google Chrome")
gCount++;
}
double theTotal;
theTotal = mCount + iCount + gCount;
double mPercent;
double oPercent;
double gPercent;
mPercent = (mCount / theTotal) * 100;
oPercent = (iCount / theTotal) * 100;
gPercent = (gCount / theTotal) * 100;
double totalpercentage = mPercent + oPercent + gPercent;
string[] votescount = { mCount.ToString(), iCount.ToString(), gCount.ToString() };
string[] array = { mPercent.ToString(), oPercent.ToString(), gPercent.ToString() };
DataTable dt = new DataTable();
dt.Columns.Add("OPTION_NAME");
dt.Columns.Add("VOTES");
dt.Columns.Add("PERCENTAGE");
int count = radVote.Items.Count;
Count = count + 1;
for (int i = 0; i < count; i++)
{
dt.Rows.Add();
dt.Rows[i]["OPTION_NAME"] = radVote.Items[i].ToString();
dt.Rows[i]["VOTES"] = votescount[i];
dt.Rows[i]["PERCENTAGE"] = array[i];
}
dt.Rows.Add("Total", theTotal, totalpercentage);
gvResult.DataSource = dt;
gvResult.DataBind();
}
else
{
gvResult.DataSource = null;
gvResult.DataBind();
}

}

protected void butResults_Click(object sender, EventArgs e)
{
readXML();
}
int cnt = 0;
protected void gvResult_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
cnt++;
Label lblpercent = (Label)e.Row.FindControl("lblpercentage");
HtmlTable tblpercent = (HtmlTable)e.Row.FindControl("tblBar");
tblpercent.Width = lblpercent.Text+"%";
if (lblpercent.Text == "0")
{
tblpercent.Visible = false;
}

if (cnt == Count)
{
e.Row.CssClass = "TablePollResultFoot";
}
}
foreach (TableCell tc in e.Row.Cells)
{
tc.Attributes["style"] = "border-color:#CCCCCC";
}
}
Demo

Download sample code attached

No comments:

Post a Comment