Free SharePoint 2013 Chart WebPart

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" %>

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)

Google Visualization API is copyrighted by Google under Google Visualization API https://developers.google.com/chart/terms and https://developers.google.com/terms/ (Google APIs Terms of Service).

The code is provided “as-is”  with NO WARRANTY and NO LIABILITY NOTICE -->

<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

Downloads -
You can direct download a the Wsp (Farm Solution)

For Sandbox solution head over to SharePoint 2013 Online WebParts – Sandbox Solution