{"id":623,"date":"2011-09-29T07:19:39","date_gmt":"2011-09-29T06:19:39","guid":{"rendered":"http:\/\/www.stuartroberts.net\/?p=623"},"modified":"2012-03-13T19:44:27","modified_gmt":"2012-03-13T19:44:27","slug":"charting-web-part","status":"publish","type":"post","link":"http:\/\/www.stuartroberts.net\/index.php\/2011\/09\/29\/charting-web-part\/","title":{"rendered":"Charting WebPart"},"content":{"rendered":"<p>I&#8217;m in the process of writing a Charting WebPart for SharePoint 2010, specifically aimed at the standard version, which does not come with such a feature.  Of course, it&#8217;s still usable within an enterprise environment if you were to find it useful.<\/p>\n<div id=\"attachment_633\" style=\"width: 544px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Chart-WebParts.png\"><img aria-describedby=\"caption-attachment-633\" decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Chart-WebParts.png\" alt=\"\" title=\"Chart WebParts\" width=\"534\" height=\"410\" class=\"size-full wp-image-633\" srcset=\"http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Chart-WebParts.png 534w, http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Chart-WebParts-300x230.png 300w\" sizes=\"(max-width: 534px) 100vw, 534px\" \/><\/a><p id=\"caption-attachment-633\" class=\"wp-caption-text\">Chart WebParts<\/p><\/div>\n<p>To download the solution and installation script, follow <a href=\"http:\/\/stuartroberts.net\/Downloads\/ChartingWP\/Release_beta.zip\">this link<\/a>.<br \/>\n<!--more--><br \/>\nThe zip contains a solution (wsp) file and a PowerShell script for installation.  Before running the script, edit it and change the <em>SolutionFolder<\/em> variable (line 6) to the location of the extracted wsp file.<\/p>\n<div id=\"attachment_634\" style=\"width: 318px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Install-Script.png\"><img aria-describedby=\"caption-attachment-634\" decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Install-Script.png\" alt=\"\" title=\"Install Script\" width=\"308\" height=\"131\" class=\"size-full wp-image-634\" srcset=\"http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Install-Script.png 308w, http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Install-Script-300x127.png 300w\" sizes=\"(max-width: 308px) 100vw, 308px\" \/><\/a><p id=\"caption-attachment-634\" class=\"wp-caption-text\">Install Script<\/p><\/div>\n<p>Once installed, enable the Site Collection Feature <em>SharePoint Stu Chart WebPart<\/em>.<\/p>\n<div id=\"attachment_635\" style=\"width: 817px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Feature.png\"><img aria-describedby=\"caption-attachment-635\" decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Feature.png\" alt=\"\" title=\"Feature\" width=\"807\" height=\"36\" class=\"size-full wp-image-635\" srcset=\"http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Feature.png 807w, http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Feature-300x13.png 300w\" sizes=\"(max-width: 807px) 100vw, 807px\" \/><\/a><p id=\"caption-attachment-635\" class=\"wp-caption-text\">Feature<\/p><\/div>\n<p>Then add the <em>SharePoint Stu Chart WebPart<\/em> WebPart (within the <em>Custom<\/em> category) to your page.<\/p>\n<div id=\"attachment_636\" style=\"width: 604px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Add-WebPart.png\"><img aria-describedby=\"caption-attachment-636\" decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Add-WebPart.png\" alt=\"\" title=\"Add WebPart\" width=\"594\" height=\"187\" class=\"size-full wp-image-636\" srcset=\"http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Add-WebPart.png 594w, http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Add-WebPart-300x94.png 300w\" sizes=\"(max-width: 594px) 100vw, 594px\" \/><\/a><p id=\"caption-attachment-636\" class=\"wp-caption-text\">Add WebPart<\/p><\/div>\n<p>The WebPart works by processing values within the list it&#8217;s configured against and displaying either the sum, total or actual item values in a graph.  The graphical component of the WebPart utilises the Visifire Silverlight control.<\/p>\n<p>To configure the WebPart, start by bringing up the WebPart editor pane.  At the top of the pane you&#8217;ll notice a section titled <em>Select Chart Source<\/em>, this is where you configure the source for the chart, as hinted at by the section title \ud83d\ude42<\/p>\n<div id=\"attachment_637\" style=\"width: 272px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Edit-Chart-Source.png\"><img aria-describedby=\"caption-attachment-637\" decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Edit-Chart-Source.png\" alt=\"\" title=\"Edit Chart Source\" width=\"262\" height=\"286\" class=\"size-full wp-image-637\" \/><\/a><p id=\"caption-attachment-637\" class=\"wp-caption-text\">Edit Chart Source<\/p><\/div>\n<p>The first drop down is for selecting the source list.<\/p>\n<p>Next, we have a list of views to use for reading the data.<\/p>\n<p>The third drop down list contains a list of available and valid fields for the chart axis; i.e the primary x axis, the content of which will be displayed as the label in the chart.<\/p>\n<p>The last section within this configuration group is where you can specify how the columns are calculated.  Leaving the checkbox unchecked allows you to select a value field from the last drop down list to use to when displaying the chart columns.  For example, if the source list has three items with a field called <em>total<\/em>, the value of this field would be used for the rendered columns.<\/p>\n<p>Ticking the checkbox, changes the configuration options slightly.<\/p>\n<div id=\"attachment_638\" style=\"width: 253px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Calculation-Configuration.png\"><img aria-describedby=\"caption-attachment-638\" decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Calculation-Configuration.png\" alt=\"\" title=\"Calculation Configuration\" width=\"243\" height=\"161\" class=\"size-full wp-image-638\" \/><\/a><p id=\"caption-attachment-638\" class=\"wp-caption-text\">Calculation Configuration<\/p><\/div>\n<p>Now, instead of selecting a column to read the value of, you are required to select one of two options &#8211; <em>count<\/em> or <em>sum<\/em>.  If you select <em>count<\/em>, the number of distinct fields for the primary x axis are used for the value.  If, on the other hand, you select <em>sum<\/em>, you will need to select a value field to use when calculating the sum total for each column in the chart.<\/p>\n<div id=\"attachment_639\" style=\"width: 243px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Configure-for-sum.png\"><img aria-describedby=\"caption-attachment-639\" decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Configure-for-sum.png\" alt=\"\" title=\"Configure for sum\" width=\"233\" height=\"137\" class=\"size-full wp-image-639\" \/><\/a><p id=\"caption-attachment-639\" class=\"wp-caption-text\">Configure for sum<\/p><\/div>\n<p>That pretty much covers the source configuration.  The final part of the configuration is for how the chart is displayed.  This configuration is contained with the section titled <em>Options<\/em>.<\/p>\n<div id=\"attachment_640\" style=\"width: 238px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Options-Section.png\"><img aria-describedby=\"caption-attachment-640\" decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Options-Section.png\" alt=\"\" title=\"Options Section\" width=\"228\" height=\"549\" class=\"size-full wp-image-640\" srcset=\"http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Options-Section.png 228w, http:\/\/www.stuartroberts.net\/wp-content\/uploads\/2011\/09\/Options-Section-124x300.png 124w\" sizes=\"(max-width: 228px) 100vw, 228px\" \/><\/a><p id=\"caption-attachment-640\" class=\"wp-caption-text\">Options Section<\/p><\/div>\n<p>Within this section you can configure the following:<\/p>\n<ul>\n<li>Type of chart &#8211; area, column, line, pie or stacked bar<\/li>\n<li>Label for the y axis<\/li>\n<li>Label for the x axis<\/li>\n<li>Height of the chart, in pixels.  Minimum is 100, anything below will be ignored<\/li>\n<li>Width of the chart, also in pixels.  Minimum is 200<\/li>\n<li>If the chart should be rendered in 3D<\/li>\n<li>If the chart should be animated<\/li>\n<li>If a grid should be shown behind the chart columns<\/li>\n<li>The colour of the columns &#8211; aqua, blue, gray, green, orange, red or violet<\/li>\n<li>The cache timeout in minutes for the chart, specifying 0 disables caching<\/li>\n<\/ul>\n<p><strong>Note<\/strong>: This is a beta release.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m in the process of writing a Charting WebPart for SharePoint 2010, specifically aimed at the standard version, which does not come with such a feature. Of course, it&#8217;s still usable within an enterprise environment if you were to find &hellip; <a href=\"http:\/\/www.stuartroberts.net\/index.php\/2011\/09\/29\/charting-web-part\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[3],"tags":[81,38],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/plx2I-a3","_links":{"self":[{"href":"http:\/\/www.stuartroberts.net\/index.php\/wp-json\/wp\/v2\/posts\/623"}],"collection":[{"href":"http:\/\/www.stuartroberts.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.stuartroberts.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.stuartroberts.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.stuartroberts.net\/index.php\/wp-json\/wp\/v2\/comments?post=623"}],"version-history":[{"count":9,"href":"http:\/\/www.stuartroberts.net\/index.php\/wp-json\/wp\/v2\/posts\/623\/revisions"}],"predecessor-version":[{"id":937,"href":"http:\/\/www.stuartroberts.net\/index.php\/wp-json\/wp\/v2\/posts\/623\/revisions\/937"}],"wp:attachment":[{"href":"http:\/\/www.stuartroberts.net\/index.php\/wp-json\/wp\/v2\/media?parent=623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.stuartroberts.net\/index.php\/wp-json\/wp\/v2\/categories?post=623"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.stuartroberts.net\/index.php\/wp-json\/wp\/v2\/tags?post=623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}