Create SharePoint 2013 Chart WebPart

Summary : Free SharePoint 2013 Chart WebPart, How to Create Free SharePoint 2013 Chart WebPart,Download SharePoint 2013 Chart WebPart, Create a Custom Pie Chart WebPart using Client Object Model in SharePoint 2013

In SharePoint 2013 the much used Chart WebPart has been removed and no good and easy alternative for the webpart has been provided. A Chart representation is always loved by the business especially by Managers.Being able to view the overall Status of Tasks gives a good idea of Whats pending and Whats moving in a Project.Task list in SharePoint 2013 by default has a column called “Status” which represents a task status by “Not Started,In Progress,Completed,Deferred and Waiting on someone else” options.

In this post we will see a Step-by-Step Tutorial to Create a Pie Chart WebPart that represent a Status column in a Task list.You can specify List Name (e.g. Tasks) View Name (e.g. All Tasks) and Column Name (e.g. Status) in webpart properties and a Google Pie chart will be created using these properties.Direct downloads are available at the end of the post.

Lets look at the Steps -

1. Create a Visual WebPart Project

2. Deploy as a Farm solution

2. Next Add a new Item of type Visual WebPart “SharePointPieChart”

3. Solution Explorer would look like below.

4. Paste the below code in SharePointPieChart.ascx.This is a JavaScript to create Google Pie Chart based on ListName,ViewName and ColumnName webpart properties.

< %@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
< %@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
< %@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
< %@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
< %@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
< %@ Import Namespace="Microsoft.SharePoint" %>
< %@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
< %@ Control Language="C#" AutoEventWireup="true" CodeBehind="SharePointPieChart.ascx.cs" Inherits="Sp2013ChartWebPart.SharePointPieChart.SharePointPieChart" %>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['corechart'] });
< /script>
<script type="text/ecmascript" language="ecmascript">
ExecuteOrDelayUntilScriptLoaded(CreateChart, "sp.js");
var ListName = '<%=listname%>';
var ViewName = '<%=ViewName%>';
var ColumnName = '<%=ColumnName%>';
function CreateChart() {
try {
if (ListName != null && ViewName != null && ColumnName != null) {
var context = new SP.ClientContext.get_current();
var list = context.get_web().get_lists().getByTitle(ListName);
var view = list.get_views().getByTitle(ViewName);
context.load(view);
context.executeQueryAsync(
function (sender, args) { getItemsFromList(ListName, "<View><Query>" + view.get_viewQuery() + "</Query></View>") },
function (sender, args) { alert("error: " + args.get_message()); }
);
}
}
catch (e) { alert("Please check the WebPart Properites and the values in the specified list. Error :" + e); }
}
function getItemsFromList(listTitle, queryText) {
try {
var context = new SP.ClientContext.get_current();
var list = context.get_web().get_lists().getByTitle(listTitle);
var query = new SP.CamlQuery();
query.set_viewXml(queryText);
var items = list.getItems(query);
context.load(items);
context.executeQueryAsync(
function () {
//Creating google datatable
var data = new google.visualization.DataTable();
data.addColumn('string', ColumnName);
data.addColumn('number', 'numberofitems');
var itemCount = items.get_count();
var itemsarry = new Array(parseInt(itemCount) - 1);
var ListEnumerator = items.getEnumerator();
//adding values to array
for (i = 0; i < itemCount; i++) {
itemsarry[i] = new Array(0);
itemsarry[i][0] = items.get_item(i).get_item(ColumnName);
}
//gettig count of unique values from array
var uniqueItemsCount = 0;
var uniqueItems = {};
$.each(itemsarry, function () {
var num = this[0];
uniqueItems[num] = uniqueItems[num] + 1 || 1;
uniqueItemsCount++;
});
data.addRows(uniqueItemsCount);
var j = 0;
$.each(uniqueItems, function (itemValue, noOfItems) {
if (itemValue != 'undefined');
{
data.setValue(j, 0, itemValue);
data.setValue(j, 1, noOfItems);
j++;
}
});
drawVisualization(data);
},
function (sender, args) { alert("error in inner request: " + args.get_message()); }
);
}
catch (e) { alert("Please check the WebPart Properites and the values in the specified list. Error :" + e); }
}
function drawVisualization(data) {
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, { title: "Status" });
}
</script>
< div id="visualization" style="width: 1000px; height: 600px;"></div>

5. Next we will Create an Editor Tool Part and add WebPart Properties to it.Add the below code to create webpart properties in SharePointPieChart.ascx.cs.

using System;
using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using System.Collections;

namespace Sp2013ChartWebPart.SharePointPieChart
{
[ToolboxItemAttribute(false)]
public partial class SharePointPieChart : WebPart
{
public SharePointPieChart()
{
}
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
InitializeControl();
}
protected void Page_Load(object sender, EventArgs e)
{
}
#region Custom ASP.NET web part property
public override object WebBrowsableObject
{
get
{
return this;
}
}

//Task list name string

private String _listname = null;
private String _ColumnName = null;
private String _ViewName = null;
[Personalizable(), WebBrowsable()]
public String listname
{
get { return _listname; }
set { _listname = value; }
}
[Personalizable(), WebBrowsable()]
public String ColumnName
{
get { return _ColumnName; }
set { _ColumnName = value; }
}
[Personalizable(), WebBrowsable()]
public String ViewName
{
get { return _ViewName; }
set { _ViewName = value; }
}
//Create an editor part to set the custom task list

public override EditorPartCollection CreateEditorParts()
{
ArrayList editorArray = new ArrayList();
CustomProperty edPart = new CustomProperty();
edPart.ID = this.ID + "_editorPart1";
editorArray.Add(edPart);
EditorPartCollection editorParts = new EditorPartCollection(editorArray);
return editorParts;
}

// Create a custom EditorPart to edit the WebPart control.

private class CustomProperty : EditorPart
{
TextBox _tblistname;
TextBox _ColumnName;
TextBox _ViewName;

public CustomProperty()
{
Title = "WebPart Settings";
}

public override bool ApplyChanges()
{
SharePointPieChart part = (SharePointPieChart)WebPartToEdit;

//Update the custom WebPart control with the task list

part.listname = tblistname.Text;
part.ColumnName = ColName.Text;
part.ViewName = VName.Text;
return true;
}

public override void SyncChanges()
{
SharePointPieChart part = (SharePointPieChart)WebPartToEdit;
String currentList = part.listname;
}

protected override void CreateChildControls()
{
Controls.Clear();
//Add a new textbox control to set the task list
_tblistname = new TextBox();
_ColumnName = new TextBox();
_ViewName = new TextBox();
Controls.Add(_tblistname);
Controls.Add(_ViewName);
Controls.Add(_ColumnName);
}
protected override void RenderContents(HtmlTextWriter writer)
{
writer.Write("<strong>List or Library Name :</strong>");
writer.WriteBreak();
_tblistname.RenderControl(writer);
writer.WriteBreak();
writer.WriteBreak();
writer.Write("<strong>View Name :</strong>");
writer.WriteBreak();
_ViewName.RenderControl(writer);
writer.WriteBreak();
writer.WriteBreak();
writer.Write("<strong>Column Name :</strong>");
writer.WriteBreak();
_ColumnName.RenderControl(writer);
writer.WriteBreak();
}

// Return the task list name from the textbox

private TextBox tblistname
{
get
{
EnsureChildControls();
return _tblistname;
}
}
private TextBox ColName
{
get
{
EnsureChildControls();
return _ColumnName;
}
}
private TextBox VName
{
get
{
EnsureChildControls();
return _ViewName;
}
}
}
#endregion
}
}

6. Save and Run the project.

7. Add the WebPart into Solutions Gallery and then add it on the page.

8. Set the webpart properties as below.

9. Final Result