Better Dashboards

Working with Microsoft enterprise chart, dashboard and reporting technologies.

Posts Tagged ‘Pie Labels’

Display Percentages on a Pie Chart

Posted by milang on February 4, 2009

Building on a previous post about how to create a pie chart in ASP.NET, let’s look at how to display percentages on a pie chart.  This is surprisingly difficult because it is unclear which chart properties need to be set in order to achieve the look that we’re interested in.

The most common way to display percentages on a pie chart is using the pie labels themselves:

Pie Chart with Percentage -1

Here is what it looks like after we display the labels outside the pie chart:

piechartpercentagelabel1a

...
using System.Web.UI.DataVisualization.Charting;

public partial class PieChartPercentageLabels : System.Web.UI.Page
{   
     protected void Page_Load(object sender, EventArgs e) 
     {        
        // Insert code to create basic pie chart
        // See my blog post entitled "Pie Charts in ASP.NET" for full source code

        // Set the pie labels to be drawn outside of the pie chart
        this.Chart2.Series[0]["PieLabelStyle"] = "Outside";

        // Set these other two properties so that you can see the connecting lines
        this.Chart2.Series[0].BorderWidth = 1;
        this.Chart2.Series[0].BorderColor = System.Drawing.Color.FromArgb(26, 59, 105);

        // Set the pie label as well as legend text to be displayed as percentage
        // The P2 indicates a precision of 2 decimals
        this.Chart2.Series[0].Label = "#PERCENT{P2}";
     }
}

Display Percentages in the Legend of a Pie Chart

Showing percentages on the pie chart is useful to help give context to the slices of the pie, but we still need to see the categories (in this case, the sales names) on the pie somewhere.  One potential solution is to keep the category names as outside labels and show the percentages in the legend.

piechartpercentagelabel5

...
using System.Web.UI.DataVisualization.Charting;

public partial class PieChartPercentageLabels : System.Web.UI.Page
{   
     protected void Page_Load(object sender, EventArgs e) 
     {        
        // Insert code to create basic pie chart
        // See my blog post entitled "Pie Charts in ASP.NET" for full source code

         // Set pie labels to be outside the pie chart
         this.Chart2.Series[0]["PieLabelStyle"] = "Outside";

         // Set border width so that labels are shown on the outside
         this.Chart2.Series[0].BorderWidth = 1;
         this.Chart2.Series[0].BorderColor = System.Drawing.Color.FromArgb(26, 59, 105);

         // Add a legend to the chart and dock it to the bottom-center
         this.Chart2.Legends.Add("Legend1");
         this.Chart2.Legends[0].Enabled = true;
         this.Chart2.Legends[0].Docking = Docking.Bottom;
         this.Chart2.Legends[0].Alignment = System.Drawing.StringAlignment.Center;

         // Set the legend to display pie chart values as percentages
         // Again, the P2 indicates a precision of 2 decimals
         this.Chart2.Series[0].LegendText = "#PERCENT{P2}";

         // By sorting the data points, they show up in proper ascending order in the legend
         this.Chart2.DataManipulator.Sort(PointSortOrder.Descending, Chart2.Series[0]);
     }
}

Some points of interest for this chart:

  • To maximize space on a pie chart, I always place the legend below the pie instead of on the right side.
  • I tried to give the legend entries more meaning by sorting the data points in descending order on the chart.
  • If your pie chart is too complicated to understand after you have performed these steps, you may want to consider displaying your data using a different chart type.

Lastly, if you disable pie labels and use a creative mix of keywords that Alex documented on his blog, you can add category names and percentages in the legend:

piechartpercentagelabel6

...
using System.Web.UI.DataVisualization.Charting;

public partial class PieChartPercentageLabels : System.Web.UI.Page
{   
     protected void Page_Load(object sender, EventArgs e) 
     {        
         // Insert code to create basic pie chart
         // See the post entitled "Pie Charts in ASP.NET" for full source code

         // Set pie labels to be outside the pie chart
         this.Chart2.Series[0]["PieLabelStyle"] = "Disabled";

         // Add a legend to the chart and dock it to the bottom-center
         this.Chart2.Legends.Add("Legend1");
         this.Chart2.Legends[0].Enabled = true;
         this.Chart2.Legends[0].Docking = Docking.Bottom;
         this.Chart2.Legends[0].Alignment = System.Drawing.StringAlignment.Center;

         // Show labels in the legend in the format "Name (### %)"
         this.Chart2.Series[0].LegendText = "#VALX (#PERCENT)";

         // By sorting the data points, they show up in proper ascending order in the legend
         this.Chart2.DataManipulator.Sort(PointSortOrder.Descending, Chart2.Series[0]);
     }
}

For anyone using SSRS, check out the MSDN article on How to: Display Percentage Values on a Pie Chart.

Feel free to post questions if this is unclear…

Advertisements

Posted in .NET Chart, SQL Reporting Services | Tagged: , | 12 Comments »

Collect Small Slices on a Pie Chart

Posted by milang on January 20, 2009

Picking up from near the end of a previous post on how to place labels outside the pie chart, you can collect small slices on a pie chart by calling a few of the “Collected” custom attributes. I think this is the best way of handling overflow on a pie chart; the chart samples also show how to show collected pie slices onto a secondary pie chart, but that solution is not very scalable, and in many ways, it only complicates the information trying to be conveyed.

Here’s the chart from near the end of the previous post that we will modify:

piechartlabel2
When collecting pie slices, the key property is the CollectedThreshold custom property, which will determine the value at which all data points will be collected. You’ll need to play around with this value depending on your data; the best rule of thumb is to collect all small data points so that between 4-7 data points remain on the chart.

Here’s the code, taken directly from the chart sample framework in the Chart Types –> Pie Charts –> Collecting Small Slices sample:

// For simplicity, we will grab the first series in the chart as a
// separate object
Series series1 = Chart2.Series[0];

// Set the threshold under which all points will be collected
series1["CollectedThreshold"] = "5";

// Set the threshold type to be in percentage
// When set to false, this property uses the actual value to determine the collected threshold
series1["CollectedThresholdUsePercent"] = "true";

// Set the label of the collected pie slice
series1["CollectedLabel"] = "Other";

/* By setting these three properties, we collect any data
// less than 5% into one slice called "Other"
*/ 

// The text that will be shown in the legend, although in this example, the legend is hidden
series1["CollectedLegendText"] = "Other";

// Collected pie slice shown as exploded (just for effect)
series1["CollectedSliceExploded"]= "true";

// Set a named color for the collected slice
// Interestingly, it appears that this means you cannot set an RGB value for this property
series1["CollectedColor"] = "Green";

collectedpie

(By the way, since a few people have asked, you can check the MSDN documentation for step-by-step guidelines on how to collect small slices on a pie chart in Reporting Services).

Posted in .NET Chart, SQL Reporting Services | Tagged: , | 3 Comments »

Overlapping Labels on a Pie Chart

Posted by milang on January 20, 2009

When you first create a pie chart in Visual Studio, the result may look like this:

piechartlabel1

That’s not very helpful so you’re going to need to show labels outside of the pie chart.  The smart labels algorithm for the chart does not work for any type of accumulation chart (pie, doughnut, funnel or pyramid).  To show labels outside of the pie, you’ll have to set a weird set of properties:


// Set the PieLabelStyle custom attribute to the value of "Outside"
Chart1.Series[0]["PieLabelStyle"] = "Outside";

// By default, the callout lines will not be drawn unless you set a color for the series border
Chart1.Series[0].BorderWidth = 1;
Chart1.Series[0].BorderDashStyle = ChartDashStyle.Solid;
Chart1.Series[0].BorderColor = System.Drawing.Color.FromArgb(200, 26, 59, 105);

The resulting chart looks like this:

piechartlabel2

Okay not bad, but there are still some overlapping labels, because there are a few points which are very small. At this point, you can collect the small slices into one slice, or you can use a really tricky workaround – set the chart to 3D with zero inclination. That will redraw the entire chart area, and the extra space will be used to label the pie chart.

piechartlabel3


// Set the pie chart to be 3D
Chart1.ChartAreas[0].Area3DStyle.Enable3D = true;

// By setting the inclination to 0, the chart essentially goes back to being a 2D chart
Chart1.ChartAreas[0].Area3DStyle.Inclination = 0;

Of course, one of the reasons for the pie labeling issues is because I have more than five points on a pie chart, which tends to cause the pie chart to become unintelligible fairly quickly. This is one reason why there is a fair amount of controversy surrounding pie chart best practices.

Also, check out the MSDN documentation for the Reporting Services version of how to display labels outside the pie chart.

Posted in .NET Chart, SQL Reporting Services | Tagged: , | 13 Comments »