Using ASP.NET Chart Control in SharePoint 2007

An essential part of any SharePoint portal is Reporting. The Administrators of the site would always love to see different kinds of reports….specially those which will give them a fair idea of how their site is being used, how many users are using their site or for that matter…. what kind of content is present in their site. And what better way than giving them graphs of such statistics.


Many of such requirements are being fulfilled using SQL Server Reporting Services, or Out-Of-the-Box Site Usage summary.

What I would like to showcase in this blog is another way to implement Graphs … this one a very simpler and quicker way to create such graphs… and certainly a one which developers will love to exploit.


To begin with… install the following on your machine if you not have them already.

.NET 3.5 SP1:  http://www.microsoft.com/downloads/details.aspx?FamilyID=ab99342f-5d1a-413d-8319-81da479ab0d7&displaylang=en

Microsoft Chart Controls Framework:  http://www.microsoft.com/downloads/details.aspx?FamilyID=130f7986-bf49-4fe5-9ca8-910ae6ea442c&displaylang=en

Install the Visual Studio Add-in for MS Chart control.

http://www.microsoft.com/downloads/details.aspx?familyid=1D69CE13-E1E5-4315-825C-F14D33A303E9&displaylang=en


1. We can add the chart control in an application page created for SharePoint. However, before starting the implementation add the following tags inside the web.config file of your application.

a. Look for tags and place the following line inside it.

<add key="ChartImageHandler" value="storage=file;timeout=20;Url=~/chartTmpImages/;" />

b. Look for tags and place the following line inside it.

<add path="ChartImg.axd" verb="GET,HEAD" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false" />

2. Consider a SharePoint List ‘Knowledge Links’ as shown in the snap below.

A sample SharePoint list

 
Note that it has a column ‘Category’ that indicates which technology the record is related to.


Let’s say we need a chart that will display the count of records present for each category.

Here’s how we can achieve it.

Create a chart object as follows

System.Web.UI.DataVisualization.Charting.Chart Chart1 = new System.Web.UI.DataVisualization.Charting.Chart();

Set its Width ,Height, Palette properties.

Chart1.Width = 412;
Chart1.Height = 296;
Chart1.Palette = ChartColorPalette.BrightPastel;

Set its Render Type property

Chart1.RenderType = RenderType.ImageTag;

This will ensure that the chart is displayed as an image tag in the browser.

Set a temporary location on the server where the chart generated will be stored as an image.

Chart1.ImageLocation = "..\\..\\TempImages\\ChartPic_#SEQ(200,30)";

Add a title, chart area and a series to this chart.

Title t = new Title("List Data", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));


Chart1.Titles.Add(t);
Chart1.ChartAreas.Add("Example Chart");
Chart1.Series.Add("Sample Series");

A Series is basically a collection of points which in our case will be the count of records belonging to each category.

Now it’s time to plot data values onto this chart.

We require the count of records in the list we created grouped by category.

There is no easy way to get this. I thought of getting this count with the help of some CAML query, but eventually ended up getting it through a simple DataTable object. 

Here’s how you can do it.

Get the list data in a DataTable first.

DataTable dtItems = SPContext.Current.Web.Lists["Knowledge Links"].Items.GetDataTable();

Now with the help of ToTable() function provided by the DataView object, we can split the records by grouping them by a particular column (in our case ‘Category’) and then have a separate column ‘Count’ store the number of records belonging to a particular Category. Just what we needed … isn’t it? :)

DataView dtView = new DataView(dtItems);
DataTable dtGroup = dtView.ToTable(true, new string[] { "Category" });
dtGroup.Columns.Add("Count");


foreach (DataRow drow in dtGroup.Rows)
{
drow["Count"] = dtItems.Compute("Count([Title])", "[Category] = '" + drow["Category"].ToString() + "'");
}

The Compute function is the one which does this trick for us.

Now that we already have all the values to be plotted, we can simply add them to the ‘Sample Series’ we created before.

foreach (DataRow dtRow in dtGroup.Rows)
{
DataPoint dPoint = new DataPoint();
dPoint.AxisLabel = dtRow["Category"].ToString();
dPoint.SetValueY(dtRow["Count"]);
Chart1.Series["Sample Series"].Points.Add(dPoint);
}

You can also play around with other properties of a Chart object such as its Border and legends.

Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
Chart1.BorderColor = System.Drawing.Color.FromArgb(26, 59, 105);
Chart1.BorderlineDashStyle = ChartDashStyle.Solid;
Chart1.BorderWidth = 2;

Chart1.Legends.Add("Sample Legend");
Chart1.Legends["Sample Legend"].Enabled = true;

Also don’t forget to set the page property of this Chart. It contains the refernce of the page in which this control is to be placed.

Chart1.Page = this;

And finally add this chart to some control such as an ASP Panel

pnlChartContainer.Controls.Add(Chart1);

What you see on the page then is a sleek graph plotting the count of list items belonging to each Category.

Bar graph displaying count of records belonging to each Category

 
By simply changing ChartType property of the Series object which is used, we can draw various types of graphs such as Pie, Bubble, Pyramid, Bubble, etc.


Add the following to convert your chart into a Pie Chart.

Chart2.Series["Sample Series"].ChartType = SeriesChartType.Pie;

Chart2.Series["Sample Series"]["PointWidth"] = "0.5";

Pie chart displaying count of records belonging to each Category

There is just so much you can do with this control. Things like having multiple Y-axis values on the same series, different types of charts, their color combinations are few things I suggest you try.