Draw chart for poll result in webpart dynamically in SharePoint

InfoPath alternatives for form designing SharePoint

This is an article about drawing a chart in web part using simple google chart API. In SharePoint when a poll is conducted on a daily basis and user are facilitate to vote for a poll. Once a user gave voting for the Poll, Result of the poll result will be displayed as Chart.

You can get value from SharePoint server code using .cs code file.
Example
Poll question: Comment on sharepoint 2013?
Poll answer: Good or Bad

1. Create a sharepoint webpart and get poll voted result by connecting to SharePoint list.
2. Collect polling count Good count(30) Bad (4)
3. Save the count in public variable as given below in .cs

public string ycount ;
public string ncount ;
public int totalcount;

get the list data as given below



Page.ClientScript.RegisterStartupScript(this.GetType(), “CallMyFunction”, “drawChart()”, true);
totalcount = 0;

using (SPSite oSPSite = new SPSite(SPContext.Current.Site.Url))
{
using (SPWeb oSPWeb = oSPSite.OpenWeb())
{
SPList questionList = oSPWeb.Lists[“PollQuestions”];
SPQuery spQuery = new SPQuery();
spQuery.Query = “<Query><Where><IsNotNull><FieldRef Name=’Poll_Question’ /></IsNotNull></Where></Query>”;
spQuery.ViewFields = string.Concat(
“<FieldRef Name=’Poll_Question’/>”); ;
spQuery.RowLimit = 1;
SPListItemCollection quesListCln = questionList.GetItems(spQuery);
foreach (SPListItem ques in quesListCln)
{
string text = ques[“Poll_Question”].ToString();
questionLbl.Text=text;
}

}
}

//On submit of vote add into list and calcualte the count
int yesCount = 0;
int noCount = 0;
string choice;
choice = radioBtnChoice.SelectedItem.Text;

SPSecurity.RunWithElevatedPrivileges(delegate()
{

using (SPSite _site = new SPSite(SPContext.Current.Site.Url))
{
using (SPWeb web = _site.OpenWeb())
{
string pollQuestion = questionLbl.Text;
string currentUser = SPContext.Current.Web.CurrentUser.ToString();
SPList pollResultLst = web.Lists[“PollCompleteList”];
web.AllowUnsafeUpdates = true;
SPListItem item = pollResultLst.Items.Add();
item[“Poll_Question”] = questionLbl.Text;

//item[“User_Name”] = SPContext.Current.Web.AllUsers[“loginname”].Email;
item[“User_Name”] = SPContext.Current.Web.CurrentUser;
item[“Options”] = choice;
string titlePoll = pollQuestion + ” , ” + currentUser;
item[“Title”] = titlePoll;
SPQuery spQuery = new SPQuery();
spQuery.Query = “<Query><Where><Neq><FieldRef Name=’Title’ /><Value Type=’Text’>” + titlePoll + “</Value></Neq></Where></Query>”;
spQuery.ViewFields = string.Concat(
“<FieldRef Name=’Title’/>”);
SPQuery spQueryCount = new SPQuery();
spQueryCount.Query = “<Query><Where><Or><Eq><FieldRef Name=’Options’ /><Value Type=’Text’>Yes</Value></Eq><Eq><FieldRef Name=’Options’ /><Value Type=’Text’>No</Value></Eq></Or></Where></Query>”;
SPListItemCollection countItemCln = pollResultLst.GetItems(spQueryCount);
SPListItemCollection pollExistsCln = pollResultLst.GetItems(spQuery);
bool esistingitm = false;
if (pollExistsCln.Count > 0)
{
foreach (SPListItem exist in pollExistsCln)
{
if (exist.Title.ToString() == titlePoll)
{
esistingitm = true;
}
}
}

if (!esistingitm)
{
item.Update();
pollCommentLbl.Text = “Successfully Registered…..”;
web.AllowUnsafeUpdates = false;
}
else
{
pollCommentLbl.Text = “!!!Ooops….You have already voted for this question!!!”;
}
if (countItemCln.Count > 0)
{
foreach (SPListItem pollOption in countItemCln)
{
// string check = pollOption[“Title”].ToString();
// string qn = pollOption[“Poll_Question”].ToString();
// if (pollOption[“Options”].ToString() == “Yes”)

string fieldname = pollOption.Fields[4].Title;
if (pollOption[4].ToString() == “Yes”)
{
yesCount++;
}
else
{
noCount++;

}

}
ycount = yesCount.ToString();
ncount = noCount.ToString();
if (yesCount != 0 || noCount != 0)
{
pollResultLbl.Text = “Good= ” + yesCount + ” and Bad = ” + noCount;
int totalcount = yesCount + noCount;

}
}
}

}
});

4. Now to display the chart in the page using google chart API

5. Create a div to dispaly chart in the page
<div id=”chart_div” style=”width: 350px; height: 300px;”>

6. Use javascript to display the chart as given below
<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(“visualization”, “1”, { packages: [“corechart”] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[”, ‘Good’, ‘Bad’],
[”, <%=this.ycount%>, <%=this.ncount%>],
]);

var options = {
title: ”,
vAxis: { title: ‘Total’, titleTextStyle: { color: ‘Red’} }
};

var chart = new google.visualization.BarChart(document.getElementById(‘chart_div’));
chart.draw(data, options);
}
</script>


7. Once the code is place result will be given as chart in the div specified in the page.

Read SharePoint 2013 tutorials:


You May Also like the Following SharePoint Online Tutorials:

About jayabharathi

The turning point in the process of growing up is when you discover the core of strength within you that survives all hurt.

View all posts by jayabharathi →

Leave a Reply