I have been experimenting with charts and so far I got this experimental code:
static void Main(string[] args)
{
Random rnd = new Random();
Chart thisChart = new Chart();
thisChart.Height = 400;
thisChart.Width = 500;
thisChart.BackColor = SystemColors.Window;
thisChart.Palette = ChartColorPalette.EarthTones;
thisChart.Titles.Add("Test");
thisChart.Visible = true;
ChartArea ca = new ChartArea();
ca.Name = "Default";
ca.BackColor = Color.White;
ca.BorderColor = Color.FromArgb(26, 59, 105);
ca.BorderWidth = 0;
ca.BorderDashStyle = ChartDashStyle.Solid;
ca.AxisX = new Axis();
ca.AxisY = new Axis();
thisChart.ChartAreas.Add(ca);
Series series = thisChart.Series.Add("Default");
series.ChartType = SeriesChartType.Spline;
series.ChartArea = "Default";
series.Points.AddXY("1", 20);
series.Points.AddXY("2", 25);
series.Points.AddXY("3", 30);
series.Points.AddXY("4", 35);
series.Points.AddXY("5", 40);
series.Points.AddXY("6", 45);
//SetPosition for multiple Y-axis labels
thisChart.ChartAreas["Default"].Position = new ElementPosition(25, 10, 68, 85);
thisChart.ChartAreas["Default"].InnerPlotPosition = new ElementPosition(10, 0, 90, 80);
// Create extra Y axis for second and third series
Series series2 = thisChart.Series.Add("Series2");
series2.ChartType = SeriesChartType.Spline;
series2.ChartArea = "Default";
series2.Points.AddXY("1", 50);
series2.Points.AddXY("2", 55);
series2.Points.AddXY("3", 60);
series2.Points.AddXY("4", 70);
series2.Points.AddXY("5", 75);
series2.Points.AddXY("6", 80);
//series2.Legend = "Default";
thisChart.Series["Series2"].ChartArea = "Default";
CreateYAxis(thisChart, thisChart.ChartAreas["Default"], thisChart.Series["Series2"], 13, 8);
// Create extra X axis for second and third series
Series series3 = thisChart.Series.Add("Series3");
series3.ChartType = SeriesChartType.Spline;
series3.ChartArea = "Default";
series3.Points.AddXY("1,5", 75);
series3.Points.AddXY("2,5", 175);
series3.Points.AddXY("3,5", 300);
series3.Points.AddXY("4,5", 75);
series3.Points.AddXY("5,5", 150);
series3.Points.AddXY("6,6", 125);
thisChart.Series["Series3"].ChartArea = "Default";
CreateXAxis(thisChart, thisChart.ChartAreas["Default"], thisChart.Series["Series3"], -10, 8);
//thisChart.DataBind();
thisChart.SaveImage(#"C:\Temp\TestChart.png", ChartImageFormat.Png);
}
private static void CreateYAxis(Chart chart, ChartArea area, Series series, float axisOffset, float labelsSize)
{
// Create new chart area for original series
ChartArea areaSeries = chart.ChartAreas.Add("ChartArea_" + series.Name);
areaSeries.BackColor = Color.Transparent;
areaSeries.BorderColor = Color.Transparent;
areaSeries.Position.FromRectangleF(area.Position.ToRectangleF());
areaSeries.InnerPlotPosition.FromRectangleF(area.InnerPlotPosition.ToRectangleF());
areaSeries.AxisX.MajorGrid.Enabled = false;
areaSeries.AxisX.MajorTickMark.Enabled = false;
areaSeries.AxisX.LabelStyle.Enabled = false;
areaSeries.AxisY.MajorGrid.Enabled = false;
areaSeries.AxisY.MajorTickMark.Enabled = false;
areaSeries.AxisY.LabelStyle.Enabled = false;
areaSeries.AxisY.IsStartedFromZero = area.AxisY.IsStartedFromZero;
areaSeries.AxisY.TitleAlignment = StringAlignment.Far;
areaSeries.AxisY.TextOrientation = TextOrientation.Horizontal;
areaSeries.AxisY.Title = "Y-axis Title1";
areaSeries.AxisY.TitleForeColor = Color.Blue;
areaSeries.AxisY.TitleFont = new Font("Tahoma", 7, FontStyle.Bold);
areaSeries.AxisY.Maximum = 300;
series.ChartArea = areaSeries.Name;
// Create new chart area for axis
ChartArea areaAxis = chart.ChartAreas.Add("AxisY_" + series.ChartArea);
areaAxis.BackColor = Color.Transparent;
areaAxis.BorderColor = Color.Transparent;
areaAxis.Position.FromRectangleF(chart.ChartAreas[series.ChartArea].Position.ToRectangleF());
areaAxis.InnerPlotPosition.FromRectangleF(chart.ChartAreas[series.ChartArea].InnerPlotPosition.ToRectangleF());
areaAxis.AxisY.TitleAlignment = StringAlignment.Center;
areaAxis.AxisY.Title = "Y-axis Title";
areaAxis.AxisY.TitleForeColor = Color.Blue;
areaAxis.AxisY.TitleFont = new Font("Tahoma", 7, FontStyle.Bold);
areaAxis.AxisY.TitleAlignment = StringAlignment.Far;
areaAxis.AxisY.TextOrientation = TextOrientation.Horizontal;
areaAxis.AxisY.Maximum = 200;
// Create a copy of specified series
Series seriesCopy = chart.Series.Add(series.Name + "_Copy");
seriesCopy.ChartType = series.ChartType;
foreach (DataPoint point in series.Points)
{
seriesCopy.Points.AddXY(point.XValue, point.YValues[0]);
}
// Hide copied series
seriesCopy.IsVisibleInLegend = false;
seriesCopy.Color = Color.Transparent;
seriesCopy.BorderColor = Color.Transparent;
seriesCopy.ChartArea = areaAxis.Name;
// Disable drid lines & tickmarks
areaAxis.AxisX.LineWidth = 0;
areaAxis.AxisX.MajorGrid.Enabled = false;
areaAxis.AxisX.MajorTickMark.Enabled = false;
areaAxis.AxisX.LabelStyle.Enabled = false;
areaAxis.AxisY.MajorGrid.Enabled = false;
areaAxis.AxisY.IsStartedFromZero = area.AxisY.IsStartedFromZero;
areaAxis.AxisY.LabelStyle.Font = area.AxisY.LabelStyle.Font;
// Adjust area position
areaAxis.Position.X -= axisOffset;
areaAxis.InnerPlotPosition.X += labelsSize;
}
private static void CreateXAxis(Chart chart, ChartArea area, Series series, float axisOffset, float labelsSize)
{
// Create new chart area for original series
ChartArea areaSeries = chart.ChartAreas.Add("ChartArea_" + series.Name);
areaSeries.BackColor = Color.Transparent;
areaSeries.BorderColor = Color.Transparent;
areaSeries.Position.FromRectangleF(area.Position.ToRectangleF());
areaSeries.InnerPlotPosition.FromRectangleF(area.InnerPlotPosition.ToRectangleF());
areaSeries.AxisY.MajorGrid.Enabled = false;
areaSeries.AxisY.MajorTickMark.Enabled = false;
areaSeries.AxisY.LabelStyle.Enabled = false;
areaSeries.AxisX.MajorGrid.Enabled = false;
areaSeries.AxisX.MajorTickMark.Enabled = false;
areaSeries.AxisX.LabelStyle.Enabled = false;
areaSeries.AxisX.IsStartedFromZero = area.AxisX.IsStartedFromZero;
series.ChartArea = areaSeries.Name;
// Create new chart area for axis
ChartArea areaAxis = chart.ChartAreas.Add("AxisX_" + series.ChartArea);
areaAxis.BackColor = Color.Transparent;
areaAxis.BorderColor = Color.Transparent;
areaAxis.Position.FromRectangleF(chart.ChartAreas[series.ChartArea].Position.ToRectangleF());
areaAxis.InnerPlotPosition.FromRectangleF(chart.ChartAreas[series.ChartArea].InnerPlotPosition.ToRectangleF());
// Create a copy of specified series
Series seriesCopy = chart.Series.Add(series.Name + "_Copy");
seriesCopy.ChartType = series.ChartType;
foreach (DataPoint point in series.Points)
{
seriesCopy.Points.AddXY(point.XValue, point.YValues[0]);
}
// Hide copied series
seriesCopy.IsVisibleInLegend = false;
seriesCopy.Color = Color.Transparent;
seriesCopy.BorderColor = Color.Transparent;
seriesCopy.ChartArea = areaAxis.Name;
// Disable drid lines & tickmarks
areaAxis.AxisY.LineWidth = 0;
areaAxis.AxisY.MajorGrid.Enabled = false;
areaAxis.AxisY.MajorTickMark.Enabled = false;
areaAxis.AxisY.LabelStyle.Enabled = false;
areaAxis.AxisX.MajorGrid.Enabled = false;
//areaAxis.AxisX.IntervalOffset = Convert.ToDouble("0,5");
areaAxis.AxisX.IsStartedFromZero = area.AxisX.IsStartedFromZero;
areaAxis.AxisX.LabelStyle.Font = area.AxisX.LabelStyle.Font;
areaAxis.AxisX.CustomLabels.Add(0, 1, "0.5");
areaAxis.AxisX.CustomLabels.Add(1, 2, "1.5");
areaAxis.AxisX.CustomLabels.Add(2, 3, "2.5");
areaAxis.AxisX.CustomLabels.Add(3, 4, "3.5");
areaAxis.AxisX.CustomLabels.Add(4, 5, "4.5");
areaAxis.AxisX.CustomLabels.Add(5, 6, "5.5");
areaAxis.AxisX.CustomLabels.Add(6, 7, "6.5");
// Adjust area position
areaAxis.Position.Y -= axisOffset;
areaAxis.InnerPlotPosition.Y += labelsSize;
}
This produces the following result:
PROBLEM:
I can not figure out how to make it so that the title aligns itself above the respective y-axis, any ideas?
I don't think you do that.
Afaik the recommended workaround is adding more chart Titles.
You can style them as usual and to move them on top of a axis you can align them to the top left of the respective Chartearea.InnerPlotPosition:
ChartArea ca1 = thisChart.ChartAreas[0];
RectangleF rip1 = ca1.InnerPlotPosition.ToRectangleF();
Title ty1 = thisChart.Titles.Add("ty1");
ty1.Text = "Y-Axis 1\nTitle";
ty1.ForeColor = Color.DarkSlateBlue;
ty1.Position.X = rip1.Left;
ty1.Position.Y = rip1.Y;
Make sure to have enough space at the top of the chart for the titles..
Do note that the values of all ElementPositions, including InnerPlotPosition are in percent of the respective containers, i.e. of the ChartArea for the InnerPlotPosition and of the Chart for the ChartArea..
I made a C# windows forms and my chart is very strange. My chart has a lot of white borders and the text for Master and Slave is very tiny and pixelated.
Why the Axis is so far away from the borders? How can I fix this?
// chart1
//
chartArea2.AxisX.MajorGrid.Enabled = false;
chartArea2.AxisX.MajorTickMark.Enabled = false;
chartArea2.AxisY.MajorGrid.Enabled = false;
chartArea2.AxisY.MajorTickMark.Enabled = false;
chartArea2.Name = "ChartArea1";
this.chart1.ChartAreas.Add(chartArea2);
legend2.Name = "Legend1";
this.chart1.Legends.Add(legend2);
this.chart1.Location = new System.Drawing.Point(543, 49);
this.chart1.Name = "chart1";
series3.ChartArea = "ChartArea1";
series3.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Point;
series3.Legend = "Legend1";
series3.MarkerBorderColor = System.Drawing.Color.Black;
series3.MarkerImage = "C:\\Users\\Tiago\\Desktop\\CODIGO_TESE_FINAL_BACKUP1408_BOM\\C# - AR.Drone SDK\\AR.Dron" +
"e\\icone_drone_2_50x50.png";
series3.MarkerImageTransparentColor = System.Drawing.Color.Red;
series3.Name = "Master";
series4.ChartArea = "ChartArea1";
series4.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Point;
series4.Legend = "Legend1";
series4.MarkerImage = "C:\\Users\\Tiago\\Desktop\\CODIGO_TESE_FINAL_BACKUP1408_BOM\\C# - AR.Drone SDK\\AR.Dron" +
"e\\icone_drone_2_50x50.png";
series4.Name = "Slave";
this.chart1.Series.Add(series3);
this.chart1.Series.Add(series4);
this.chart1.Size = new System.Drawing.Size(1159, 359);
this.chart1.TabIndex = 7;
this.chart1.Text = "chart1";
this.chart1.MouseDown += new System.Windows.Forms.MouseEventHandler(this.chart1_MouseDown);
this.chart1.MouseMove += new System.Windows.Forms.MouseEventHandler(this.chart1_MouseMove);
this.chart1.MouseUp += new System.Windows.Forms.MouseEventHandler(this.chart1_MouseUp);
You can set the border spaces and the Fonts all in the designer.
Pick the ChartArea and modify the Position. Note that it is not in pixels but in percentages of the Chart.ClientSize!! So for your largish chart the 3% defualt is a little too much..
The Legend's Font is changed here:
In my application im having a chart control that is working fine. For every 1 second updating the x-Axis values and y-axis values in the chart. I want to enable auto scaling for the chart control programmatically for y axis. Please refer my code below,
chart1.Series.Clear();
chart1.ChartAreas[0].AxisX.ScaleView.Zoomable = true;
series1.Name = "Series1";
series1.MarkerStyle = MarkerStyle.Circle;
series1.MarkerColor = Color.BlueViolet;
series1.MarkerSize = 10;
series1.Color = System.Drawing.Color.Green;
series1.IsXValueIndexed = true;
series1.YAxisType = AxisType.Primary;
series1.ChartType = SeriesChartType.Line;
this.chart1.Series.Add(series1);
How to enable auto scaling programmatically.
chart1.Series.Clear();
chart1.ChartAreas[0].AxisX.ScaleView.Zoomable = true;
chart1.ChartAreas[0].RecalculateAxesScale();
series1.Name = "Series1";
series1.MarkerStyle = MarkerStyle.Circle;
series1.MarkerColor = Color.BlueViolet;
series1.MarkerSize = 10;
series1.Color = System.Drawing.Color.Green;
//series1.IsVisibleInLegend = false;
series1.IsXValueIndexed = true;
//series1.XValueType = ChartValueType.Time;
series1.YAxisType = AxisType.Primary;
series1.ChartType = SeriesChartType.Line;
this.chart1.Series.Add(series1);
Working fine
chart.ChartAreas[0].AxisY.Maximum = Double.NaN;
But some people have trouble with the above one,
so try this if that doesn't work
chart.ChartAreas[0].RecalculateAxesScale();
I am trying to create multi series line chart using MS Chart. I have created it successfully. But the problem is the x-axis labels repeation. Here is what is created
Can anyone tell me why the months are repeated? how can i avoid it?
UPDATE:
Here is the code:
DateTime[] xvals = {DateTime.Now.AddMonth(-1),DateTime.Now};
decimal[] gvals = {4.3,0};
decimal[] ypvals = {0,0};
decimal[] yvals = {3.5,0};
// create the chart
var chart = new Chart();
chart.Size = new Size(600, 250);
chart.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
chart.BorderlineColor = System.Drawing.Color.FromArgb(26, 59, 105);
chart.BorderlineWidth = 3;
var chartArea = new ChartArea();
chartArea.AxisX.MajorGrid.LineWidth = 0;
//Remove Y-axis grid lines
chartArea.AxisY.MajorGrid.LineWidth = 0;
chartArea.AxisX.LabelStyle.Format = "MMM";
chartArea.AxisX.MajorGrid.LineColor = Color.LightGray;
chartArea.AxisY.MajorGrid.LineColor = Color.LightGray;
chartArea.AxisX.LabelStyle.Font = new Font("Consolas", 8);
chartArea.AxisY.LabelStyle.Font = new Font("Consolas", 8);
chart.ChartAreas.Add(chartArea);
var series = new Series();
series.Name = "Y";
series.Legend = "Y";
series.ChartType = SeriesChartType.Line;
series.XValueType = ChartValueType.DateTime;
series.IsVisibleInLegend = true;
series.Color = Color.Red;
series.IsValueShownAsLabel = true;
series.BorderWidth = 2;
chart.Series.Add(series);
// bind the datapoints
chart.Series[0].Points.DataBindXY(xvals, yvals);
var series2 = new Series();
series2.Name = "YP";
series2.Legend = "YP";
series2.ChartType = SeriesChartType.Line;
series2.XValueType = ChartValueType.DateTime;
series2.IsVisibleInLegend = true;
series2.Color = Color.Yellow;
series2.IsValueShownAsLabel = true;
series2.BorderWidth = 2;
chart.Series.Add(series2);
// bind the datapoints
chart.Series[1].Points.DataBindXY(xvals, ypvals);
var series3 = new Series();
series3.Name = "G";
series3.Legend = "GG";
series3.ChartType = SeriesChartType.Line;
series3.XValueType = ChartValueType.DateTime;
series3.IsVisibleInLegend = true;
series3.Color = Color.Blue;
series3.IsValueShownAsLabel = true;
series3.BorderWidth = 2;
chart.Series.Add(series3);
// bind the datapoints
chart.Series[2].Points.DataBindXY(xvals, gvals);
// draw!
chart.Invalidate();
// write out a file
chart.SaveImage("D:\\cha.png", ChartImageFormat.Png);
Ok, I have got the solution.
I have just converted the
series1.XValueType = ChartValueType.Date;
series2.XValueType = ChartValueType.Date;
series3.XValueType = ChartValueType.Date;
TO:
series1.XValueType = ChartValueType.String;
series2.XValueType = ChartValueType.String;
series3.XValueType = ChartValueType.String;
and instead of using dates in the xAxisValues array used months name as string.
DateTime[] xvals = {DateTime.Now.AddMonth(-1),DateTime.Now};
TO:
string[] xvals = {DateTime.Now.AddMonth(-1).ToString("MMM"),DateTime.Now.ToString("MMM")};
Hope this helps someone else.
This is my control:
seriesTraffic = new Series();
seriesTraffic.Color = Color.Black;
seriesTraffic.ChartType = SeriesChartType.Spline;
seriesTraffic.BorderWidth = 2;
chart1.Series.Add(seriesTraffic);
chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = Color.White;
chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.White;
chart1.ChartAreas[0].AxisX.LabelStyle.Enabled = false;
chart1.ChartAreas[0].AxisY.LabelStyle.Enabled = false;
chart1.ChartAreas[0].AxisY.Minimum = 10;
chart1.ChartAreas[0].AxisX.Maximum = 10;
chart1.ChartAreas[0].AxisY.Minimum = 10;
chart1.ChartAreas[0].AxisY.Maximum = 10;
chart1.ChartAreas[0].AxisY.Interval = 5;
chart1.ChartAreas[0].AxisY.Interval = 1;
chart1.ChartAreas[0].AxisX.IsStartedFromZero = true;
chart1.ChartAreas[0].AxisX.IntervalOffsetType = DateTimeIntervalType.Number;
var chartArea1 = new System.Windows.Forms.DataVisualization.Charting.ChartArea();
chart1 = new System.Windows.Forms.DataVisualization.Charting.Chart();
chart1.BackColor = System.Drawing.Color.Black;
chartArea1.AxisY.Enabled = System.Windows.Forms.DataVisualization.Charting.AxisEnabled.True;
chartArea1.AxisY.MinorGrid.Enabled = true;
chartArea1.AxisX.Enabled = System.Windows.Forms.DataVisualization.Charting.AxisEnabled.True;
chartArea1.AxisX2.Enabled = System.Windows.Forms.DataVisualization.Charting.AxisEnabled.True;
chartArea1.AxisX2.MinorGrid.Enabled = true;
chartArea1.AxisX.LineColor = System.Drawing.Color.Green;
chartArea1.AxisX2.LineColor = System.Drawing.Color.Green;
chartArea1.AxisX2.LineWidth = 1;
chartArea1.AxisX2.MinorGrid.Interval = 0.25D;
chartArea1.AxisX2.MinorGrid.IntervalOffset = -0.01D;
chartArea1.AxisX2.MinorGrid.LineColor = System.Drawing.Color.Green;
chartArea1.AxisY.LineColor = System.Drawing.Color.Green;
chartArea1.AxisY.LineWidth = 1;
chartArea1.AxisY.Maximum = 2D;
chartArea1.AxisY.MaximumAutoSize = 100F;
chartArea1.AxisY.Minimum = -2D;
chartArea1.AxisY.MinorGrid.Interval = 0.25D;
chartArea1.AxisY.MinorGrid.IntervalOffset = -0.01D;
chartArea1.AxisY.MinorGrid.LineColor = System.Drawing.Color.Green;
chart1.ChartAreas.Add(chartArea1);
i want to change my control style to similar to this:
i try to change BackSecondaryColor, BorderColor but it has no effect.
i try to change BackSecondaryColor, BorderColor but it has no effect.
i try to change BackSecondaryColor, BorderColor but it has no effect.
i try to change BackSecondaryColor, BorderColor but it has no effect.
To change the background color of the chart, you will need to change the BackColor property of the ChartArea.
chart.ChartAreas["ChartArea1"].BackColor = Color.Black;
chart.ChartAreas["ChartArea1"].AxisX.MajorGrid.LineColor = Color.LawnGreen;
chart.ChartAreas["ChartArea1"].AxisY.MajorGrid.LineColor = Color.LawnGreen;
You could try to use something like this
var chartArea1 = new System.Windows.Forms.DataVisualization.Charting.ChartArea();
var chart1 = new System.Windows.Forms.DataVisualization.Charting.Chart();
chart1.BackColor = System.Drawing.Color.Black;
chartArea1.AxisY.Enabled = System.Windows.Forms.DataVisualization.Charting.AxisEnabled.True;
chartArea1.AxisY.MinorGrid.Enabled = true;
chartArea1.AxisX.Enabled = System.Windows.Forms.DataVisualization.Charting.AxisEnabled.True;
chartArea1.AxisX2.Enabled = System.Windows.Forms.DataVisualization.Charting.AxisEnabled.True;
chartArea1.AxisX2.MinorGrid.Enabled = true;
chartArea1.AxisX.LineColor = System.Drawing.Color.Green;
chartArea1.AxisX2.LineColor = System.Drawing.Color.Green;
chartArea1.AxisX2.LineWidth = 1;
chartArea1.AxisX2.MinorGrid.Interval = 0.25D;
chartArea1.AxisX2.MinorGrid.IntervalOffset = -0.01D;
chartArea1.AxisX2.MinorGrid.LineColor = System.Drawing.Color.Green;
chartArea1.AxisY.LineColor = System.Drawing.Color.Green;
chartArea1.AxisY.LineWidth = 1;
chartArea1.AxisY.Maximum = 2D;
chartArea1.AxisY.MaximumAutoSize = 100F;
chartArea1.AxisY.Minimum = -2D;
chartArea1.AxisY.MinorGrid.Interval = 0.25D;
chartArea1.AxisY.MinorGrid.IntervalOffset = -0.01D;
chartArea1.AxisY.MinorGrid.LineColor = System.Drawing.Color.Green;
chart1.ChartAreas.Add(chartArea1);
If the above does not work for you, I think that you should try to modify your control only in designer (using properties).
The background color is set by BackColor on your chart, you should also change the ChartArea BackColor to transparent.
Here a quick example, hope it will help:)