We Keep Coding

How to show only one dashed line for Y axis at center in Microsoft chart controls? [duplicate]

This question already has an answer here:
Making a 4 sided Graph / 4 sided (Cartesian) grid In Visual Studio
(1 answer)
Closed 3 years ago.
I want to display a single dashed line along Y-axis positioned at the middle vertically. I thought of it as a trivial problem but it seems that either I don't know how to do it or it is not available as a direct option.
This is what I've tried so far
chart1.ChartAreas[0].AxisY.Enabled = AxisEnabled.True;
chart1.ChartAreas[0].AxisY.LineWidth = 1;
chart1.ChartAreas[0].AxisY.MajorGrid.Enabled = true;
chart1.ChartAreas[0].AxisY.MinorGrid.Enabled = false;
chart1.ChartAreas[0].AxisY.IsStartedFromZero = true;
chart1.ChartAreas[0].AxisY.MajorGrid.IntervalType = DateTimeIntervalType.Number;
chart1.ChartAreas[0].AxisY.MajorGrid.IntervalOffsetType = DateTimeIntervalType.Number;
chart1.ChartAreas[0].AxisY.MajorGrid.Interval = 5;
chart1.ChartAreas[0].AxisY.Interval = 5;
chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.Black;
chart1.ChartAreas[0].AxisY.MajorGrid.LineDashStyle = ChartDashStyle.Dash;
Note that I know interval property is not set according to what I want but the problem is no matter what value I set for chart1.ChartAreas[0].AxisY.Interval property chart control simply draws so many lines along Y-axis. I'd even tried normalizing my input to the range [-50, 50] and rounded them to integers but still the results are same. However, my logic of interval is working with X-axis and yielding expected results but not for Y-axes.

So I got the solution based on the example provided by TaW. Pasting here the example code I used, may it help someone.
ChartArea CA = chart1.ChartAreas[0];
Series S1 = chart1.Series[0];
S1.ChartType = SeriesChartType.Line;
CA.AxisY.Maximum = 100;
CA.AxisY.Minimum = -100;
CA.AxisY.Crossing = 0;
CA.AxisY.Interval = 10;
CA.AxisY.LineWidth = 1;
CA.AxisY.MajorGrid.Enabled = false;
CA.AxisY.MinorTickMark.Enabled = false;
The trick was to disable gridlines and show a line at the middle by setting Crossing = 0 as suggested by TaW. Note that it's only for Y-axis if anyone wants to have it for both axis than need to apply the same properties to X-axis.

Combine BarChart and PointChart

i got a Little "Problem", i want to create a Chart looking like this:
So basically
Series 1 = Normal bar Chart. Color green if it Ends before the "time max" (series2) Series 2 = just a DataPoint / Marker on top of series 1 items.
I am struggling with this though...
my Code:
chart_TimeChart.Series.Clear();
string series_timeneeded = "Time Needed";
chart_TimeChart.Series.Add(series_timeneeded);
chart_TimeChart.Series[series_timeneeded]["PixelPointWidth"] = "5";
chart_TimeChart.ChartAreas[0].AxisY.ScrollBar.Size = 10;
chart_TimeChart.ChartAreas[0].AxisY.ScrollBar.ButtonStyle = ScrollBarButtonStyles.SmallScroll;
chart_TimeChart.ChartAreas[0].AxisY.ScrollBar.IsPositionedInside = true;
chart_TimeChart.ChartAreas[0].AxisY.ScrollBar.Enabled = true;
chart_TimeChart.Series[series_timeneeded].BorderWidth = 2;
chart_TimeChart.Series[series_timeneeded].ChartType = SeriesChartType.StackedBar;
chart_TimeChart.Series[series_timeneeded].YValueType = ChartValueType.Time;
chart_TimeChart.ChartAreas[0].AxisY.LabelStyle.Format = "HH:mm:ss";
chart_TimeChart.Series[series_timeneeded].XValueType = ChartValueType.String;
for (int i = 0; i < MaxNumber; i++)
{
chart_TimeChart.Series[series_timeneeded].Points.AddXY("item"+ " " + (i + 1).ToString(), DateTime.Now.Add(Timespans[i]));
}
chart_TimeChart.Series.Add(series_FinishTime);
chart_TimeChart.Series[series_FinishTime].ChartType = SeriesChartType.StackedBar;
chart_TimeChart.Series[series_FinishTime].BorderWidth = 0;
chart_TimeChart.Series[series_FinishTime].MarkerSize = 15;
chart_TimeChart.Series[series_FinishTime].MarkerStyle = MarkerStyle.Square;
chart_TimeChart.Series[series_FinishTime].MarkerColor = Color.Black;
chart_TimeChart.Series[series_FinishTime].YValueType = ChartValueType.DateTime;
chart_TimeChart.Series[series_FinishTime].XValueType = ChartValueType.String;
for (int i = 0; i < MaxNumber; i++)
{
DateTime YPosition = GetFinishTime(i);
chart_TimeChart.Series[series_FinishTime].Points.AddXY("item"+ " " +(i+1).ToString(), YPosition);
}
but this only Displays the 2nd series on top of the first one but the first one isnt visible anymore. The Maker of series 2 isnt shown but instead the bar is (eventhough i made borderwidth to 0). In my opinion/thinking i just have to make the "bar" of series 2 invisible and just Show the marker Points for series 2.
Any ideas?
Update:
string seriesname = Name+ i.ToString();
chart_TimeChart.Series.Add(seriesname);
chart_TimeChart.Series[seriesname].SetCustomProperty("DrawSideBySide", "false");
chart_TimeChart.Series[seriesname].SetCustomProperty("StackedGroupName", seriesname);
chart_TimeChart.Series[seriesname].ChartType = SeriesChartType.StackedBar; //Y and X are exchanged
chart_TimeChart.Series[seriesname].YValueType = ChartValueType.Time;
chart_TimeChart.ChartAreas[0].AxisY.LabelStyle.Format = "HH:mm:ss";
chart_TimeChart.Series[seriesname].XValueType = ChartValueType.String;
DateTime TimeNeeded = DateTime.Now.Add(List_AllLiniengroupsTimespans[k][i]);
DateTime TimeMax = GetFinishTime(k, i);
TimeSpan TimeDifference = TimeNeeded - TimeMax;
if (TimeNeeded > TimeMax) //All good
{
chart_TimeChart.Series[seriesname].Points.AddXY(seriesname, TimeNeeded); //Time till finish
chart_TimeChart.Series[seriesname].Points[0].Color = Color.Blue;
chart_TimeChart.Series[seriesname].Points[0].SetCustomProperty("StackedGroupName", seriesname);
chart_TimeChart.Series[seriesname].Points.AddXY(seriesname, TimeNeeded.Add(TimeDifference)); //time left
chart_TimeChart.Series[seriesname].Points[1].Color = Color.Red;
chart_TimeChart.Series[seriesname].Points[1].SetCustomProperty("StackedGroupName", seriesname);
}
else if (TimeMax > TimeNeeded) //wont make it in time
{
chart_TimeChart.Series[seriesname].Points.AddXY(seriesname, TimeNeeded); //time till still okay
chart_TimeChart.Series[seriesname].Points[0].Color = Color.Blue;
chart_TimeChart.Series[seriesname].Points[0].SetCustomProperty("StackedGroupName", seriesname);
chart_TimeChart.Series[seriesname].Points.AddXY(seriesname, TimeNeeded.Add(TimeDifference)); //Time that is too much
chart_TimeChart.Series[seriesname].Points[1].Color = Color.Green;
chart_TimeChart.Series[seriesname].Points[1].SetCustomProperty("StackedGroupName", seriesname);
}
else if (TimeMax == TimeNeeded) //fits exactly
{
chart_TimeChart.Series[seriesname].Points.AddXY(seriesname, TimeNeeded);
chart_TimeChart.Series[seriesname].Points[0].Color = Color.DarkOrange;
chart_TimeChart.Series[seriesname].Points[0].SetCustomProperty("StackedGroupName", seriesname);
}
the Code will be displayed as:
but i want it to look like this:

!! See the update below !!
If you really want to create a StackedBar chart, your chart has two issues:
If you want to stack datapoints they need to have meaningful x-values; without them how can it know what to stack on each other?
You add strings, which look fine but simply don't work. That is because the DataPoint.XValue field is double and when you add string into it it is set to 0 !! Your string is copied to the Label but otherwise lost.
So you need to come up with a suitable numeric value you use for the x-values..
And you also need to group the series you want to stack. For this there is a special property called StackedGroupName which serves to group those series that shall be stacked.
Here is how you can use it:
yourSeries1.SetCustomProperty("StackedGroupName", "Group1");
For a full example see this post !
It also shows one way of setting the Labels with string values of your choice..
This is the way to go for real StackedBar charts. Your workaround may or may not work. You could try to make the colors transparent or equal to the chart's backcolor; but it won't be more than a hack, imo.
Update
I guess I have misread the question. From what I see you do not really want to create a stacked chart.
Instead you struggle with these issues:
displaying bars at the same y-spot
making some bars invisible
displaying a vertical line as a marker
Let's tackle each:
Some column types including all Bars, Columns and then some have a little known special property called DrawSideBySide.
By default is is set to Auto, which will work like True. This is usually fine as we don't want bars to sit upon each other, effectively hiding all or part of the overlaid points.
But here we do want them to share the same y-position, so we need to set the property to false for at least one Series; the others (on Auto) will follow..:
You can do it either like this:
aSeries["DrawSideBySide"] = "false";
or like this:
aSeries.SetCustomProperty("DrawSideBySide", "false");
Next we hide the overlaid Series; this is simple:
aSeries.Color = Color.Transparent;
The last issue is displaying a line marker. There is no such MarkerStyle, so we need to use a custom style. For this we need to create a suitable bitmap and add it as a NamedImage to the chart's Images collection.
This sounds more complicated than it is; however the MarkerImage will not be scaled, so we need to created suitable sizes whenever we resize the Chart or add/remove points. I will ignore this complication for now..
int pointCount = 10;
Bitmap bmp = new Bitmap(2, chart.ClientSize.Height / pointCount - 5);
using (Graphics g = Graphics.FromImage(bmp)) g.Clear(Color.Black);
NamedImage marker = new NamedImage("marker", bmp);
chart.Images.Clear(); // quick & dirty
chart.Images.Add(marker);
Here is the result:
A few notes:
I would recommend to use variables for all chart elements you refer to repeatedly instead of using indexed references all the time. Less code, easier to read, a lot easier to maintain, and probably better performance.
Since your code called for the visible datapoints to be either red or green the Legend will not show a good representation. See here for an example of drawing a multi-colored legend item..
I used the chart height; this is not really recommended as there may be Titles or Legends or even more ChartAreas; instead you should use the height of the ChartArea, or even more precise, the height of the InnerPlotPosition. You would need to convert those from percentages to pixels. Not too hard, see below or see here
or here for more examples!
The markers should be adapted from the Resize and probably from the AxisViewChanged events. Putting it in a nice function to call (e.g. void setMarkerImage(Chart chart, Series s, string name, int width, Color c)) is always a good idea.
If you need to adapt the size of the marker image repeatedly, you may want to write better code for clearing the old one; this should include disposing of the Bitmap that was used before..
Here is an example:
var oldni = chart.Images.FindByName("marker");
if (oldni != null)
{
oldni.Image.Dispose();
chart.Images.Remove(oldni);
oldni.Dispose();
}
In some situations one needs to nudge the Chart to update some of its properties; RecalculateAxesScale is one such nudge.
Example for calculating a suitable marker height:
ChartArea ca = chart.ChartAreas[0];
ca.RecalculateAxesScale();
float cah = ca.Position.Height;
float iph = ca.InnerPlotPosition.Height;
float h = chart3.ClientSize.Height * cah / 100f * iph / 100f;
int mh = (int)(h / s.Points.Count);
Final note: The original answer stressed the importance of using meaningful x-values. Strings are useless! This was important for stacking bars; but it is equally important now, when we want bars to sit at the same vertical positions! Adding the x-values as strings is again resulting in nonsense..
(Since we have Bars the x-values go along the vertical axis and vice versa..)

C# MSChart - charts area limits

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;

Aligning and Synchronising X Axes in MS Chart Doesn't Work

I have a chart control (from System.Windows.Forms.DataVisualization) with two chart areas. ChartArea2 is aligned to ChartArea1 as follows:
ChartArea2.AlignWithChartArea = "ChartArea1";
ChartArea2.AlignmentOrientation = AreaAlignmentOrientations.Vertical;
ChartArea2.AlignmentStyle = AreaAlignmentStyles.All;
This works well except the X Axes are not aligned, despite being included in the AlignmentStyle. Instead, their minimum, maximum, interval, etc remain independent and are set according to the datapoints.
I need the X Axes to be identical, i.e. min, max, interval, etc. I can set these properties in code to force them to be identical. However, as soon as I zoom into ChartArea1, then the X Axes become misaligned again.
Is there a simple way for the X Axes to mirror each other regardless of the zoom level?

Well, they actually are aligned , i.e. sit at the same position regardless of their labels but they don't have the same range.
You don't see the alignment of the X-Axes when the sit vertically but look at the Y-Axes: They have different Font sizes but sit at the same horizontal position!
If you want to show the same range you need to set the range, as you wrote, by setting the Minimum & Maximum from the default NaN (which here means Automatic) to some values.
And when you zoom one the other will zoom in parallel automatically as long as AreaAlignmentStyles.AxesView or AreaAlignmentStyles.All are selected.
So what you need is the combination of a non-automatic, explicit range (for the unzoomed state) and and a suitable AreaAlignmentStyle (for the zoomed state.)
Note that the AlignmentStyle needs to be made only for one of the two ChartAreas. But the Minimum/Maximum values need to be set for both:
ChartArea CA1 = chart1.ChartAreas[0];
ChartArea CA2 = chart1.ChartAreas.Add("ChartArea2");
// 2nd CA aligns to the 1st one:
CA2.AlignWithChartArea = "ChartArea1";
CA2.AlignmentOrientation = AreaAlignmentOrientations.Vertical;
CA2.AlignmentStyle = AreaAlignmentStyles.All;
// both have the same range:
CA1.AxisX.Maximum = 30;
CA2.AxisX.Maximum = 30;
CA1.AxisX.Minimum = 0;
CA2.AxisX.Minimum = 0;
// both are interactively zoomable:
CA1.AxisX.ScaleView.Zoomable = true;
CA1.AxisX.ScrollBar.Enabled = true;
CA1.CursorX.IsUserSelectionEnabled = true;
CA2.AxisX.ScaleView.Zoomable = true;
CA2.AxisX.ScrollBar.Enabled = true;
CA2.CursorX.IsUserSelectionEnabled = true;
In a zoomed state both ChartAreas still show the same range and have the same ScaleView.ViewMinimum / ScaleView.ViewMaximum:
Code to test the ScaleView values:
private void chart1_AxisViewChanged(object sender, ViewEventArgs e)
{
AxisScaleView ASV1X = chart1.ChartAreas[0].AxisX.ScaleView;
AxisScaleView ASV2X = chart1.ChartAreas[1].AxisX.ScaleView;
label1.Text = "ScaleViews Min/Max: " + ASV1X.ViewMinimum + " - " + ASV1X.ViewMaximum +
" | " + ASV2X.ViewMinimum + " - " + ASV2X.ViewMaximum ;
}
Note that to keep not only the value ranges aligned but also the visual display of the Axes you need to use the AlignmentStyle = AreaAlignmentStyles.All;, not just AxisView or else great differences in the values' formatting results or in the number of points to display can move the Y-Axis and make the X-Axes look misaligned!

Setting ChartArea.AxisX.IsMarginVisible = false; will solve the problem

Draw a Graph in C# using zedGraph

I need to create a graph that have the following properties:
The X Axis is for schools names.
The Y Axis is for classes names.
In Point (x,y) I need to put a dot that it's color will represent the number of students (darker means more students).
I'm using ZedGraph (using that sample: http://zedgraph.org/wiki/index.php?title=Gradient-By-Value_Demo), but I don't know how to put the dot (and to determine it's dark-level) in the correct position (compare it to school's name and class's name).
Also, I don't know how to make the X and Y axis to show the school's name and the class's name.
How can I do that? (It's NOT have to be in zedGraph).
many thanks!

The problem is that ZedGraph is treating a Text-type scale in a little bit strange way. So it's almost impossible to display correctly data when you have both scales of Text type.
But you can fool ZG a little bit.
The whole trick is to display the data using coordinates of hidden scale, while displaying second, fake scale.
string[] schools = { "A", "B", "C" };
string[] classes = { "cl. 1", "cl. 2", "cl. 3" };
var pane = zg1.GraphPane;
Random x = new Random();
// Hide the basic scale, show the second with text labels
pane.X2Axis.Type = AxisType.Text;
pane.X2Axis.IsVisible = true;
pane.Y2Axis.Type = AxisType.Text;
pane.Y2Axis.IsVisible = true;
pane.XAxis.Scale.IsVisible = false;
pane.YAxis.Scale.IsVisible = false;
pane.X2Axis.Scale.TextLabels = schools;
pane.Y2Axis.Scale.TextLabels = classes;
// Main problem - synchronize the scales correctly
pane.XAxis.Scale.Min = -0.5;
pane.XAxis.Scale.Max = schools.Count() - 0.5;
pane.YAxis.Scale.Min = -0.5;
pane.YAxis.Scale.Max = classes.Count() - 0.5;
pane.YAxis.MajorGrid.IsZeroLine = false;
// generate some fake data
PointPairList list = new PointPairList();
for(int i=0;i<schools.Count();i++)
for (int j = 0; j < classes.Count(); j++)
{
list.Add(new PointPair(i, j, x.Next(30)));
}
var pointsCurve = pane.AddCurve("", list, Color.Transparent);
pointsCurve.Line.IsVisible = false;
// Create your own scale of colors.
pointsCurve.Symbol.Fill = new Fill(new Color[] { Color.Blue, Color.Green, Color.Red });
pointsCurve.Symbol.Fill.Type = FillType.GradientByZ;
pointsCurve.Symbol.Fill.RangeMin = 0;
pointsCurve.Symbol.Fill.RangeMax = 30;
pointsCurve.Symbol.Type = SymbolType.Circle;
pane.AxisChange();
zg1.Refresh();

I don't do quite this in my project, but I do change the color based on some criteria. It should be pretty easy for you to modify. Look at the svn depot in stochfit.sourceforge.net at the graphing classes. You may also want to take a look at the version of zedgraph I have in my depot, some image capture and a scaling bug were fixed.