Archive

Posts Tagged ‘Area Chart’

MS Chart Part 3 (Combining Different Chart-Types)

June 28, 2011 9 comments

Sometimes you may need to combine two or more different Chart-Types. In this article we go through the stages of creating a composite MS Chart. In this project we make a Pareto function to show how to combine two different chart types in a single ChartArea.

Pareto chart: A Pareto chart, named after Vilfredo Pareto, is a type of chart that contains both bars and a line graph, where individual values are represented in descending order by bars, and the cumulative total is represented by the line (In probability distribution there are two ways to display distribution in chart, PMF (Probability Mass Function) and CDF (Cumulative Distribution Function) that can be used to display both in a single area).
The purpose of the Pareto chart is to highlight the most important among a (typically large) set of factors. In quality control, it often represents the most common sources of defects, the highest occurring type of defect, or the most frequent reasons for customer complaints, and so on. Wilkinson (2006) devised an algorithm for producing statistically-based acceptance limits (similar to confidence intervals) for each bar in the Pareto chart. The Pareto chart is one of the seven basic tools of quality control.

After a short introduction to Pareto Chart, lets start the development by starting a new project from scratch. (The reference is Microsoft MSChart sample project)

Pareto MS Chart

Pareto Chart

ASPX File:

<asp:Chart ID="Chart1" runat="server" Width="412px" Height="296px" BorderlineDashStyle="Solid" Palette="BrightPastel" BackSecondaryColor="White" BackGradientStyle="TopBottom" BorderWidth="2" BackColor="WhiteSmoke" BorderColor="26, 59, 105">

<Legends>

<asp:Legend Enabled="False" IsTextAutoFit="False" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold">

</asp:Legend>

</Legends>

<BorderSkin SkinStyle="Emboss"></BorderSkin>

<Series>

<asp:Series Name="Default" BorderColor="180, 26, 59, 105">

</asp:Series>

</Series>

<ChartAreas>

<asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BackSecondaryColor="White" BackColor="Gainsboro" ShadowColor="Transparent" BackGradientStyle="TopBottom">

<AxisY2 IsLabelAutoFit="False" Interval="25">

<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />

</AxisY2>

<AxisY LineColor="64, 64, 64, 64">

<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />

<MajorGrid LineColor="64, 64, 64, 64" />

</AxisY>

<AxisX LineColor="64, 64, 64, 64">

<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />

<MajorGrid LineColor="64, 64, 64, 64" />

</AxisX>

</asp:ChartArea>

</ChartAreas>

</asp:Chart>

In the first section there is only one chart type added to the ChartArea which is a Column Chart namely Default. We add the second chart in the code behind later. I also set some of the appearance properties in asp tag to make it look better.

Code Behind:

protected void Page_Load(object sender, EventArgs e)

{

AfterLoad();

}

private void RandomData(Series series, int numOfPoints)

{

Random rand;

// Use a number to calculate a starting value for

// the pseudo-random number sequence

rand = new Random(5);

// Generate random Y values

for (int point = 0; point < numOfPoints; point++)

{

series.Points.AddY(rand.Next(49) + 1);

}

}

public void AfterLoad()

{

// Number of data points

int numOfPoints = 5;

// Generate rundom data

RandomData(Chart1.Series["Default"], numOfPoints);

// Make Pareto Chart

MakeParetoChart(Chart1, "Default", "Pareto");

// Set chart types for output data

Chart1.Series["Pareto"].ChartType = SeriesChartType.Line;

// set the markers for each point of the Pareto Line

Chart1.Series["Pareto"].IsValueShownAsLabel = true;

Chart1.Series["Pareto"].MarkerColor = Color.Red;

Chart1.Series["Pareto"].MarkerBorderColor = Color.MidnightBlue;

Chart1.Series["Pareto"].MarkerStyle = MarkerStyle.Circle;

Chart1.Series["Pareto"].MarkerSize = 8;

Chart1.Series["Pareto"].LabelFormat = "0.#";  // format with one decimal and leading zero

// Set Color of line Pareto chart

Chart1.Series["Pareto"].Color = Color.FromArgb(252, 180, 65);

}

void MakeParetoChart(Chart chart, string srcSeriesName, string destSeriesName)

{

// get name of the ChartAre of the source series

string strChartArea = chart.Series[srcSeriesName].ChartArea;

// ensure that the source series is a column chart type

chart.Series[srcSeriesName].ChartType = SeriesChartType.Column;

// sort the data in all series by their values in descending order

chart.DataManipulator.Sort(PointSortOrder.Descending, srcSeriesName);

// find the total of all points in the source series

double total = 0.0;

foreach (DataPoint pt in chart.Series[srcSeriesName].Points)

total += pt.YValues[0];

// set the max value on the primary axis to total

chart.ChartAreas[strChartArea].AxisY.Maximum = total;

// create the destination series and add it to the chart

Series destSeries = new Series(destSeriesName);

chart.Series.Add(destSeries);

// ensure that the destination series is either a Line or Spline chart type

destSeries.ChartType = SeriesChartType.Line;

destSeries.BorderWidth = 3;

// assign the series to the same chart area as the column chart is assigned

destSeries.ChartArea = chart.Series[srcSeriesName].ChartArea;

// assign this series to use the secondary axis and set it maximum to be 100%

destSeries.YAxisType = AxisType.Secondary;

chart.ChartAreas[strChartArea].AxisY2.Maximum = 100;

// locale specific percentage format with no decimals

chart.ChartAreas[strChartArea].AxisY2.LabelStyle.Format = "P0";

// turn off the end point values of the primary X axis

chart.ChartAreas[strChartArea].AxisX.LabelStyle.IsEndLabelVisible = false;

double percentage = 0.0;

foreach (DataPoint pt in chart.Series[srcSeriesName].Points)

{

percentage += (pt.YValues[0] / total * 100.0);

destSeries.Points.Add(Math.Round(percentage, 2));

}

}

There isn’t any specific chart type for Pareto; we should make it as a combination of two different chart types called Column and Line which is done in the code behind as described below.

Random():

This function is responsible to make 5 random values between 0 to maximum 49 which is called repeatedly in different sections of the project.

 

AfterLoad():

This method is called in Page_Load event handler which is responsible to handle the whole process. Firstly, it sets 5 random values to Default series which is a column chart type. Next, it calls MakeParetoChart()   (which is described later)to create a second line chart, then, it sets some appearance properties to the new generated series.

MakeParetoChart():

This method is responsible to add the second series called Pareto to the chart area. This series is a line chart for the pareto.

And yes it is over. Hope you found it interesting.
I am looking forward to reading your comments bout this post.

MS Chart Part 2 (A brief description of different Chart-Types)

This post describes mostly about the use cases of a collection of popular chart-types. Besides, I go a bit further demonstrating how to developing it in .Net MsChart through short code snippets. If you are new to this area you can find it easier to start it with my previous post here.



Different Chart-Types:
In the previous post, I taught the basics of MsChart with two easiest chart-types; MS Chart and Bar-Chart . In this post you can read deeper about other more complex charts with short development details.

–          Pie and Doughnut Chart: Pie charts are common in business and journalism, perhaps because they are perceived as being less

Pie-Chart

Pie-Chart

“geeky” than other types of graph. However statisticians generally regard pie charts as a poor method of displaying information, and they are uncommon in scientific literature. It is mostly used in reports as just look and get the point (for top level managers and ordinary users) maybe because It is easy to distinguish but not accurate.
As easily as changing the following code of the previous article you can change your Bar-Chart to Pie-Chart:
original: MSChart.Series[“Series1”].ChartType = SeriesChartType.Column;
updated: MSChart.Series[“Series1”].ChartType = SeriesChartType.Pie;

Line-Chart

Line-Chart

–         Line Chart: A line chart is often used to visualize a trend in data over intervals of time (or other units) – a time series – thus the line is often drawn chronologically. It is mostly used by statisticians because of the accuracy and visualization.
As easily as changing the following code of the previous article you can change your Bar-Chart to Line-Chart:
original: MSChart.Series[“Series1”].ChartType = SeriesChartType.Column;
updated: MSChart.Series[“Series1”].ChartType = SeriesChartType.Line;

Area-Chart

Area-Chart

–          Area-Chart: An area chart or area graph displays graphically quantitive data. It is based on the line chart. The area between axis and line are commonly emphasized with colors, textures and hatchings. Commonly one compares with an area chart with two or more quantities. It is a bit more distracting compared with Line-Chart however it is beautiful.
As easily as changing the following code of the previous article you can change your Bar-Chart to Area-Chart:
original: MSChart.Series[“Series1”].ChartType = SeriesChartType.Column;
updated:MSChart.Series[“Series1”].ChartType = SeriesChartType.SplineArea;

Radar-Chart

Radar-Chart

–          Radar-Chart: A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point. The relative position and angle of the axes is typically uninformative. The radar chart is also known as web chart, spider chart, star chart, cobweb chart, star plot, irregular polygon, polar chart, or kiviat diagram.
One application of radar charts is the control of quality improvement to display the performance metrics of any ongoing program. They are also being used in sports to chart players’ strengths and weaknesses, where they are usually called spider charts.
As easily as changing the following code of the previous article you can change your Bar-Chart to Radar-Chart:
original: MSChart.Series[“Series1”].ChartType = SeriesChartType.Column;
updated: MSChart.Series[“Series1”].ChartType = SeriesChartType.Radar;

Funnel-Chart

Funnel-Chart

–          Funnel-Chart: Funnel charts are a type of chart, often used to represent stages in a sales process and show the amount of potential revenue for each stage. This type of chart can also be useful in identifying potential problem areas in an organization’s sales processes. A funnel chart is similar to a stacked percent bar chart. A funnel chart displays values as progressively decreasing proportions. The size of the area is determined by the series value as a percentage of the total of all values.
As easily as changing the following code of the previous article you can change your Bar-Chart to Funnel-Chart:
original: MSChart.Series[“Series1”].ChartType = SeriesChartType.Column;
updated: MSChart.Series[“Series1”].ChartType = SeriesChartType.Funnel;
To make your chart the most beautiful one in the planet, add these codes to make it look hotter. 🙂

 // Set funnel Y values style
MSChart.Series["Series1"]["FunnelStyle"] = "YIsHeight";
// Set funnel data point labels style
MSChart.Series["Series1"]["FunnelLabelStyle"] = "Outside";
// Place labels on the left side
MSChart.Series["Series1"]["FunnelOutsideLabelPlacement"] = "Left";
// Set gap between points
MSChart.Series["Series1"]["FunnelPointGap"] = "2";
// Set minimum point height
MSChart.Series["Series1"]["FunnelMinPointHeight"] = "1";
// Set 3D angle
MSChart.Series["Series1"]["Funnel3DRotationAngle"] = "7";
// Set 3D drawing style
MSChart.Series["Series1"]["Funnel3DDrawingStyle"] = "CircularBase";

This is the end. I am looking forward to reading your comments and feedbacks.

*Reference: www.wikipedia.com.