Creating multiple charts and the relation between Chart, Series, ChartArea - c#

I have been generating charts using MSChart for some time now, but I have never created multiple charts within one chart object. Thinking about this task has revealed a gap in my knowledge.
How I think about creating a chart
Create Chart object
Add ChartArea object to Chart object
Create Series and add data
Add Series to Chart
The object structure ends up looking like this
Chart
/ \
ChartArea Series
As far as I have been concerned in the past, ChartArea is simply the area I set up the labels and that sort of thing. To add another, I will be wanting to add another ChartArea and one or more series.
___________________ Chart ___________________
/ / \ \
ChartArea0 ChartArea1 Series0 Series1
How do I associate Series0 to ChartArea0? It would make sense to add a Series to a ChartArea, but that is not possible. For what reason is it beneficial to associate a Series with a Chart, rather than a ChartArea?

Series are associated with chart areas like so
Chart Chart0 = new Chart();
ChartArea ChartArea0 = new ChartArea("name");
Chart0.ChartAreas.Add(ChartArea0);
Series Series0 = new Series();
Chart0.Series.Add(Series0);
// link series to area here
Series0.ChartArea = "name";

A Chart can be divided into multiple Areas where one area can be a Bar chart other can be Pie chart.
System.Windows.Forms.DataVisualization.Charting.Chart chart1 = new System.Windows.Forms.DataVisualization.Charting.Chart();
System.Windows.Forms.DataVisualization.Charting.ChartArea chartarea1 = new System.Windows.Forms.DataVisualization.Charting.ChartArea();
System.Windows.Forms.DataVisualization.Charting.ChartArea chartarea2 = new System.Windows.Forms.DataVisualization.Charting.ChartArea();
chart1.ChartAreas.Clear();
chart1.ChartAreas.Add(chartarea1);
chart1.ChartAreas.Add(chartarea2);
Then you create some series; each series will be associated with a chart area. if you create 5 series and associate series1, series2 and series3 to chartarea1 then those series must be same or compatible chart type. otherwise Runtime error will occur. Multiple series In same Chart Area may have different x axis component in some cases. for example in the following code: series1 has 3 data points and series2 has 5, in this case chartarea will show first three x values from series1 and next two x values from series2.
chart1.Series.Clear();
chart1.Series.Add("Series1");
chart1.Series[0].ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Column;
chart1.Series[0].ChartArea = chart1.ChartAreas[0].Name;
chart1.Series[0].Points.AddXY("Point1", 20);
chart1.Series[0].Points.AddXY("Point2", 50);
chart1.Series[0].Points.AddXY("Point3",30);
chart1.Series.Add("Series2");
chart1.Series[1].ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Column;
chart1.Series[1].ChartArea = chart1.ChartAreas[0].Name;
chart1.Series[1].Points.AddXY("newname1", 10);
chart1.Series[1].Points.AddXY("newname2", 20);
chart1.Series[1].Points.AddXY("newname3", 30);
chart1.Series[1].Points.AddXY("newname4", 40);
chart1.Series[1].Points.AddXY("newname5", 50);
this.tabPage3.Controls.Add(chart1);
chart1.Dock = System.Windows.Forms.DockStyle.Fill;

Previous answer breaks width of chart, this example uses elementposition objects, specifically set with to 100% (all nr's are %()
This example: "Two Chart Areas, vertically divided 80/20":
ElementPosition ePos = new ElementPosition();
ePos.Width = 100; ePos.Y = 0; ePos.X = 2; ePos.Height = 80;
ElementPosition ePos2 = new ElementPosition();
ePos2.Width = 100; ePos2.Y = 80; ePos2.X = 2; ePos2.Height = 20;
chartCandleStick.ChartAreas[0].Position = ePos;
chartCandleStick.ChartAreas[1].Position = ePos2;

Related

Programmatic Creation of Chart and setting of its legends

I am creating Charts pie, bar and line and want to set their Legends along with valuea,Title of legend and point the values on Charts. how could i do so?
Usually you don't need to add a Legend as there is already a default one. But since you are creating a Chart in code you indeed have to code a little more. Adding a Legend is one of thoses things.
You have created a legend but instead of adding it you create another legend still. Instead write: chartA.Legends.Add(legend)
Note that the documentation (including Intellisense) is wrong on the constructor with a string paramenter! It works as expected, not as documented on MSDN!
What I suggested (chartA.Legends[0].Title = "someString";) works fine provided you have done all the other things you need:
You will also have to create (at least)
One ChartArea
One Series along with the ChartTypeyou want an..
..in order to make it show you also have to add a DataPoint.
Example:
Legend legend = new Legend();
Chart chartA = new Chart(); // <<---!
chartA.BackColor = Color.White;
chartA.Width = 370;
chartA.Height = 250;
chartA.Location = new Point(48, 35);
chartA.Name = textBox1.Text;
chartA.Legends.Add(legend); // <<---!
legend.Title = "Age of The Employees"; // <<---!
chartA.ChartAreas.Add(new ChartArea("ca")); // <<---!
chartA.ChartAreas["ca"].BackColor = Color.LightSeaGreen;
Series s1 = chartA.Series.Add("s1"); // <<---!
s1.ChartType = SeriesChartType.Pie;
s1.Points.AddY(12);
s1.Points.AddY(32);
..
The first Legend will automatically be filled with either one LegendItem per Series or (if you have a Pie chart) one item per DataPoint
Btw: You may have additional Legends but you will have to take care of their content and their position/docking..
Update: If you want to you can take control of both the Legend's Font and the TitleFont; It works the usual way, i.e. by creating a new Font, either from scratch of from the FontFamily of a Font:
legend.Font = new Font("Consolas", 10f);
legend.TitleFont = new Font(legend.Font.FontFamily, 14f);
You may want to insert a newline character (\n) into the title if it is too long to fit into a vertical Legend..

Align two charts-areas one on top of the other [duplicate]

I have one Chart and three ChartArea that are aligned in view, zoom, cursor:
this is my related previous post. All things works well except that the three ChartArea are not aligned at the beginning. Following an image of the problem:
I think it depends from the digit's number of Y values axis. From some research I try the following configuration:
// selezione e zoom
dlChart.ChartAreas[VOLTAGE_AREA].CursorX.Interval = 1;
dlChart.ChartAreas[VOLTAGE_AREA].CursorX.IsUserEnabled = true;
dlChart.ChartAreas[VOLTAGE_AREA].CursorX.IsUserSelectionEnabled = true;
// generale
dlChart.ChartAreas[VOLTAGE_AREA].AxisX.LabelStyle.Format = "dd/MM/yy - HH:mm:ss.fff";
dlChart.ChartAreas[VOLTAGE_AREA].AxisX.ScaleView.Zoomable = true;
dlChart.ChartAreas[VOLTAGE_AREA].AxisY.LabelStyle.Format = "D5";
In witch the last row:
dlChart.ChartAreas[VOLTAGE_AREA].AxisY.LabelStyle.Format = "D5";
should specifies always five digits. This mitigate in some way the problem but it doesn't desappers. Furthermore with this row the program starts to throws very lots exceptions of form below any time I scroll the graph:
Generate exception: 'System.FormatException' in mscorlib.dll
Does anyone knows the solution for this problem? Thanks in advance.
You may want to take control of the size of the InnerPlotPosition.
(But Baddack's solution is simpler and more flexible!)
Here is an example:
After setting up a Chart with three CharAreas, setting Minima and Maxima as well as adding one DataPoint to each we get this :
Your issue is showing clearly.
After setting the InnerPlotPosition to a fixed percentage it looks like this:
Here is how to set the InnerPlotPosition size:
ca1.InnerPlotPosition = new ElementPosition(10, 5, 80, 90);
ca2.InnerPlotPosition = new ElementPosition(10, 5, 80, 90);
ca3.InnerPlotPosition = new ElementPosition(10, 5, 80, 90);
Note that both ChartArea.Position and ChartArea.InnerPlotPosition are called 'Position' but really are areas of percentages referring to the respective containers!
So my example has a Left distance of 10%, a Top space of 5% and Width of 80% and Height of 90%. Which leaves 10% space at the Bottom and 5% at the Right. Note: All are referring to the ChartAreas not the ClientArea of the Chart! (Which are still at Auto, which maximizes the size.)
This was my initial setup:
ChartArea ca1 = chart.ChartAreas[0];
ChartArea ca2 = chart.ChartAreas[1];
ChartArea ca3 = chart.ChartAreas[2];
Series s1 = chart.Series[0];
Series s2 = chart.Series.Add("Series2");
Series s3 = chart.Series.Add("Series3");
s2.ChartArea = ca2.Name;
s3.ChartArea = ca3.Name;
s1.Points.AddXY(1, 7);
s2.Points.AddXY(1, 777);
s3.Points.AddXY(1, Math.PI);
Have you tried using the chart area alignment options? I would try something like:
//define inner plot position of the chart areas
dlChart.ChartAreas[0].InnerPlotPosition.Auto = true;
dlChart.ChartAreas[1].InnerPlotPosition.Auto = true;
dlChart.ChartAreas[2].InnerPlotPosition.Auto = true;
//set our second chart area's alignments to match our first chart area
dlChart.ChartAreas[1].AlignmentOrientation = AreaAlignmentOrientations.Vertical;
dlChart.ChartAreas[1].AlignmentStyle = AreaAlignmentStyles.All;
dlChart.ChartAreas[1].AlignWithChartArea = dlChart.ChartAreas[0].Name;
//set our third chart area's alignments to match our first chart area
dlChart.ChartAreas[2].AlignmentOrientation = AreaAlignmentOrientations.Vertical;
dlChart.ChartAreas[2].AlignmentStyle = AreaAlignmentStyles.All;
dlChart.ChartAreas[2].AlignWithChartArea = dlChart.ChartAreas[0].Name;

In Box Plot Chart, how can I set the average point to Diamond shape instead of standard Line shape

Does anyone know how can I set the box plot chart average point as a diamond shape instead of a normal line shape?
This is the output I want to achieve:
I researched online for a quite awhile and found some properties like point marker and marker style but still couldn't get the output I want...
This is my latest code:
Chart Chart1= new Chart();
Chart1.DataSource = dt;
Chart1.Width = 800;
Chart1.Height = 490;
Chart1.Series.Add(new Series());
Chart1.Series[0].ChartType = SeriesChartType.BoxPlot;
**Chart1.Series.Add(new Series());
Chart1.Series[1].ChartType = SeriesChartType.Point;**
List<object> List1 = dt.AsEnumerable().ToList<object>();
foreach (DataRow row in dt.Rows)
{
Chart1.Series[0].Points.AddXY(row["CUSTOMER"],
new object[] { row["MIN"], row["MAX"], row["25TH_PERCENTILE"],
row["75TH_PERCENTILE"], row["AVG"], row["50TH_PERCENTILE"] });
Chart1.Series[1].Points.AddXY(row["CUSTOMER"],
new object[] { row["AVG"]});
}
Chart1.Series[0]["BoxPlotShowAverage"] = "false";
//create chartareas
ChartArea ca= new ChartArea();
ca.AxisX = new Axis();
ca.AxisY = new Axis();
//databind
Chart1.DataBind();
Chart1.Visible = true;
This is the output I get:
Issue Faced Now: Same Average Value for Every Series in the Chart Even Though There is Different Average Value in Each Row of DataTable(dt).
As per MSDN - Box Plot Chart:
Chart Characteristics:
Supports markers: NO
One hacky way of doing it is to hide the "Avg" from the box plot chart by doing:
Chart1.Series[0]["BoxPlotShowAverage"] = "false";
and then add a separate Point Series containing the average value:
Chart1.Series[1].Points.AddXY(row["Customer"], new object[] { row["Avg"] });
and you'll get something similar to what you're looking for:

How do I add additional series to a Excel Chart using C#

I am trying to add an additional data series to the chart this shows CPU threshold, I can get the range and create the graph with out the threshold on it, but I don't know how to add the threshold value to the chart.
do I need to create another chart object? can I use the existing and just add teh new range in?
How are you creating the chart? -- see code below.
Is this chart already created in the excel file, and you want to modify the chart in the excel file? yes the chart is already in a Excel file.
Excel.ChartObjects sCPUChart;
Excel.ChartObject sCPUChartObjects;
sCPUChart = sDBSheet.ChartObjects(Type.Missing);
sCPUChartObjects = sCPUChart.Add(49, 15, 360, 215);
Excel.Chart sChartCPU;
sChartCPU = sCPUChartObjects.Chart;
sChartCPU.SetSourceData(cpuChartRange, Missing.Value);
sChartCPU.ChartWizard(Source: cpuChartRange, Gallery: Excel.XlChartType.xlLine, Format: 2, HasLegend: true);
sChartCPU.Location(Excel.XlChartLocation.xlLocationAsObject, sDBSheet.Name);
//CPU Chart Axis
Excel.Axis xSChartCPUAxis;
xSChartCPUAxis = sChartCPU.Axes(Excel.XlAxisType.xlCategory, Excel.XlAxisGroup.xlPrimary);
Excel.Axis ySChartCPUAxis;
ySChartCPUAxis = syChartCPU.Axes(Excel.XlAxisType.xlValue, Excel.XlAxisGroup.xlPrimary);
ySChartCPUAxis.HasMajorGridlines = true;
ySChartCPUAxis.MaximumScaleIsAuto = true;
//Set Summary CPU Series
Excel.Series sCPUSeries = sChartCPU.SeriesCollection(1);
sCPUSeries.Name = "CPU";
//-------
// this is where I am having my issue
//I don't know how to add the threshold line to the graph with the existing graph being displayed
//sChartCPU.set_HasAxis(Excel.XlAxisType.xlCategory, Excel.XlAxisGroup.xlSecondary, true);
//summaryChartCPU.SetSourceData(summaryMemThreshold, Type.Missing); -- things break
//-------
I have now done the following:
Excel.SeriesCollection threshold = sChartCPU.sseriesCollection();
Excel.Series line = threshold.NewSeries();
line.Formula = "=SERIES(Summ!$D$54,Summ!$C$55:$C$56,Summ!$D$55:$D$56)";
line.ChartType = Excel.XlChartType.xLScatterLinesNoMarkers;
when the threshold line is created I have the following
the values I have in cells D54 - threshold
C55 = 0
C56 = 1
D55 = 75
D56 = 75
I don't know how to remove the 2 additional axis that appear in chart
If I comment out the line.ChartType, then the axis is correct but I only get one threshold data point ?? I don't understand why.
var series = (SeriesCollection) yourChart.SeriesCollection();
var line = series.NewSeries();
line.Name = "CPU Threshhold";
//line.Values = ...;
//line.XValues = ...;
//formatting
Here's the solution I found to the OP's question of how to remove the secondary axes:
Excel.SeriesCollection threshold = sChartCPU.sseriesCollection();
Excel.Series line = threshold.NewSeries();
// line.Formula = "=SERIES(Summ!$D$54,Summ!$C$55:$C$56,Summ!$D$55:$D$56)";
// instead of setting the Formula, I set the series values
line.Values = "='Summ!'$D$55:$D$56";
line.XValues = "='Summ!'$C$55:$C$56";
line.ChartType = Excel.XlChartType.xlXYScatterLinesNoMarkers;
// creates Axis objects for the secondary axes
Excel.Axis YAxis2 = (Excel.Axis)sChartCPU.Axes(Excel.XlAxisType.xlValue, Excel.XlAxisGroup.xlSecondary);
Excel.Axis XAxis2 = (Excel.Axis)sChartCPU.Axes(Excel.XlAxisType.xlCategory, Excel.XlAxisGroup.xlSecondary);
// remove the major and minor tick marks from the secondary (top) x-axis
XAxis2.MajorTickMark = Excel.XlTickMark.xlTickMarkNone;
XAxis2.MinorTickMark = Excel.XlTickMark.xlTickMarkNone;
// change the secondary x-axis max range to 1.0 so the bar will go all the way to the right side
XAxis2.MaximumScale = 1.0;
// delete the secondary x-axis labels
XAxis2.TickLabels.Delete();
// I chose to delete the secondary y-axis so the line would graph on the primary axis scale
YAxis2.Delete();

Custom X/Y grid line in MSChart control

I have a C# windows form with a simple 2D line chart that I want to add custom X or Y axis markers to, and draw a custom grid line (in a highlighted color, dotted line for example). I have looked at the customLabels property, but this seems to override the default grid, which I still want to display. This is to illustrate something like a threshold or a cutoff. How can I do this with the MSChart control?
Many thanks
Could you achieve what you want with striplines?
In the ms chart samples (get it here http://archive.msdn.microsoft.com/mschart), inside the "Using Custom Labels" section, they use striplines on the Y axis which are quite effective at highlighting ranges of values. They also do not affect the grid ... I checked that by changing the sample code a little so I could easily move the boundaries of the striplines around (see below).
double low_med = 17; // was 30
double med_hi = 92; // was 70
// Set Y axis custom labels
axisY.CustomLabels.Add(0, low_med, "Low");
axisY.CustomLabels.Add(low_med, med_hi, "Medium");
axisY.CustomLabels.Add(med_hi, 100, "High");
StripLine stripLow = new StripLine();
stripLow.IntervalOffset = 0;
stripLow.StripWidth = low_med;
stripLow.BackColor = Color.FromArgb(64, Color.Green);
StripLine stripMed = new StripLine();
stripMed.IntervalOffset = low_med;
stripMed.StripWidth = med_hi - low_med;
stripMed.BackColor = Color.FromArgb(64, Color.Orange);
StripLine stripHigh = new StripLine();
stripHigh.IntervalOffset = med_hi;
stripHigh.StripWidth = 100 - med_hi;
stripHigh.BackColor = Color.FromArgb(64, Color.Red);
axisY.StripLines.Add(stripLow);
axisY.StripLines.Add(stripMed);
axisY.StripLines.Add(stripHigh);

Categories

Resources