Better Dashboards

Working with Microsoft enterprise chart, dashboard and reporting technologies.

Align Multiple Chart Areas

Posted by milang on February 11, 2009

Last week, I started talking about a scenario where you could not use scale breaks and instead you would have to use multiple chart areas.  I’m going to expand on that post today to talk about how to create and align multiple chart areas.

First, let’s define what a chart area is.  The chart is the top-level container that includes the outer border, the chart title, and the legend.  The chart always contains one default chart area, although it is not visible on the chart itself.

I have highlighted the chart area in red below:

highlightedchartareas

Think of the chart area as a “container” that includes only the axis labels, the axis title, and the plotting area of one or more series.  Each series is connected to one chart area.  By default, the chart adds all series to the default chart area.  When using area, column, line, and scatter charts, any combination of these series can be displayed on the same chart area.

In the graph above, it is beneficial to separate the chart into multiple chart areas.  You can do that by creating a new chart area (thus splitting the chart into two chart areas) and then assigning one of the two series to the new chart area:


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

// Create a new chart area
// This will split the chart into two separate chart areas
Chart1.ChartAreas.Add("Chart Area 2");

// Set new chart area properties
// NOTE: I cheated a bit and manually set chart area properties to make the newly created
// chart area look like the first one.  I still have not figured out how to clone chart areas
// and I suspect this is not possible with the MS chart
Chart2.ChartAreas[1].AxisX.LabelStyle.Font = new Font("Trebuchet MS", 8, FontStyle.Bold);
Chart2.ChartAreas[1].AxisY.LabelStyle.Font = new Font("Trebuchet MS", 8, FontStyle.Bold);
Chart2.ChartAreas[1].AxisX.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);
Chart2.ChartAreas[1].AxisY.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);

// Assign the first series to the chart area
Chart2.Series[0].ChartArea = "Chart Area 2";

alignmultiplechartareas1

Okay so the image above improves the readability of the series but notice that the chart areas need to be aligned so that we can make a proper comparison.  To do this, we can simply call AlignWithChartArea:

// Align the new chart area with the old one
 Chart2.ChartAreas[0].AlignWithChartArea = "Chart Area 2";

alignmultiplechartareas2

Lastly, when we start the y-axis labels at a value other than zero by setting IsStartedFromZero to false, the final result provides fodder for an excellent comparison between series:

alignmultiplechartareas4

Align Multiple Chart Areas Horizontally

In the chart sample framework, there is an example of how to align multiple chart areas horizontally, but I would never use it in a live application — it is a major liability because it presumes that your numbers are always fixed.  Aligning multiple chart areas horizontally is not particularly useful anyway because comparisons between different sets of numbers are always made top to bottom, not left to right.

Still, the concept of multiple chart areas allows you to do some pretty cool things.  Here is an example of how to layout multiple pie charts:

alignmultiplechartareas3


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

public partial class MultiPieChartLayout: System.Web.UI.Page
{
    Random rand;

    protected void Page_Load(object sender, EventArgs e)
    {
        // Clear all series and chart areas so we can re-add them
        Chart2.Series.Clear();
        Chart2.ChartAreas.Clear();

        // Create new random variable for data
        rand = new Random();

        for (int i = 0; i < 4; i++)         {             // Create four new series and four new chart areas             Chart2.Series.Add("Series" + i.ToString());             Chart2.ChartAreas.Add("ChartArea" + i.ToString());             // Assign each series to a separate chart area             Chart2.Series[i].ChartArea = "ChartArea" + i.ToString();             // Set all series to be pie             Chart2.Series[i].ChartType = SeriesChartType.Pie;             // Add 7 random points to each pie chart             for (int j = 0; j < 7; j++)                 Chart2.Series[i].Points.AddXY(i, rand.Next(23, 42));         }         // Set the chart area position for the first chart area.         Chart2.ChartAreas["ChartArea0"].Position.X = 4;         Chart2.ChartAreas["ChartArea0"].Position.Y = 8;         Chart2.ChartAreas["ChartArea0"].Position.Width = 45;         Chart2.ChartAreas["ChartArea0"].Position.Height = 40;         // Set the chart area position for the second chart area.         Chart2.ChartAreas["ChartArea1"].Position.X = 4;         Chart2.ChartAreas["ChartArea1"].Position.Y = 50;         Chart2.ChartAreas["ChartArea1"].Position.Width = 45;         Chart2.ChartAreas["ChartArea1"].Position.Height = 40;         // Set the chart area position for the third chart area.         Chart2.ChartAreas["ChartArea2"].Position.X = 50;         Chart2.ChartAreas["ChartArea2"].Position.Y = 50;         Chart2.ChartAreas["ChartArea2"].Position.Width = 45;         Chart2.ChartAreas["ChartArea2"].Position.Height = 40;         // Set the chart area position for the fourth chart area.         Chart2.ChartAreas["ChartArea3"].Position.X = 50;         Chart2.ChartAreas["ChartArea3"].Position.Y = 8;         Chart2.ChartAreas["ChartArea3"].Position.Width = 45;         Chart2.ChartAreas["ChartArea3"].Position.Height = 40;     } } [/sourcecode] In SSRS, there is a slightly different workflow for creating multiple chart areas but the ideas presented above are still valid.  SSRS users can check the MSDN post on How to Specify a Chart Area for a Series for a step-by-step guide.

Advertisements

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

Delicious Data Visualizations

Posted by milang on February 9, 2009

This is the actual exhibit that I presented as part of my RIM vs. Apple case study in finance class.  It shows Apple Inc sales by product.  It wasn’t until after I had actually drawn the values out on the pie chart that I realized I had just made my first apple pie.  🙂

applepiechart1

This, of course, was followed closely by the creation of a berry doughnut:

berrydoughnut11

… and my personal favorite, the chocolate bars:

chocolatebar

Wow, I need to get out more…

Posted in .NET Chart, SQL Reporting Services | Tagged: , | Leave a Comment »

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…

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