{"id":1064,"date":"2011-02-27T15:04:09","date_gmt":"2011-02-27T14:04:09","guid":{"rendered":"http:\/\/www.itidea.nl\/?p=1064"},"modified":"2011-04-24T16:20:00","modified_gmt":"2011-04-24T14:20:00","slug":"search-refiners-part-3-chart-based","status":"publish","type":"post","link":"https:\/\/www.itidea.nl\/index.php\/search-refiners-part-3-chart-based\/","title":{"rendered":"Search Refiners (part 3) – Chart based"},"content":{"rendered":"

In this series:\u00a0\u00a0<\/p>\n

    \n
  1. Search Refiners part 1 – Expanding the OOTB search Refinement Panel <\/a><\/li>\n
  2. Search Refiners part 2 – Use of CustomFilters <\/a><\/li>\n
  3. Search Refiners part 3 – Chart based (this post)<\/li>\n
  4. Search Refiners part 4 – User selection based<\/a><\/li>\n<\/ol>\n

    \u00a0<\/p>\n

    In the previous two posts about search refiners no code was written to adjust the OOTB Search Refinement Panel, just some XML modifications.
    \nIn this post a chart based search refiner will be built and some code is needed to accomplish this. The refinement will be built on the Modified Date.\u00a0\u00a0<\/p>\n

    Create the refiner<\/h3>\n

    To get the refinement categories and their values, the RefinementManager class will be used.
    \nThe RefinementManager will get an instance of the refinement manager on the current page. This means the OOTB Search Refinement Panel has to be present on the current page. Not only it has to be present, it also has to have the filtercategory on which the refinement is going to perform on, in this case the Modified Date.\u00a0<\/p>\n

    Get the instance of the refinement manager:<\/p>\n

    \r\nRefinementManager refinementManager = RefinementManager.GetInstance(this.Page);\r\n<\/pre>\n
    To get the refinement values:<\/p>\n
    \r\nXmlDocument refinementXmlDoc = refinementManager.GetRefinementXml();\r\n<\/pre>\n
    The GetRefinementXML method gets the filtered xml document of the refinement manager.
    \nFor the example is this post only the Modified Date is of interest, so an XPath expression is used to get to the right filter category and values:<\/p>\n
    \r\nXmlNodeList filters = refXmlDocument.DocumentElement.SelectNodes("\/FilterPanel\/FilterCategory[@ManagedProperty='" + refiner + "']\/Filters\/Filter[Count>0]");\r\n<\/pre>\n
    The refiner variable is declared as:<\/p>\n
    \r\nprivate const string refiner = "Write";\r\n<\/pre>\n
    By looping through the XMLNodes in the XMLNodeList the neccesary values are available, just as in the XML which is rendered by the OOTB Search Refinement Panel. The elements of the childnodes (filter categories) are shown:\"\"<\/a>\u00a0\u00a0<\/p>\n
    Actually, this was the most interesting part. What’s left is displaying the values to the user, in this case: putting it in a chart; and binding it all together.\u00a0\u00a0<\/p>\n
    Putting it all together<\/h3>\n
    In CreateChildControls the chart is setup:<\/p>\n
    \r\nprivate Microsoft.Office.Server.WebControls.Chart chart;\r\nprotected override void CreateChildControls()\r\n{\r\n\u00a0\u00a0\u00a0 ChartArea area = new ChartArea("Pie Chart");\r\n\r\n\u00a0\u00a0\u00a0 chart = new Microsoft.Office.Server.WebControls.Chart();\r\n\u00a0\u00a0\u00a0 chart.Width = 160;\r\n\u00a0\u00a0\u00a0 chart.Height = 160;\r\n\u00a0\u00a0\u00a0 chart.ChartAreas.Add(area);\r\n\r\n\u00a0\u00a0\u00a0 Controls.Add(chart);\r\n}\r\n<\/pre>\n
    And in the OnPreRender the refiment manager, the values of the filter category Modified Date and the chart are put together.<\/p>\n
    \r\nprotected override void OnPreRender(EventArgs e)\r\n{\r\n\u00a0\u00a0\u00a0 RefinementManager refManager = RefinementManager.GetInstance(this.Page);\r\n\r\n\u00a0\u00a0\u00a0 XmlDocument refXmlDocument = refManager.GetRefinementXml();\r\n\r\n\u00a0\u00a0\u00a0 if (refXmlDocument != null)\r\n\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Series chartSeries = new Series();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 chartSeries.ChartType = SeriesChartType.Pie;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 XmlNodeList filters = refXmlDocument.DocumentElement.SelectNodes("\/FilterPanel\/FilterCategory[@ManagedProperty='" + refiner + "']\/Filters\/Filter[Count>0]");\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (filters.Count != 0)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 foreach (XmlNode filter in filters)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 string xValue = filter.SelectSingleNode("Value").InnerText;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 string yValue = filter.SelectSingleNode("Count").InnerText;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 int i = chartSeries.Points.AddXY(xValue, yValue);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ display text in chart\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 chartSeries.Points[i].Label = xValue;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/use the url to make the pie parts clickable\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 chartSeries.Points[i].Url = filter.SelectSingleNode("Url").InnerText;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/add 'Any Modified Date' option\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 XmlNodeList xmlFilterNodesAllItems = refXmlDocument.DocumentElement.SelectNodes("\/FilterPanel\/FilterCategory[@ManagedProperty='" + refiner + "']\/Filters\/Filter[Count='']");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 chart.Titles.Clear();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 System.Web.UI.DataVisualization.Charting.Title allItemsTitle = new System.Web.UI.DataVisualization.Charting.Title();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 allItemsTitle.Text = xmlFilterNodesAllItems[0].SelectSingleNode("Value").InnerText;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 allItemsTitle.Url = xmlFilterNodesAllItems[0].SelectSingleNode("Url").InnerText;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 allItemsTitle.ToolTip = "Refine by: " + allItemsTitle.Text;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 allItemsTitle.ForeColor = Color.FromArgb(0, 114, 188);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 chart.Titles.Add(allItemsTitle);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (chartSeries.Points.Count > 0)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 chart.Series.Add(chartSeries);\r\n\u00a0\u00a0\u00a0 }\r\n}\r\n<\/pre>\n
    In the XPath expressions used to get the filter values for Modified Date and ‘Any Modified Date’ are slightly different. Look at the Count differences.
    \nBy removing the Count in the first XPath expression the chart will display ‘Any Modified Date’ and the chart kind of gets messed up:
    \n    \"\"<\/a>
    \nand ‘Any Modified Date’ is not clickable, because it get’s no colored part in the pie chart. The reason for this is that the Count value for Any Modified Date is empty.
    \nThis is the reason to use Count>0 for the values displayed in the pie chart and Count=” to get Any Modified Date.
    \nThe pie chart now looks like this:
    \n    \"\"<\/a>\u00a0\u00a0<\/p>\n
    And after selecting ‘Past Month’:\u00a0\u00a0<\/p>\n
    \"\"<\/a>
    \n\u00a0\u00a0<\/p>\n
    Summary<\/h3>\n
    To transform a textual search refiner to a chart based search refiner is shown in this post.
    \nAs long as the OOTB Search Refinement Panel is present on the page and the filter category used by the code is present in the Filter Category Definition (property of Search Refinement Panel web part), the code in this post can be used to visualize a search refiner.
    \nIf it’s not present, you can extend the Refinement Panel webpart. This is not covered in this post, but maybe I’ll show you this in a future post.\u00a0\u00a0<\/p>\n
    \u00a0\u00a0\u00a0<\/h3>\n","protected":false},"excerpt":{"rendered":"
    In this series:\u00a0\u00a0 Search Refiners part 1 – Expanding the OOTB search Refinement Panel Search Refiners part 2 – Use of CustomFilters Search Refiners part 3 – Chart based (this post) Search Refiners part 4 – User selection based \u00a0 … Read More »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[20,42,6],"class_list":["post-1064","post","type-post","status-publish","format-standard","hentry","category-sharepoint-2010","tag-c","tag-sharepoint-2010","tag-visual-studio"],"_links":{"self":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/1064","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/comments?post=1064"}],"version-history":[{"count":9,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/1064\/revisions"}],"predecessor-version":[{"id":1114,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/1064\/revisions\/1114"}],"wp:attachment":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/media?parent=1064"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/categories?post=1064"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/tags?post=1064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}