{"id":123,"date":"2012-12-13T15:52:56","date_gmt":"2012-12-13T21:52:56","guid":{"rendered":"http:\/\/www.johndhutton.com\/?p=123"},"modified":"2015-07-06T12:23:04","modified_gmt":"2015-07-06T17:23:04","slug":"create-silverlight-graphs-to-use-sharepoint-2010-data","status":"publish","type":"post","link":"https:\/\/www.johndhutton.com\/?p=123","title":{"rendered":"Create Silverlight Graphs to use SharePoint 2010 Data"},"content":{"rendered":"<style type=\"text\/css\">\nol li ol, ol ol { \n\tmargin-left: 25px;\n\tlist-style-type: square;\n}\n<\/style>\n<p><string>When finished, you will have a Silverlight Pie chat that will be using a SharePoint Tasks list and group by Status like this: <\/strong><br \/>\n<center><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.johndhutton.com\/wp-content\/uploads\/2012\/12\/PieChart-300x204.png\" alt=\"PieChart\" width=\"300\" height=\"204\" class=\"alignnone size-medium wp-image-193\" srcset=\"https:\/\/www.johndhutton.com\/wp-content\/uploads\/2012\/12\/PieChart-300x204.png 300w, https:\/\/www.johndhutton.com\/wp-content\/uploads\/2012\/12\/PieChart.png 325w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/center><\/p>\n<p><strong>Prepare SharePoint to use Silverlight<\/strong>:<br \/>\nNeed to put the following two files in the root of your SharePoint Web Application:<\/p>\n<p>ClientAccessPolicy.xml<\/p>\n<pre class=\"prettyprint lang-xml\">\r\n&lt;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?&gt;\r\n&lt;access-policy&gt;\r\n\t&lt;cross-domain-access&gt;\r\n\t\t&lt;policy&gt;\r\n\t\t\t&lt;allow-from http-request-headers=&#34;*&#34;&gt;\r\n\t\t\t\t&lt;domain uri=&#34;*&#34;&#47;&gt;\r\n\t\t\t&lt;&#47;allow-from&gt;\r\n\t\t\t&lt;grant-to&gt;\r\n\t\t\t\t&lt;resource path=&#34;&#47;&#34; include-subpaths=&#34;true&#34;&#47;&gt;\r\n\t\t\t&lt;&#47;grant-to&gt;\r\n\t\t&lt;&#47;policy&gt;\r\n\t&lt;&#47;cross-domain-access&gt;\r\n&lt;&#47;access-policy&gt;\r\n<\/pre>\n<\/p>\n<p>CrossDomain.xml<\/p>\n<pre class=\"prettyprint lang-xml\">\r\n&lt;?xml version=&#34;1.0&#34;?&gt;\r\n&lt;cross-domain-policy&gt;\r\n\t&lt;allow-http-request-headers-from domain=&#34;*&#34; headers=&#34;*&#34;&#47;&gt;\r\n&lt;&#47;cross-domain-policy&gt;\r\n<\/pre>\n<\/p>\n<p><strong>Create Silverlight in Visual Studio 2010:<\/strong><\/p>\n<ol>\n<li>Open  Visual Studio 2010 Select <strong>New <\/strong><strong>Project&#8230; <\/strong><\/li>\n<li>At top select <strong>.NET Framework 3.5<\/strong> and <strong>Silverlight<\/strong><\/li>\n<li>In <em>Visual C#<\/em> section Select <strong>Silverlight<\/strong>-&gt; <strong>Silverlight Application<\/strong><\/li>\n<li>Type in name of project. We will create a Pie chart first, so we will use <em>Silverlight.PieCharts <\/em>and press<\/li>\n<li>In <em>New Silverlight Application<\/em> Window, make sure <em>Host the Silverlight application <\/em>in new Web site is <strong>checked<\/strong>.<\/li>\n<li>Add SharePoint Silverlight client object model references<\/li>\n<ol>\n<li>In Solution Explorer, right-click the Silverlight.PieCharts node, and then click Add References.<\/li>\n<li>Click <em>Browse<\/em> tab.<\/li>\n<li>Navigate to the following folder: <em>C:\\Program Files\\Common Files\\Microsoft Shared\\Web Server Extensions\\14\\TEMPLATE\\LAYOUTS\\ClientBin<\/em>.<\/li>\n<li>Select <strong>Microsoft.SharePoint.ClientSilverlight.dll<\/strong> and <strong>Microsoft.SharePoint.Client.Silverlight.Runtime.dll<\/strong><\/li>\n<li>Click OK<\/li>\n<\/ol>\n<li>Add Silverlight Charting object model references<\/li>\n<ol>\n<li>In Solution Explorer, right-click the Silverlight.PieCharts node, and then click Add References.<\/li>\n<li>Click <em>.NET<\/em> tab.<\/li>\n<li>Select <strong>System.Windows.Controls.DataVisualization.Toolkit<\/strong><\/li>\n<li>Click OK<\/li>\n<\/ol>\n<li>Add References &#038; Parameters passing to Silverlight\n<ol>\n<li><em>Right-Click<\/em> on App.xml<\/li>\n<li>Select <strong>View Code<\/strong><\/li>\n<li>Add following using statements to top of page\n<pre class=\"prettyprint lang-cpp\">\r\nusing Microsoft.SharePoint.Client;\r\nusing System.Threading;\r\n<\/pre>\n<\/li>\n<li>Find  Application_Startup<\/li>\n<li>Change from:\n<pre class=\"prettyprint lang-cpp\">\r\nprivate void Application_Startup(object sender, StartupEventArgs e)\r\n{\r\n   this.RootVisual = new MainPage();\r\n}\r\n<\/pre>\n<p>to:<\/p>\n<pre class=\"prettyprint lang-cpp\">\r\nprivate void Application_Startup(object sender, StartupEventArgs e)\r\n{\r\n    ApplicationContext.Init(e.InitParams, SynchronizationContext.Current);\r\n    this.RootVisual = new MainPage(e.InitParams);\r\n}\r\n<\/pre>\n<p>\n        <\/li>\n<li><em>Right-Click<\/em> on MainPage.xml<\/li>\n<li>Select <strong>View Code<\/strong><\/li>\n<li>Add following using statements to top of page\n<pre class=\"prettyprint lang-cpp\">\r\nusing Microsoft.SharePoint.Client;\r\n<\/pre>\n<\/li>\n<li>Find  MainPage<\/li>\n<li>Change from:\n<pre class=\"prettyprint lang-cpp\">\r\npublic MainPage()\r\n{\r\n    InitializeComponent();\r\n}\r\n<\/pre>\n<p>to: <\/p>\n<pre class=\"prettyprint lang-cpp\">\r\n&#47;&#47;Parameters\r\nprivate string _webFullURL = @&#34;http:&#47;&#47;s22102:83&#47;&#47;&#34;; &#47;&#47;url to your sharepoint site\r\nprivate string _Title = &#34;Pie Chart&#34;;\r\nprivate string _ListName = &#34;Tasks&#34;; &#47;&#47;name of list on SharePoint Site\r\n&#47;&#47;internal\r\nprivate ListItemCollection _listTasks;\r\n\r\npublic MainPage(IDictionary&lt;string, string&gt; Parameters)\r\n{\r\n\tInitializeComponent();\r\n\r\n\t#region Parameters\r\n\tif (Parameters.ContainsKey(&#34;WebURL&#34;))\r\n\t{\r\n\t\t_webFullURL = Parameters&#91;&#34;WebURL&#34;&#93;.Replace(&#34;%20&#34;, &#34; &#34;).Replace(&#34;%28&#34;, &#34;(&#34;).Replace(&#34;%29&#34;, &#34;)&#34;);\r\n\t}\r\n\r\n\tif (Parameters.ContainsKey(&#34;Title&#34;))\r\n\t{\r\n\t\t_Title = Parameters&#91;&#34;Title&#34;&#93;.Replace(&#34;%20&#34;, &#34; &#34;).Replace(&#34;%28&#34;, &#34;(&#34;).Replace(&#34;%29&#34;, &#34;)&#34;);\r\n\t}\r\n\tpieChart.Title = _Title;\r\n\r\n\tif (Parameters.ContainsKey(&#34;ListName&#34;))\r\n\t{\r\n\t\t_ListName = Parameters&#91;&#34;ListName&#34;&#93;.Replace(&#34;%20&#34;, &#34; &#34;).Replace(&#34;%28&#34;, &#34;(&#34;).Replace(&#34;%29&#34;, &#34;)&#34;);\r\n\t}\r\n\t#endregion\r\n\t\r\n\t GetData();\r\n}\r\n<\/pre>\n<\/li>\n<\/ol>\n<li>Add Pie Chart container<\/li>\n<ol>\n<li>Open MainPage.asml <\/li>\n<li>Add reference to chart control <\/li>\n<ol>\n<li>in UserControl above  d:DesignHeight= add following:\n<pre class=\"prettyprint lang-cpp\">\r\nxmlns:chartingToolkit=&#34;clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit&#34;\r\n<\/pre>\n<\/li>\n<li>Add following inside grid section\n<pre class=\"prettyprint lang-xml\">\r\n&lt;chartingToolkit:Chart x:Name=&#34;pieChart&#34; Width=&#34;350&#34; Height=&#34;250&#34; Title=&#34;PieChart&#34; BorderThickness=&#34;0&#34; Background=&#34;White&#34; VerticalAlignment=&#34;Top&#34; HorizontalAlignment=&#34;Center&#34;&gt;\r\n\t&lt;chartingToolkit:Chart.Series&gt;\r\n\t\t&lt;chartingToolkit:PieSeries ItemsSource=&#34;{Binding}&#34; \r\n\t\tDependentValuePath=&#34;Value&#34;  \r\n\t\tIndependentValuePath=&#34;Key&#34;\r\n\t\tAnimationSequence=&#34;FirstToLast&#34;   \r\n\t\tTitle=&#34;Status&#34; \r\n\t\tIsSelectionEnabled=&#34;True&#34;\r\n\t&#47;&gt;\r\n\t&lt;&#47;chartingToolkit:Chart.Series&gt;\r\n&lt;&#47;chartingToolkit:Chart&gt;\r\n<\/pre>\n<\/li>\n<\/ol>\n<\/ol>\n<li>Add data to chart<\/li>\n<ol>\n<li>Add following two classes above MainPage class in MainPage.asml.cs:\n<pre class=\"prettyprint lang-cpp\">\r\npublic class SLGridData\r\n{\r\n\tpublic string Key { get; set; }\r\n\tpublic int Value { get; set; }\r\n}\r\n\r\npublic class SPTasks\r\n{\r\n\tpublic string Title { get; set; }\r\n\tpublic DateTime StartDate { get; set; }\r\n\tpublic DateTime DueDate { get; set; }\r\n\tpublic string AssignedTo { get; set; }\r\n\tpublic string Status { get; set; }\r\n\tpublic double PercentComplete { get; set; }\r\n\tpublic string Priority { get; set; }\r\n}\r\n<\/pre>\n<\/li>\n<li>Now add folowing data functions after public MainPage(<font color=\"green\">IDictionary<\/font><<font color=\"blue\">string<\/font>, <font color=\"blue\">string<\/font>> Parameters):<br \/><em>GetData()<\/em>:\n<pre class=\"prettyprint lang-cpp\">\r\nprivate void GetData()\r\n{\r\n\tClientContext spContext = null;\r\n\tif (ApplicationContext.Current.Url != null)\r\n\t{\r\n\t\tspContext = new ClientContext(ApplicationContext.Current.Url);\r\n\t}\r\n\tif (spContext == null)\r\n\t{\r\n\t\tspContext = new ClientContext(_webFullURL);\r\n\t\tspContext.Load(spContext.Web);\r\n\t}\r\n\tList ProjectBooks = spContext.Web.Lists.GetByTitle(_ListName);\r\n\tspContext.Load(ProjectBooks);\r\n\r\n\tCamlQuery query = new Microsoft.SharePoint.Client.CamlQuery();\r\n\tstring camlQueryXml =\r\n\t\t&#34;&lt;View&gt;&#34; +\r\n\t\t\t&#34;&lt;Query&gt;&#34; +\r\n\t\t\t&#34;&lt;&#47;Query&gt;&#34; +\r\n\t\t\t\t\t&#34;&lt;Where&gt;&#34; +\r\n\t\t\t\t\t&#34;&lt;&#47;Where&gt;&#34; +\r\n\t\t\t&#34;&lt;ViewFields&gt;&#34; +\r\n\t\t\t\t&#34;&lt;FieldRef Name=&#39;Title&#39; &#47;&gt;&#34; +\r\n\t\t\t\t&#34;&lt;FieldRef Name=&#39;StartDate&#39; &#47;&gt;&#34; +\r\n\t\t\t\t&#34;&lt;FieldRef Name=&#39;DueDate&#39; &#47;&gt;&#34; +\r\n\t\t\t\t&#34;&lt;FieldRef Name=&#39;AssignedTo&#39; &#47;&gt;&#34; +\r\n\t\t\t\t&#34;&lt;FieldRef Name=&#39;Status&#39; &#47;&gt;&#34; +\r\n\t\t\t\t&#34;&lt;FieldRef Name=&#39;PercentComplete&#39; &#47;&gt;&#34; +\r\n\t\t\t\t&#34;&lt;FieldRef Name=&#39;Priority&#39; &#47;&gt;&#34; +\r\n\t\t\t&#34;&lt;&#47;ViewFields&gt;&#34; +\r\n\t\t&#34;&lt;&#47;View&gt;&#34;;\r\n\r\n\tquery.ViewXml = camlQueryXml;\r\n\t_listTasks = ProjectBooks.GetItems(query);\r\n\tspContext.Load(_listTasks);\r\n\tspContext.ExecuteQueryAsync(new ClientRequestSucceededEventHandler(OnRequestSucceeded), new ClientRequestFailedEventHandler(OnSiteLoadFailure));\r\n}\r\n<\/pre>\n<p><em>OnRequestSucceeded()<\/em>:<\/p>\n<pre class=\"prettyprint lang-cpp\">\r\nprivate void OnRequestSucceeded(Object sender, ClientRequestSucceededEventArgs args)\r\n{\r\n\tDispatcher.BeginInvoke(BindData);\r\n}\r\n<\/pre>\n<p>OnSiteLoadFailure() <\/p>\n<pre class=\"prettyprint lang-cpp\">\r\nprivate void OnSiteLoadFailure(Object sender, ClientRequestFailedEventArgs args)\r\n{\r\n\tstring msg = args.Exception.ToString();\r\n}\r\n<\/pre>\n<p><em>BindData()<\/em>:<\/p>\n<pre class=\"prettyprint lang-cpp\">\r\nprivate void BindData()\r\n{\r\n\tList&lt;SPTasks&gt; tasks = new List&lt;SPTasks&gt;();\r\n\r\n\tforeach (ListItem li in _listTasks)\r\n\t{\r\n\t\ttasks.Add(new SPTasks()\r\n\t\t{\r\n\t\t\tTitle = Convert.ToString(li&#91;&#34;Title&#34;&#93;),\r\n\t\t\tStartDate = li&#91;&#34;StartDate&#34;&#93; != null ? Convert.ToDateTime(li&#91;&#34;StartDate&#34;&#93;) : DateTime.MinValue,\r\n\t\t\tDueDate = li&#91;&#34;DueDate&#34;&#93; != null ? Convert.ToDateTime(li&#91;&#34;DueDate&#34;&#93;) : DateTime.MinValue,\r\n\t\t\tAssignedTo = li&#91;&#34;AssignedTo&#34;&#93; != null ? Convert.ToString(li&#91;&#34;AssignedTo&#34;&#93;) : string.Empty,\r\n\t\t\tStatus = li&#91;&#34;Status&#34;&#93; != null ? Convert.ToString(li&#91;&#34;Status&#34;&#93;) : string.Empty,\r\n\t\t\tPercentComplete = li&#91;&#34;PercentComplete&#34;&#93; != null ? Convert.ToDouble(li&#91;&#34;PercentComplete&#34;&#93;) : 0.0,\r\n\t\t\tPriority = li&#91;&#34;Priority&#34;&#93; != null ? Convert.ToString(li&#91;&#34;Priority&#34;&#93;) : string.Empty\r\n\t\t});\r\n\t}\r\n\r\n\r\n\t&#47;&#47;Total by Status\r\n\tvar grouped = tasks.GroupBy(p =&gt; new { p.Status })\r\n\t\t\t\t  .Select(p =&gt; new SLGridData()\r\n\t\t\t\t  {\r\n\t\t\t\t\t  Key = p.First().Status + &#34; (&#34; + p.Count() + &#34;)&#34;,\r\n\t\t\t\t\t  Value = p.Count(),\r\n\t\t\t\t  });\r\n\tList&lt;SLGridData&gt; listData = grouped.ToList();\r\n\t&#47;&#47;Bind to chart\r\n\tBindChart(listData);\r\n\t&#47;&#47;Set Title\r\n\tpieChart.LegendTitle = _Title;\r\n}\r\n<\/pre>\n<p><em>BindChart()<\/em><\/p>\n<pre class=\"prettyprint lang-cpp\">\r\nprivate void BindChart(List&lt;SLGridData&gt; gridData)\r\n{\r\n\tList&lt;KeyValuePair&lt;string, int&gt;&gt; valueList = new List&lt;KeyValuePair&lt;string, int&gt;&gt;();\r\n\r\n\tforeach (SLGridData pb in gridData)\r\n\t{\r\n\t\tvalueList.Add(new KeyValuePair&lt;string, int&gt;(pb.Key, pb.Value));\r\n\t}\r\n\r\n\t&#47;&#47; Setting data for pie chart\r\n\tpieChart.DataContext = valueList;\r\n\r\n\t&#47;&#47;Get Series\r\n}\r\n<\/pre>\n<\/li>\n<li>Press F5 to run<\/li>\n<\/ol>\n<li>Adding to SharePoint via Webpart<\/li>\n<ol>\n<li>Copy Silverlight.PieCharts\\Silverlight.PieCharts\\Bin\\Debug\\Silverlight.PieCharts.xap to <em>C:\\Program Files\\Common Files\\Microsoft Shared\\Web Server Extensions\\14\\TEMPLATE\\LAYOUTS\\ClientBin<\/em><\/li>\n<li>Create a Visual WebPart project in the same solution called Silverlight.WebPart<\/li>\n<li>Copy contents (items between <html><\/html> tags) of Silverlight.PieCharts.Web -> Silverlight.PieChartsTestPage.aspx into VisualWebPart1UserControl.ascx desinger page<\/li>\n<li>Change object section to this\n<pre class=\"prettyprint lang-cpp\">\r\n&lt;object data=&#34;data:application&#47;x-silverlight-2,&#34; type=&#34;application&#47;x-silverlight-2&#34; width=&#34;100%&#34; height=&#34;100%&#34;&gt;\r\n\t&lt;param name=&#34;source&#34; value=&#34;_layouts&#47;ClientBin&#47;Silverlight.PieCharts.xap&#34;&#47;&gt;\r\n\t&lt;param name=&#34;onError&#34; value=&#34;onSilverlightError&#34; &#47;&gt;\r\n\t&lt;param name=&#34;background&#34; value=&#34;white&#34; &#47;&gt;\r\n\t&lt;param name=&#34;minRuntimeVersion&#34; value=&#34;5.0.61118.0&#34; &#47;&gt;\r\n\t&lt;param name=&#34;autoUpgrade&#34; value=&#34;true&#34; &#47;&gt;\r\n\t&lt;param name=&#34;initParams&#34; value=&#34;WebURL=&lt;%=WebUrl %&gt;,ListName=&lt;%=ListName %&gt;,Title=Total Projects By Status&#34;&#47;&gt;\r\n\t&lt;a href=&#34;http:&#47;&#47;go.microsoft.com&#47;fwlink&#47;?LinkID=149156&#038;v=5.0.61118.0&#34; style=&#34;text-decoration:none&#34;&gt;\r\n\t  &lt;img src=&#34;http:&#47;&#47;go.microsoft.com&#47;fwlink&#47;?LinkId=161376&#34; alt=&#34;Get Microsoft Silverlight&#34; style=&#34;border-style:none&#34;&#47;&gt;\r\n\t&lt;&#47;a&gt;\r\n&lt;&#47;object&gt;\r\n<\/pre>\n<\/li>\n<li>Edit VisualWebPart1UserControl.ascx page<\/li>\n<li>Add following public objects before Page_Load \n<pre class=\"prettyprint lang-cpp\">\r\npublic string ListName = &#34;Tasks&#34;;\r\npublic string WebUrl = &#34;http:&#47;&#47;s22102:83&#47;&#34;;\r\n<\/pre>\n<p>NOTE: You can create webpart parameters to this webpart and allow users to change the <em>WebUrl<\/em> and <em>ListName<\/em>\n\t\t<\/li>\n<li>Build and deploy to SharePoint<\/li>\n<li>Add your webpart to a page and see your chart!!<\/li>\n<\/ol>\n<p>\t<br \/>\n<em>References<\/em>:<\/p>\n<ul>\n<li><a title=\"MSDN\" href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/ff938870.aspx\">MSDN &#8211; Create Silverlight Graphs with SharePoint 2010 Data by Using LINQ <\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>When finished, you will have a Silverlight Pie chat that will be using a SharePoint Tasks list and group by Status like this: Prepare SharePoint to use Silverlight: Need to put the following two files in the root of your SharePoint Web Application: ClientAccessPolicy.xml &lt;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?&gt; &lt;access-policy&gt; &lt;cross-domain-access&gt; &lt;policy&gt; &hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,4],"tags":[],"class_list":["post-123","post","type-post","status-publish","format-standard","hentry","category-sharepoint","category-sharepoint-2010"],"_links":{"self":[{"href":"https:\/\/www.johndhutton.com\/index.php?rest_route=\/wp\/v2\/posts\/123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.johndhutton.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.johndhutton.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.johndhutton.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.johndhutton.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=123"}],"version-history":[{"count":79,"href":"https:\/\/www.johndhutton.com\/index.php?rest_route=\/wp\/v2\/posts\/123\/revisions"}],"predecessor-version":[{"id":198,"href":"https:\/\/www.johndhutton.com\/index.php?rest_route=\/wp\/v2\/posts\/123\/revisions\/198"}],"wp:attachment":[{"href":"https:\/\/www.johndhutton.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.johndhutton.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.johndhutton.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}