ASP.NET Chart Controls in SharePoint 2010: Rendering a Sales Chart with Custom Data

Article
04/09/2011

SharePoint 2010 is great for BI; you have a ton more options. One of these options is the native Chart Web part, which allows you to create and map data from a number of different sources. For example, if you navigate to your SharePoint site, click Site Actions, Edit Page, Insert tab, Web Part, and then click Business Data you’ll see the native Chart Web Part for your use.

You can select, click Add and then walk through a series of steps to help configure the web part to render data from various sources. The figure below illustrates the steps you walk through and the data options for the web part. If this is the first time you’ve heard of the Chart Web Part, you can go here to get more information.

The Chart Web Part uses the System.Web.DataVisualization library, and this DLL is pretty comprehensive and provides a rich data binding and rendering experience. However, knowing this begs the question of how you can use the native ASP.NET Chart library to get some custom data (such as BDC models, WCF service endpoints, REST data, etc.) rendered in your chart web part. Thus, a more code-centric approach to leveraging the core library, but using a web part as a wrapper in the 2010 environment.

To get started, I drew some background information/sample code from the following posts, which were more centric to SharePoint 2007. These posts were a great start, but I needed something that leveraged the 2010 tooling and infrastructure and also used the ASP.NET Chart control.

So, I put together a simple Web part that extended on these posts to help get you started in SharePoint 2010.

The first hurdle you’ll need to get over is that while the Chart control library is native to .NET 4.0, SharePoint 2010 still uses .NET 3.5 SP1. So, you’ll need to make sure you have the 3.5 version of the Chart control. You can get it here. Once you have the library installed on your server, you next need to create a project and add it as a reference. The project you’ll create is a SharePoint Empty Project (open VS 2010 and click File, New, Project, Empty SharePoint Project, provide a name/location, and click OK).

You’ll then add a web part to the new project by right-clicking the project and selecting Add, New Item, SharePoint 2010, and Web Part. Provide a name for the new web part and click Add. See figure below.

So, you now have a web part project set up…what’s next? Right-click the project and add the System.Web.DataVisualization.dll to your project. Make sure it’s the 3.5 version because if it isn’t, your project will not build. Your project structure should now look something like the following figure. (You’ll note that I renamed the feature to ChartWebPart.)

Next, double-click the main web part class file (e.g. TheChart.cs), and then ensure you amend the code in your web part as per the bolded code below.

using System;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using System.Web.UI.DataVisualization.Charting;
using System.Drawing;

namespace MtSPWebPartChart.TheChart
{
[ToolboxItemAttribute(false)]
public class TheChart : WebPart
{
protected override void CreateChildControls()
{
Chart chrtSalesData = new Chart();
chrtSalesData.ImageStorageMode = ImageStorageMode.UseImageLocation;

chrtSalesData.Legends.Add("Legend");
chrtSalesData.Width = 500;
chrtSalesData.Height = 300;
chrtSalesData.RenderType = RenderType.ImageTag;
string imagePath = "~/_layouts/ChartImages/";
chrtSalesData.ImageLocation = imagePath + "ChartPic_#SEQ(200,30)";
chrtSalesData.Palette = ChartColorPalette.Berry;

Title chartTitle = new Title("Hockey Unit Inventory", Docking.Top, new Font("Calibri", 12, FontStyle.Bold), Color.FromArgb(26, 59, 105));
chrtSalesData.Titles.Add(chartTitle);
chrtSalesData.ChartAreas.Add("Inventory");

chrtSalesData.Series.Add("Skates");
chrtSalesData.Series.Add("Gloves");
chrtSalesData.Series.Add("Helmets");

chrtSalesData.Series["Skates"].Points.AddY(5);
chrtSalesData.Series["Skates"].Points.AddY(10);
chrtSalesData.Series["Skates"].Points.AddY(15);
chrtSalesData.Series["Skates"].Points.AddY(10);
chrtSalesData.Series["Skates"].Points.AddY(12);
chrtSalesData.Series["Skates"].Points.AddY(20);

chrtSalesData.Series["Gloves"].Points.AddY(2);
chrtSalesData.Series["Gloves"].Points.AddY(6);
chrtSalesData.Series["Gloves"].Points.AddY(10);
chrtSalesData.Series["Gloves"].Points.AddY(18);
chrtSalesData.Series["Gloves"].Points.AddY(20);
chrtSalesData.Series["Gloves"].Points.AddY(14);

chrtSalesData.Series["Helmets"].Points.AddY(20);
chrtSalesData.Series["Helmets"].Points.AddY(15);
chrtSalesData.Series["Helmets"].Points.AddY(12);
chrtSalesData.Series["Helmets"].Points.AddY(13);
chrtSalesData.Series["Helmets"].Points.AddY(25);
chrtSalesData.Series["Helmets"].Points.AddY(18);

chrtSalesData.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
chrtSalesData.BorderColor = Color.FromArgb(26, 59, 105);
chrtSalesData.BorderlineDashStyle = ChartDashStyle.Solid;
chrtSalesData.BorderWidth = 1;
this.Controls.Add(chrtSalesData);
}
}
}

You can now hit F6 to ensure the project builds, and if it builds successfully you can either hit F5 to debug or simply right-click the project and select Deploy to deploy the web part project into SharePoint.

Now before you jump to your SharePoint site, make sure you add one line (bolded below) to your SharePoint web.config.

…

…

At this point, you should be able to navigate to your SharePoint site, click Site Actions, Edit Page, navigate to your shiny, new web part and then add the aforementioned web part with chart included in it.

My next step with this is to implement data service calls (where the hard-coded data is now) and then data-bind to WCF endpoints in Windows Azure. While I work on this part, you can grab the code from here.

Hope this helps those of you who are trying to do the same thing. I noticed quite a few screams for help and not too many concerted blogs on how to do this.

Lastly, a shout-out to Marc Charmois for his earlier posts. They helped immensely, as did the numerous posts I needed to chase down on POST errors when leveraging the Chart control.

Happy coding!

Steve

---------------------------------------------------------------------------------------

Adding a note from the community on the web.config edits. Thanks to Kalyan Krishna for sending this along to me from his implementation of the above chart in SharePoint. His comments on his web.config edits were as follows:

1. The web.config entry for <httpHandlers> is:

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

validate="false" />

</httpHandlers>

1. The web.config entry for <handlers> is:

<add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD,POST"

path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

3. The web.config entry for <appSettings> is as follows (make sure that the folder mentioned is present and the web site's account can write to it):

Cheers,

Steve

Comments

Anonymous
January 28, 2012
Your post seems to be very successfull ! Thank you for having referenced my job. You are very fair. Cheers !!! Marc

Share via

ASP.NET Chart Controls in SharePoint 2010: Rendering a Sales Chart with Custom Data

Comments

Additional resources