We Keep Coding

Dynamically add Chart to Windows Forms - shows up blank

I'm trying to add a Chart control dynamically to a Form (using C#, this should all be .NET 4.0), but it's always blank (only the background color shows). I tried the same code in a Form that already has a control and it works, so I imagine it's some initialization function I should call (I tried Invalidate() on the control and Refresh() on both control and the panel it's being placed in, made no difference). I went through the few similar posts I found, tried throwing in any other commands they used (BeginInit() is from one such post) but no luck so far. Any ideas?
BTW I want to display 6-9 charts (position, speed and acceleration in 3D space) so I'd rather add them dynamically than have 9 sets of assignments. Here's the code that adds the charts to the panel:
foreach (KeyValuePair<string, List<double>> p in b.storedValues)
{
Control c = getChartForData(p);
panel1.Controls.Add(c);
c.Invalidate();
c.Refresh();
break;
}
And the function that creates each chart:
private Chart getChartForData(KeyValuePair<string, List<double>> data)
{
Chart c = new Chart();
((System.ComponentModel.ISupportInitialize)c).BeginInit();
c.Series.Clear();
c.BackColor = Color.White;
c.Height = 300;
c.Width = 500;
c.Palette = ChartColorPalette.Bright;
Series s = new Series(data.Key);
s.ChartType = SeriesChartType.Spline;
double maxValue = 0;
//NOTE: Going logarithmic on this, too big numbers
for (int i = 0; i < data.Value.Count; i++)
{
maxValue = Math.Max(Math.Log10(data.Value[i]), maxValue);
}
for (int i = 0; i < data.Value.Count; i++)
{
s.Points.AddXY(i,Math.Log10(data.Value[i]) * c.Height / maxValue);
}
c.Series.Add(s);
return c;
}
Many thanks in advance.

When you create a Chart yourself, in code, it does not contain any ChartArea.
Therefore, nothing is displayed.
I'm guessing that the designer generates some code to initialize a default chart area when you drag and drop a chart control onto the form.
Also, you should really let the chart control handle the layout, instead of calculating the desired position of each point based on the height of the chart control.
I would go as simple as possible to get something that's working, and then you can tweak the range of the axis afterwards. You can also set an axis to be logarithmic.
Start with trying out this minimal version, and make sure that displays something, before you complicate things. This works for me.
private Chart getChartForData(string key, List<double> data)
{
Chart c = new Chart();
Series s = new Series(key);
s.ChartType = SeriesChartType.Spline;
for (int i = 0; i < data.Count; i++)
{
s.Points.AddXY(i, data[i]);
}
c.Series.Add(s);
var area = c.ChartAreas.Add(c.ChartAreas.NextUniqueName());
s.ChartArea = area.Name;
// Here you can tweak the axis of the chart area - min and max value,
// where they display "ticks", and so on.
return c;
}

How to add right border of grid in Chart contol

Here is my code for setting properties of chart which is attached above:
chart2.ChartAreas[0].CursorX.IsUserEnabled = true;
chart2.ChartAreas[0].CursorX.IsUserSelectionEnabled = true;
chart2.ChartAreas[0].AxisX.ScaleView.Zoomable = true;
chart2.ChartAreas[0].AxisX.Title = "t";
chart2.ChartAreas[0].AxisY.Title = "w(t)";
chart2.ChartAreas[0].AxisX.Minimum = classes[0].First();
chart2.ChartAreas[0].AxisX.Maximum = classes[m - 1].Last();
chart2.ChartAreas[0].AxisX.Interval = delta_t;
chart2.ChartAreas[0].AxisX.LabelStyle.Format = "{0:0.####}";
I need to add right border of grid so that it will be as it is shown below:

The right border is missing since your data don't nicely fit into the area.
There are many ways to fix this.
Here is the simplest one:
chart2.ChartAreas[0].AxisY2.Enabled = AxisEnabled.True;
chart2.ChartAreas[0].AxisY2.LabelStyle.Enabled = false;
This adds a secondary Y-Axis and turns off its labels.
You can style it as needed:
chart2.ChartAreas[0].AxisY2.MajorTickMark.Enabled = false;
chart2.ChartAreas[0].AxisY2.LineWidth = 3;
You could also draw a line or add an annotation but this is by far the easiest solution.

Winform Chart control - to keep displaying same bar width for different data

I'm familiar with C# and Winform, but new to Chart control. I'm using VS2013 built in System.Windows.Forms.DataVisualization.Charting.Chart to display bar for two points. Here's simply the code:
private void Form1_Load(object sender, EventArgs e)
{
Chart c = new Chart();
c.Dock = DockStyle.Fill;
ChartArea a = new ChartArea();
a.AxisX.Minimum = 0;
a.AxisX.Maximum = 4;
a.AxisY.Minimum = 0;
a.AxisY.Maximum = 2;
c.ChartAreas.Add(a);
Series s = new Series();
//*******************
s.Points.AddXY(1, 1);
//s.Points.AddXY(2, 2);
s.Points.AddXY(3, 2);
//*******************
c.Series.Add(s);
this.Controls.Add(c);
}
Please note the commented part, the points (2,2) and (3,2) are only different data, and have nothing to do with display style(I guess?). So this behavior seems very strange and so far I haven't found any solution to keep displaying (3,2) like (2,2).

You need to add the below codes in order to achieve the desired output:
1] Fix the interval for the Axis so the axis label and Grid lines do not change.
a.AxisX.Interval = 1;
2] Fix the bar width for the series. You can use PixelPointWidth to specify the width in Pixels or PointWidth in Points.
Example using PixelPointWidth:
s["PixelPointWidth"] = "20";
Also, since you are using c.Dock = DockStyle.Fill; to fill the chart into whole form, fixed width will not be good if you scale the form.
You can use MinPixelPointWidth and MaxPixelPointWidth to give the range to the width.
s["MinPixelPointWidth"] = "20";
s["MaxPixelPointWidth"] = "80";
Check this link for details on different chart elements.
Technical Reference for detailed documentation on Chart controls. This may be long but important to understand the details.

Button image sides cropped

I'm trying to fit image to button perfectly.
But the image is cropped on its right and bottom faces, see attached print screen:
I edited the button as follows:
var l_oStopImage = Image.FromFile(#"C:\Users\AmitL\Downloads\Button-2-stop-icon72p.png");
var l_oStopPic = new Bitmap(l_oStopImage , new Size(btnStopOperation.Width, btnStopOperation.Height));
btnStopOperation.Image = l_oStopPic ;
btnStopOperation.ImageAlign = System.Drawing.ContentAlignment.MiddleCenter;
btnStopOperation.TabStop = false;
btnStopOperation.FlatStyle = FlatStyle.Flat;
btnStopOperation.FlatAppearance.BorderSize = 0;
I also tried to edit the BackgroundImageLayout but none of the ImageLayouts fixed the problem..
Any suggestions?
Thanks in advance

1https://msdn.microsoft.com/en-us/library/system.windows.forms.imagelayout(v=vs.110).aspx
You should use stretch, I suggest in designtime (this is not java where you have to add elements by code):
this.buttonOk.BackColor = System.Drawing.SystemColors.MenuHighlight;
this.buttonOk.BackgroundImage = ((System.Drawing.Image)(resources.GetObject("buttonOk.BackgroundImage")));
this.buttonOk.BackgroundImageLayout = System.Windows.Forms.ImageLayout.Stretch;
this.buttonOk.DialogResult = System.Windows.Forms.DialogResult.Cancel;
this.buttonOk.Location = new System.Drawing.Point(475, 15);
this.buttonOk.Name = "buttonOk";
this.buttonOk.Size = new System.Drawing.Size(50, 50);
this.buttonOk.TabIndex = 11;
this.buttonOk.UseVisualStyleBackColor = false;
this.buttonOk.Click += new System.EventHandler(this.buttonOk_Click);
And it will work, done it many times before
I got this code from my own working Form1.Designer.cs but because of that: please use the Visual Studio designer and don't try to write all this code / logic in your constructor or something.

The problem is because you are showing an image with the same size as your button.
When you want an image fit in your button, the width and height of image should be at least 1 point less than your button size. (or in other word, you can set your button width and height 1 point more than the image size).
So you can change your code to this:
var l_oStopPic = new Bitmap(l_oStopImage ,
new Size(btnStopOperation.Width-1, btnStopOperation.Height-1));

Drop lines in MSChart

I am using MSChart in my C# program to create line graphs, and am unable to find any options to create "drop lines" i.e. lines dropping down from each data point to the X-Axis.
Can anyone help?
Thanks.

I solved my problem using the LineAnnotation object:
int index = 1;
foreach (DataPoint _point in series1.Points)
{
LineAnnotation annotation = new LineAnnotation();
annotation.LineColor = Color.Black;
annotation.LineWidth = 4;
annotation.LineDashStyle = ChartDashStyle.Dot;
annotation.AxisX = chartArea1.AxisX;
annotation.AxisY = chartArea1.AxisY;
annotation.AnchorX = index;
annotation.AnchorY = 0;
annotation.Height = _point.YValues[0];
annotation.Width = 0;
annotation.IsSizeAlwaysRelative = false;
annotation.ClipToChartArea = "ChartArea1";
chart1.Annotations.Add(annotation);
index++;
}
Funnily enough, the above code behaved strangely when I anchored the annotation to the data point itself, drawing some lines up and some lines down even though all my points are in the same quadrant. After a lot of playing around, I managed to solve the problem by anchoring the annotation to the appropriate "dropped" point on the X-axis.