Silverlight Graph using SharePoint List 2010

Assuming SharePoint Site(http://sp2010:22913/sites/sc2/) has following List called  "Programming-Languages"(as shown below)

Step1) Create Silverlight project using .Net 3.5 (GRAPHDEMO)

Step 2)  Add Sharepoint Silverlight dll reference
             Located in 
             %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS\ClientBin 

            1)Microsoft.SharePoint.Client.Silverlight.dll 
            2) Microsoft.SharePoint.Client.Silverlight.Runtime.dll 


Step 3)  Add reference System.Windows.Controls.DataVisualization.Toolkit.


Step 4)  Add another namespace in MainPage.xaml for charting
           xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"


Step 5) Drap & drop  Chart Control into MainPage.xaml



        <chartingToolkit:Chart  x:Name="Chart1" HorizontalAlignment="Left" Margin="10,10,0,0"  Title="Programming Language Usage" VerticalAlignment="Top" Height="225" Width="390">
            <chartingToolkit:ColumnSeries DependentValuePath="Usage"  ItemsSource="{Binding}"
                                          IndependentValuePath="Name" 
                                           AnimationSequence="FirstToLast"
                                            IsSelectionEnabled="True"
                                          >
            </chartingToolkit:ColumnSeries>
        </chartingToolkit:Chart>

Step 6) Add new class ProgramUsage.cs

  it has 2 properties , 1 for Programming Language 2 for Usage

public class ProgramUsage

    {

        public string Name { get; set; }

        public int Usage { get; set; } 

    }

Step 7)    Add following varibles to  MainPage.xaml.cs

        ClientContext ctx = null; //sharepoint client context

        Web web = null;  //web

        List list = null;  //list refernce

        ListItemCollection allItems = null; //lits item collection

        List<ProgramUsage> pUsage= new List<ProgramUsage>(); //list of items parsed added to List of ProgramUsage 

in the constrcutor  ad\fter InitializeComponent() add this

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

Add MainPage_Loaded method and try to get   list asynchronously

        void MainPage_Loaded(object sender, RoutedEventArgs e)

        {

            try

            {

                ctx = new ClientContext("http://sp2010:22913/sites/sc2/");//ApplicationContext.Current.Url);

               // ClientContext.Current;

                

                web = ctx.Web;

                

                ctx.Load(web);

               // ctx.ExecuteQuery();

                list = web.Lists.GetByTitle("Programming-Languages");

                CamlQuery query = CamlQuery.CreateAllItemsQuery();

                allItems

                  = list.GetItems(query);

                ctx.Load(allItems);

                ctx.ExecuteQueryAsync(successEventHandler, FailedEventHandler);

            }

            catch (Exception ex)

            {

                label1.Content = ex.Message;

            }

        }

//Add success,failed delagates methods

        void successEventHandler(object sender, ClientRequestSucceededEventArgs args)

        {

            //Bind datagrid asynchronously with delegate

            Action a = new Action(UpdateGrid);

            this.Dispatcher.BeginInvoke(a);

        }

     //Update chart with delegate/ashynchronously

        void UpdateGrid()

        {

            try

            {

                foreach (ListItem item in allItems)

                {

                    ProgramUsage ProgramL =

                        new ProgramUsage

                        {

                            Name = item["Title"].ToString(),

                            Usage = (item["Usage"] != null) ? System.Convert.ToInt16(item["Usage"]) : 0

                        };

                    

                    pUsage.Add(ProgramL);

                }

                Chart1.DataContext = pUsage;

            }

            catch (Exception ex)

            {

                label1.Content = ex.Message;

                

            }

        }

        void FailedEventHandler(object sender, ClientRequestFailedEventArgs args)

        {

            label1.Content = args.Message;

        }

Step 8)  BUILD THE PROJECT  GRAPHDEMO.XAP FILE WILL BE GENERATED.

STEP 9)  DEPLOY SILVERLIGHT .XAP FILE IN SHAREPOINT

               Upload generated .xap file into document library .

 in this example: http://sp2010:22913/sites/sc2/doclib/GRAPHDEMO.XAP

            GRAPHDEMO.XAP  uploaded to doclib --> document library.

STEP 10)  Create a Web page IN SHAREPOINT SITE,   insert Silverlight Web part

              note: Silverlight Web part located in   "Media & Content"-->Silverlight Web part.

STEP 11)   In Silverlight webpart, it asks for .xap file path
                  give same path  in Step 9)

Step 12)  OUTPUT