Free 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.

Because We’re So Good, Our Content gets Copied very Often.If you are not reading this on LearningSharePoint.com, please read the Original article Here for details, comments and updates on this post.



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.

"SharePoint 2013 Chart WebPart"

 

Lets look at the Steps –

1. Create a Visual WebPart Project

"SharePoint 2013 Visual WebPart Chart "2. Deploy as a Farm solution

"SharePoint 2013 Deploy as farm"

2. Next Add a new Item of type Visual WebPart “SharePointPieChart”
"SharePoint 2013 pie chart"

3. Solution Explorer would look like below.

"SharePoint 2013 SolutionExplorer"

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.
"SharePoint 2013 Add WebPart"

8. Set the webpart properties as below.

"SharePoint 2013 WebPart Settings"

9. Final Result
"SharePoint 2013 Chart WebPart"

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

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

Original article : Here


Comments

  1. Good article – but I think it make more sense to use Client Object model to read data for such scenario’s

    Sandeep

  2. Hi Isha

    Is it possible to this without the Google apis and just use Microsoft / SharePoint apis ?

    Thanks

    Nigel

Speak Your Mind

*

Disclaimer: The contents of this site are provided “AS IS”. Information and views expressed including URL(s) and other Internet website references, may change without notice. You bear the risk of using it. SharePoint, MOSS, SharePoint 2010, SharePoint 2013 and Microsoft are trademarks of the Microsoft Corporation.Learning SharePoint only provides Tips,Tricks and Tutorials for using Microsoft SharePoint, Microsoft Office and related Softwares.
Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.