Archive

Posts Tagged ‘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.

Advertisements

MS Chart with C#

March 27, 2011 8 comments

In this article I’d like to describe MS Chart (.Net 4.0) through an example. The picture below is the final result.

MS Chart

Fig 1

Initialization:

1-      Create a temp folder to store temp image files (c:\TempImageFiles) and add some codes to your web config file.
<compilation debug="true" targetFramework="4.0">

<assemblies>

<add assembly=”System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35″/>

</assemblies>

</compilation>

<appSettings>

<add key=”ChartImageHandler” value=”storage=file;timeout=20;dir=c:\TempImageFiles\”/>

</appSettings>

<system.web>

<httpHandlers>

<add path=”ChartImg.axd” verb=”GET,HEAD,POST” type=”System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″ validate=”false” />

</httpHandlers>

</system.web>
In .Net 4.0 edition you don’t need to download and install any control to use MSChart, you just need to drag and drop it from Data section of MS Visual Studio 2010 toolbox to your form (But I really dislike doing this, it’s better to write code in source tab of your form). In order to code it, add System.Web.UI.DataVisualization.Charting namespace to your form.

In this sample I will go through coding MSChart at runtime. Once you learned this, you learned static one also.

Start Coding:

ASPX Form:

Add this code to your form, this is the only thing you need to have in your aspx form:

<asp:Chart ID="MSChart" runat="server">

</asp:Chart>

Code Behind:

Below codes are clear, you just add them in your cs file:

MSChart.Width = 900;

MSChart.Height = 600;

//It renders chart as an image and places it into an &lt;img&gt; html tag.

MSChart.RenderType = RenderType.ImageTag;

//Adds title to chart

Title t = new Title("Sample Chart", Docking.Top, new System.Drawing.Font("Tahoma", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));

MSChart.Titles.Add(t);

Chart Sections:

MS Chart has two primary sections, Series and CharArea. You can either have a design time data in these two sections or add data programmatically during runtime.

–          Series are the most important part of each chart. Every chart has at least one series. A chart is a series of numbers which can be plotted into space as X and Y points. These numbers are dependent and depict a concept together regarding an issue. Assume that this series build a sine shape line, so this sine shape line is a series then you can add another series in the same chart to depict another meaning. These two series can be used to compare two different data of the same concept.

Fig 2

Fig 3

–          ChartArea: Is a place that you want to plot your series (so it contains series). It is a collection; therefore your chart can contain multiple ChartAreas.

MSChart.Series.Add("Series1");

MSChart.Series["Series1"].ChartType = SeriesChartType.Column;

MSChart.Series["Series1"].Color = System.Drawing.Color.Goldenrod;

MSChart.Series["Series1"].YValueType = ChartValueType.Int32;

Series1 is added to the collection of MSChart.Series. Each series has some important properties. ChartType that specifies the type of chart which can be Column (Same as ours), Pie, Doughnut etc. Color is to specify color of series and YValueType is the type of values in Y axis.

MSChart.ChartAreas.Add("ChartMainArea");

After defining Series you should define ChartArea. You can easily add a chart area to the CharAreas collection.

Legends:


Legend leg = new Legend("Legend1");

MSChart.Legends.Add(leg);

MSChart.Legends[0].Alignment = System.Drawing.StringAlignment.Near;

In order to describe each series in a chart, Legends are used. To add them you can write the above code. Each ChartArea needs a legend; it automatically detects your series in a ChartArea.

Now it’s time to add data to our series:

Random _r = new Random();
for (int i = 10; i &lt; 100; i+=10)

{
int n = _r.Next(0, 100);
MSChart.Series["Series1"].Points.AddXY(i, n);

}
Points.AddXY(x,y)

is a fast method to specify data of each point directly.

Up to now the below picture is created.

MS Chart

Fig 4

Theming and Appearance:

MSChart has some appearance properties that help your chart look more attractive. (Since chart is only for reporting purpose, either management or customer will see it, so make it the most beautiful :D, don’t forget the power of feelings).

You have definitely seen 3D charts. We want to develop one.

ChartArea3DStyle chartArea3DStyle = new ChartArea3DStyle();

chartArea3DStyle.Enable3D = true;

chartArea3DStyle.LightStyle = LightStyle.Realistic;

chartArea3DStyle.Rotation = 5;

chartArea3DStyle.Inclination = 40;

chartArea3DStyle.PointDepth = 50;

MSChart.ChartAreas["ChartMainArea"].Area3DStyle = chartArea3DStyle;

ChartArea3DStyle class has some properties to style a 3D chart. Then Area3DStyle property should be assigned with a ChartArea3DStyle object. After these simple changes you’ll have the below picture.

MS Chart

Fig 5

Adding more series:

It is really easy to add more series. Just write the following code:

MSChart.Series.Add("Series2");

MSChart.Series["Series2"].ChartType = SeriesChartType.Column;

MSChart.Series["Series2"].BorderWidth = 2;

MSChart.Series["Series2"].YValueType = ChartValueType.Int32;

for (int i = 15; i <= 100; i += 10)

{

MSChart.Series["Series2"].Points.AddXY(i, i);

}
MS Chart

Fig 6

It adds a new series and adds some points to it.

Wish you enjoyed it.

Peace and love for you all

References:

http://www.datadynamics.com/Help/ActiveReports6/arCONChartSeries.html

http://archive.msdn.microsoft.com/mschart