Sivarajan's Blog

SharePoint | Office 365 | Azure | JavaScript

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”

2013-05-12_1

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,

2013-05-12_2

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.

2013-05-12_3

Summary

Currently I am doing lot of fun with RGraph and surely I will write some more posts regarding RGraph integrations related challenges with SharePoint.

Download Source Code

Comments (2) -

  • Nagesh

    7/17/2013 8:52:21 PM | Reply

    Hello,

    Do you know how to send data dynamically from list to excel sheet for reporting? I am working on a solution where user enter data from InfoPath form, published to SharePoint list and trying to report on top of it, but it doesn't support graphs or bars. I need data in excel sheet automatically, so that I can build reports. Any help on this is highly appreciate.d

  • Salah Eddine

    7/22/2013 4:35:15 PM | Reply

    Hy Sir,
    very interesting article, but the code is not working, i've an error at
    var data = mixArrays(graphData.IncomeValues, graphData.ExpenseValues);

    IncomeValues cannot get values.

    Your VS project cannot be openned with my VS 2012 Professional and Ultimate

    Thank you

Add comment

Loading