Charting Your TFS Project Progress in SharePoint Using Infragistics Chart Web Part

You’ve managed to impress your manager, showing the current progress of your Team Foundation Services project inside your corporate SharePoint but now he (or probably she) is demanding to chart the progress with some colorful charting experience. Fear not – the Chart web part has just what you need in a few clicks away!

The Solution

If you did not have the chance to read the Managing Your TFS Preview Tasks Inside SharePoint With Infragistics Grid Web Part you should probably do it now.

Once you understand what we are doing with the business connectivity model, we can now step forward and configure the Chart web part.

In addition to our already existing External List in the SharePoint application, we create two more views – one for filtering just the items of type Task and another one for filtering just the Product Backlog Item types.

image

The Chart Web Part

Just add the Chart web part to your page – for example, the page where your manager wants the charting experience.

Add Column series and configure it in the following manner:

image

What does this configuration do?

  • We want to retrieve the list items using the Tasks view (a drop-down list found in the upper right corner).
  • We want to plot series against the State of the tasks.
  • We get the number of tasks, using the Count aggregation function. This is required since Count returns a number, while the value of the column is of type string. Also, that way we shall retrieve the actual number of the tasks.

We shall add another column series for the Backlog Items with the following configuration:

image

The only difference here is the view that is used for retrieving the data from the External List.

Finally, we make some fine touches to make the Chart look more beautiful.

Oh, do not forget that you can setup an auto-refresh interval for the Chart – that way you can make sure your team lead or manager is viewing the latest progress on the project without even refreshing the whole page.

image

So, here is the final result:

image

Why don’t combine the page with the jQuery / HTML 5 based Grid web part?

Summary

We have re-used a business connectivity model from a previous post to retrieve data from TFS Preview – a Microsoft cloud-based Team Foundation service. With the already retrieved data, we have charted the progress and status of our project with the Chart web part. We also provided our team leader with the possibility to sort, filter or group our tasks, using the jQuery / HTML 5 based Grid web part.

Web Parts Used:

Official documentation: http://help.infragistics.com/NetAdvantage/SharePoint/2012.1/CLR4.0

Official NetAdvantage for SharePoint page: http://www.infragistics.com/dotnet/netadvantage/sharepoint.aspx#Overview

Online samples: http://sharepoint.infragistics.com/


Comments  (1 )

Read This method
on Thu, Oct 23 2014 4:26 PM

Charting Your TFS Project Progress in SharePoint Using Infragistics Chart Web Part - Docs - Infragistics.com Blog