Create Custom Chart Web Part in SharePoint 2010

InfoPath alternatives for form designing SharePoint

In this post we will discuss how we can create a custom chart web part in SharePoint 2010. Also you can check out some useful posts on:

Read some SharePoint tutorials:
Set Default value for Status column on your NewForm.aspx using Jquery

Disable multiline textbox and single line textbox in SharePoint using jQuery

SharePoint Online branding Creating Tabbed Menu using Bootstrap and HTML in SharePoint 2016/2013

Reporting is an important part of any project. Sometime client required to display the record in a visual format. so we need to display record in any visual format like chart web part or other.

For displaying a list record in chart format please follow below steps.

1- First create a list values like below:


Create Custom Chart Web Part in SharePoint 2010
Create Custom Chart Web Part in SharePoint 2010

2- Then Add the following references to your web.config in their respective locations, The web application web.config file usually located in the below directories: C:\inetpub\wwwroot\wss\VirtualDirectories\<Port Number>.

<SafeControls>

<SafeControl Assembly=”System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″ Namespace=”System.Web.UI.DataVisualization.Charting” TypeName=”*” Safe=”True” />

<system.web>

<httpHandlers>

<add path=”ChartImg.axd” verb=”GET,HEAD,POST” type=”System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″ validate=”false” />

</httpHandlers>

<appSettings>

<add key=”ChartImageHandler” value=”storage=file;timeout=60;”/>

<system.webServer>
<handlers>
<add name=”ChartImageHandler” preCondition=”integratedMode” verb=”GET,HEAD,POST” path=”ChartImg.axd” type=”System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″ />

3- Then add the below code in the webusercontrol code file in the visual webpart.

using System.Data;

using System.Linq;

using System.Web.UI;

using Microsoft.SharePoint;

using System.Web.UI.DataVisualization.Charting;

namespace SPChartWp.ChartWp

{

public partial class ChartWpUserControl : UserControl

{

DataView dv;

protected void Page_Load(object sender, EventArgs e)

{

try

{

SPSecurity.RunWithElevatedPrivileges(delegate()

{

using (SPSite oSite = new SPSite(SPContext.Current.Site.Url))

{

using (SPWeb oWeb = oSite.OpenWeb())

{

SPListCollection oListCollection = oWeb.Lists;

SPList oList = oWeb.Lists[“Tracker”];

SPListItemCollection oItems = oList.GetItems();

DataTable dtMain = ConvertSPListToDataTable(oItems);

var dtNkdkdew = (from r in dtMain.AsEnumerable()

select r).Distinct();

DataTable resulttbl = new DataTable();

IEnumerable<string> DistinRRMasterID = new List<string>();

DistinRRMasterID = (from results in dtMain.AsEnumerable()

select (string)results[“Role”]).Distinct();

//Create DataTable

DataTable returnDt = new DataTable();

DataRow oRow = returnDt.NewRow();

string[] ColumnsArr = { “Role”, “Number Postions”, “In Progress”, “On Hold”, “L1 Scheduled”, “L2 Scheduled”, “HR Scheduled”,”?Offer Released” };

int noOfColumns = ColumnsArr.Length;

for (int cntr = 0; cntr < noOfColumns; cntr++)

{

DataColumn column = new DataColumn();

column.ColumnName = ColumnsArr[cntr];

column.DataType = typeof(string);

returnDt.Columns.Add(column);

}

foreach (var rrRole in DistinRRMasterID)

{

var rrInProgressCnt = (from r in dtMain.AsEnumerable()

where (r.Field<string>(“Role”) == rrRole

&& r.Field<string>(“Requirement Status”) == “In Progress”)

select r).Count();

var OnHoldCnt = (from r in dtMain.AsEnumerable()

where (r.Field<string>(“Role”) == rrRole

&& r.Field<string>(“Requirement Status”) == “On Hold”)

select r).Count();

var L1RoundCnt = (from r in dtMain.AsEnumerable()

where (r.Field<string>(“Role”) == rrRole

&& r.Field<string>(“Requirement Status”) == “L1 Round”)

select r).Count();

var L2RoundCnt = (from r in dtMain.AsEnumerable()

where (r.Field<string>(“Role”) == rrRole

&& r.Field<string>(“Requirement Status”) == “L2 Round”)

select r).Count();

var HRRoundCnt = (from r in dtMain.AsEnumerable()

where (r.Field<string>(“Role”) == rrRole

&& r.Field<string>(“Requirement Status”) == “HR Round”)

select r).Count();

var OfferReleasedCnt = (from r in dtMain.AsEnumerable()

where (r.Field<string>(“Role”) == rrRole

&& r.Field<string>(“Requirement Status”) == “Offer Released”)

select r).Count();

var MainColl = (from r in dtMain.AsEnumerable()

where (r.Field<string>(“Role”) == rrRole)

select r);

#region Bind Fields datatable

//Add Data to row

//Create DataTable Rows

oRow = returnDt.NewRow();

var item = MainColl.FirstOrDefault();

oRow[“Role”] = rrRole;

oRow[“Number Postions”] = item[“NmberOfPostion”];

oRow[“In Progress”] = rrInProgressCnt;

oRow[“On Hold”] = OnHoldCnt;

oRow[“L1 Scheduled”] = L1RoundCnt;

oRow[“L2 Scheduled”] = L2RoundCnt;

oRow[“HR Scheduled”] = HRRoundCnt;

oRow[“?Offer Released”] = OfferReleasedCnt;

returnDt.Rows.Add(oRow);

#endregion

}

Chart1.ChartAreas[“ChartArea1”].AxisY.Title = “Number Postions”;

Chart1.ChartAreas[“ChartArea1”].AxisX.Title = “Role”;

Chart1.DataSource = returnDt;

Chart1.DataBind();

dv = new DataView(returnDt);

dv.Sort = “Role ASC”;

//Bind Data to Grid

GridView1.DataSource = dv;

GridView1.PagerTemplate = null;

GridView1.DataBind();

}

}

});

}

catch (Exception ex)

{

Response.Write(ex.Message);

}

}

private static DataTable ConvertSPListToDataTable(SPListItemCollection spItemCollection)

{

DataTable dt = new DataTable();

try

{

dt = spItemCollection.GetDataTable();

foreach (DataColumn c in dt.Columns)

c.ColumnName = System.Xml.XmlConvert.DecodeName(c.ColumnName);

return (dt);

}

catch

{

return (dt);

}

}

}


}

4- Then deploy your webpart, the chart webpart will appear like below:

Create Custom Chart Web Part in SharePoint 2010
Create Custom Chart Web Part in SharePoint 2010

You May Also like the Following SharePoint Online Tutorials:

About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →

Leave a Reply