SharePoint Dragons

In this blog post we’re discussing how to create a chart using Silverlight in SharePoint 2010. First of all, read https://sharepointdragons.com/2011/12/06/creating-a-silverlight-web-part-in-sharepoint-2010/ and download the Silverlight SharePoint web parts.

Now, you’re ready to do the following:

1. Create an “Empty SharePoint Project” and deploy it as a sandboxed solution.

   Please note that this is an excellent opportunity to point out that you should always deploy as a sandboxed solution, unless necessary. This is a best practice. The main reason we consider it to be an excellent opportunity to drive home this point is that we’ve noticed that this advice is ranking high in the charts of cliché SharePoint development tips, the first one of course being: don’t touch the content database. Let’s see if this tip can climb the charts even higher. Btw, don’t hesitate to send us other suggestions for the top 10 SharePoint dev cliché list.

2. Add another project, this time of type “Silverlight application”.
3. Choose to host the Silverlight application is a new Web site. We’ve actually found that this makes development and debugging a little bit easier and speedier.
4. In Visual Studio, add a new tab in the toolbox and call it Silverlight Toolbox 4 or something.
5. Right-click it and select Choose Items. The Choose Toolbox Items dialog window appears.
6. Select the Silverlight Components tab.
7. Click the Browse button.
8. Navigate to the .dll containing all chart controls: System.Windows.Controls.DataVisualization.Toolkit.dll.  By default, it’s located in C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Bin.
9. Click OK.
10. Drag the Chart control to the design surface of MainPage.xaml.
11. Press F7 and modify it’s contents so that it looks something like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;

namespace Radar.Charts
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();

List<DayDto> days = new List<DayDto>()
{
new DayDto() { Day = “Mon”, NumberOfVisitors = 10 },
new DayDto() { Day = “Tue”, NumberOfVisitors = 8 },
new DayDto() { Day = “Wed”, NumberOfVisitors = 3 },
new DayDto() { Day = “Thu”, NumberOfVisitors = 7 },
new DayDto() { Day = “Fri”, NumberOfVisitors = 4 },
new DayDto() { Day = “Sat”, NumberOfVisitors = 3 },
new DayDto() { Day = “Sun”, NumberOfVisitors = 1 },
};

chart1.Title = “My web stats chart”;
chart1.LegendTitle = “Visitors”;

chart1.Series.Clear();
var c1 = new ColumnSeries();
c1.Name = “days”;
c1.Title = “Visitors/Days of the Week”;
c1.IsSelectionEnabled = true;
c1.ItemsSource = days;
c1.IndependentValueBinding = new Binding(“Day”);
c1.DependentValueBinding = new Binding(“NumberOfVisitors”);

chart1.Series.Add(c1);

}
}

public class DayDto
{
public string Day { get; set; }
public int NumberOfVisitors { get; set; }
}
}

12. Press F5 and see if the Silverlight application test page looks ok.
13. Locate your .xap file (i.e. SilverlightApplication1) in the debug folder of your Silverlight application.
14. Upload the .xap file to a SharePoint document library (we’ve called ours “Silver”, catchy isn’t it?).
15. Add the Silverlight Web Part (under the Media and Content category) and point it to the uploaded .xap file.
16. Admire the results: