Better Dashboards

Working with Microsoft enterprise chart, dashboard and reporting technologies.

Posts Tagged ‘Chart Areas’

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:


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";


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";


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:


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:


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

        // 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.


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

Stair-Stacked Pie Chart

Posted by milang on January 9, 2009

In the chart sample framework gallery, there is a very cool image of a stair-stepped pie chart that I decided to replicate.


How to Create Stair Stacked Pie Chart

Essentially, you need to create three chart areas and overlap them using manual positioning.  You have to fiddle with some chart area settings, but the steps below should help you get started.

1.    Drop chart onto web page.
2.    Copy and paste code below, substituting the name of your chart (probably Chart1) into the DoStackStairPie method.

using System.Web.UI.DataVisualization.Charting;

namespace BetterDashboards.Samples

/// Summary description for StairStackedPie.

public partial class StairStackedPie : System.Web.UI.Page

/// Page Load event handler.

protected void Page_Load(object sender, System.EventArgs e)
// Replace with the name of your chart (by default it is Chart1)

private void DoStairStackPie(Chart chart)
Random rand = new Random();

// Clear all chart areas and all series

for (int i=0; i < 3; i++) { // Create 3 new chart areas chart.ChartAreas.Add("Area" + i); // Create 3 new pie chart series chart.Series.Add("Series" + i); chart.Series[i].ChartType = SeriesChartType.Pie; // Associate each series with a different chart area chart.Series[i].ChartArea = "Area" + i; // Insert random data points for the chart for (int j = 0; j < 5; j++) chart.Series[i].Points.AddXY(j, rand.Next(0, 20)); } ChartArea chartArea1 = chart.ChartAreas[0]; ChartArea chartArea2 = chart.ChartAreas[1]; ChartArea chartArea3 = chart.ChartAreas[2]; // Chart Area 1 chartArea1.Area3DStyle.IsClustered = true; chartArea1.Area3DStyle.Enable3D = true; chartArea1.Area3DStyle.Perspective = 10; chartArea1.Area3DStyle.PointGapDepth = 900; chartArea1.Area3DStyle.IsRightAngleAxes = false; chartArea1.Area3DStyle.WallWidth = 25; chartArea1.Area3DStyle.Rotation = 65; chartArea1.Area3DStyle.Inclination = 35; chartArea1.BackColor = System.Drawing.Color.Transparent; chartArea1.BackSecondaryColor = System.Drawing.Color.Transparent; chartArea1.InnerPlotPosition.Auto = false; chartArea1.InnerPlotPosition.Height = 95F; chartArea1.InnerPlotPosition.Width = 85F; chartArea1.Position.Auto = false; chartArea1.Position.Height = 70F; chartArea1.Position.Width = 52F; chartArea1.Position.X = 48F; chartArea1.Position.Y = 30F; // Chart Area 2 chartArea2.Area3DStyle.IsClustered = true; chartArea2.Area3DStyle.Enable3D = true; chartArea2.Area3DStyle.Perspective = 10; chartArea2.Area3DStyle.PointGapDepth = 900; chartArea2.Area3DStyle.IsRightAngleAxes = false; chartArea2.Area3DStyle.WallWidth = 25; chartArea2.Area3DStyle.Rotation = 65; chartArea2.Area3DStyle.Inclination = 35; chartArea2.BackColor = System.Drawing.Color.Transparent; chartArea2.BackSecondaryColor = System.Drawing.Color.Transparent; chartArea2.InnerPlotPosition.Auto = false; chartArea2.InnerPlotPosition.Height = 95F; chartArea2.InnerPlotPosition.Width = 85F; chartArea2.Position.Auto = false; chartArea2.Position.Height = 70F; chartArea2.Position.Width = 52F; chartArea2.Position.X = 26.5F; chartArea2.Position.Y = 15F; // Chart Area 3 chartArea3.Area3DStyle.IsClustered = true; chartArea3.Area3DStyle.Enable3D = true; chartArea3.Area3DStyle.Perspective = 10; chartArea3.Area3DStyle.PointGapDepth = 900; chartArea3.Area3DStyle.IsRightAngleAxes = false; chartArea3.Area3DStyle.WallWidth = 25; chartArea3.Area3DStyle.Rotation = 65; chartArea3.Area3DStyle.Inclination = 35; chartArea3.BackColor = System.Drawing.Color.Transparent; chartArea3.BackSecondaryColor = System.Drawing.Color.Transparent; chartArea3.InnerPlotPosition.Auto = false; chartArea3.InnerPlotPosition.Height = 95F; chartArea3.InnerPlotPosition.Width = 85F; chartArea3.Position.Auto = false; chartArea3.Position.Height = 70F; chartArea3.Position.Width = 52F; chartArea3.Position.X = 5F; } } } [/sourcecode] (Sidebar: The design-time experience with the Microsoft chart control is nowhere near as clean or as valuable as the Dundas experience.  As a result, I suspect there will be a lot of Microsoft charts that replicate the look and feel of the charts in the sample framework; developers are not known for their graphical prowess, and graphic designers will be scared to death to try to create anything decent-looking using Visual Studio.  Hopefully the Silverlight chart will make it easier to bring graphic artists into the fold.)

Posted in .NET Chart | Tagged: , , | 6 Comments »