SharePoint 2013 Chart WebPart Using HTML 5 RGraph with WCF REST Services

Overview

Chart WebPart is not available in SharePoint Server 2013 and we have to use excel services as a alternative to this. But it will be available only with enterprise edition. For SharePoint foundation / standard edition, we can use the ASP.NET charts or third party chart controls. In this walkthrough, we will see that how to leverage the RGraph for SharePoint charts implementations.

What is RGraph?

RGraph is a HTML5 charts library that uses the HTML5 canvas tag to draw and supports over twenty different types of charts and click here for more information about RGraph and also you can download the javascript libraries here.

What is the Advantage of using RGraph with SharePoint?

Currently I am working lot of charts related implementations in SharePoint 2013 and I found that it is more flexible and fastest one while comparing with ASP.NET chart controls. The main advantage is that it is 100% client side rendering and easily change the data source / chart types without post back.

Chart Data Source

For this walkthrough, I am using SharePoint foundation 2013 and I have created a list called “Income Tracker”

Now the chart data source is ready and we have a multiple options to expose the data to client.

1. SharePoint Client Object Model (ECMA Scripts)
2. ListData.svc
3. Custom WCF Services

I am going to use the custom WCF service for data retrieval. Because I have done the detailed walkthrough for custom WCF services earlier and you can find the step by step walkthrough here.

SharePoint Solution Structure

I have created the solution structure like below,

You can find the complete code implementation below,

public class GraphData
    {
public List<string> ChartLabels { get; set; }
public List<int> IncomeValues { get; set; }
public List<int> ExpenseValues { get; set; }
public GraphData()
        {
            ChartLabels = new List<string>();
            IncomeValues = new List<int>();
            ExpenseValues = new List<int>();
        }
    }

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] 
public class TrackerService : ITrackerService
    {
public GraphData Get()
        {
GraphData graphData = new GraphData();
SPList incomeTracker = SPContext.Current.Web.Lists["Income Tracker"];
if(incomeTracker != null)
            {
foreach (SPListItem item in incomeTracker.Items)
                {
                    graphData.ChartLabels.Add(item.Title);
                    graphData.IncomeValues.Add(Convert.ToInt32(item["Income"]));
                    graphData.ExpenseValues.Add(Convert.ToInt32(item["Expense"]));               
                }
            }
return graphData;
        }
    }

function RenderChart(graphData) {
var data = mixArrays(graphData.IncomeValues, graphData.ExpenseValues);
var bar = new RGraph.Bar('cvs', data);
    bar.Set('chart.labels', graphData.ChartLabels);
    bar.Set('chart.gutter.left', 65);
    bar.Set('colors', ['#058DC7', 'Gradient(#50B332:#B1E59F)', 'Gradient(#EC561B:#F59F7D)']);
    bar.Set('hmargin', 15);
    bar.Set('strokestyle', 'white');
    bar.Set('linewidth', 2);
    bar.Set('shadow', true);
    bar.Set('shadow.offsetx', 1);
    bar.Set('shadow.offsety', 0);
    bar.Set('shadow.blur', 1);
    ClearAndRedraw(bar);
}
function ClearAndRedraw(obj) {
    RGraph.ClearAnnotations(obj.canvas);
    RGraph.Clear(obj.canvas);
    obj.Draw();
}

Deploy the solution and add the VisualChart web part in site pages. The chart will be rendered like below.