Charts grid lines style - c#

I am using the standard charts library from Visual Studio 2010.
The chart works fine but I am unable to change the axis grid line style.
These are the properties already set in Form1.Designers.cs
chartArea3.Name = "ChartArea1";
this.chart1.ChartAreas.Add(chartArea3);
legend3.Name = "Legend1";
this.chart1.Legends.Add(legend3);
this.chart1.Location = new System.Drawing.Point(12, 68);
this.chart1.Name = "chart1";
series5.ChartArea = "ChartArea1";
series5.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line;
series5.Color = System.Drawing.Color.Red;
series5.Legend = "Legend1";
series5.Name = "Temp";
series6.ChartArea = "ChartArea1";
series6.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line;
series6.Color = System.Drawing.Color.Blue;
series6.Legend = "Legend1";
series6.Name = "Umid";
this.chart1.Series.Add(series5);
this.chart1.Series.Add(series6);
this.chart1.Size = new System.Drawing.Size(647, 182);
this.chart1.TabIndex = 8;
this.chart1.Text = "chart1";
this.chart1.ChartAreas[0].AxisY.Interval=5;
I would like to have the axis grid type dots or dashdots. I have tried with:
this.chart1.ChartAreas[0].AxisX.LineDashStyle.??????
but then I do not know how to assign the property and/or if the above partial line of code is correct.

Finally I got it right:
this.chart1.ChartAreas[0].AxisX.MajorGrid.LineDashStyle = System.Windows.Forms.DataVisualization.Charting.ChartDashStyle.DashDotDot;
this.chart1.ChartAreas[0].AxisY.MajorGrid.LineDashStyle = System.Windows.Forms.DataVisualization.Charting.ChartDashStyle.DashDotDot;
This is working and gives access to the line style of the grid axes.
this.chart1.ChartAreas[0].AxisX.MajorGrid.LineDashStyle = System.Windows.Forms.DataVisualization.Charting.ChartDashStyle.availableStileSelectionHere;

You'll want to check out the ChartDashStyle enumeration. Your choices should be Dash, DashDot, DashDotDot, Dot, Solid, and NotSet.
AxisX is of type Charting.Axis so that's where the line type information is expressed.
So try:
this.chart1.ChartAreas[0].AxisX.LineDashStyle.Dot
or
this.chart1.ChartAreas[0].AxisX.LineDashStyle.DashDot

Related

Chart axes in PowerPoint file

I'm creating a chart (of ComboChart type) in the PPTX file using GemBox.Presentation (together with GemBox.Spreadsheet). I'm using the code from the PowerPoint Chart example and added parts of the Excel Combo Chart example.
This is what I have so far:
var presentation = new PresentationDocument();
var slide = presentation.Slides.AddNew(SlideLayoutType.Custom);
var chart = slide.Content.AddChart(GemBox.Presentation.ChartType.Combo, 25, 25, 300, 500);
var comboChart = (ComboChart)chart.ExcelChart;
var worksheet = comboChart.Worksheet;
worksheet.Cells["A1"].Value = "Name";
worksheet.Cells["A2"].Value = "John Doe";
worksheet.Cells["A3"].Value = "Fred Nurk";
worksheet.Cells["B1"].Value = "Salary";
worksheet.Cells["B2"].Value = 4023;
worksheet.Cells["B3"].Value = 3263;
worksheet.Cells["C1"].Value = "Max";
worksheet.Cells["C2"].Value = 4500;
worksheet.Cells["C3"].Value = 4300;
worksheet.Cells["D1"].Value = "Min";
worksheet.Cells["D2"].Value = 3000;
worksheet.Cells["D3"].Value = 2800;
comboChart.CategoryLabelsReference = "A2:A3";
var salaryChart = comboChart.Add(GemBox.Spreadsheet.Charts.ChartType.Column);
salaryChart.Series.Add("=B1", "B2:B3");
var minMaxChart = comboChart.Add(GemBox.Spreadsheet.Charts.ChartType.Line);
minMaxChart.Series.Add("=C1", "C2:C3");
minMaxChart.Series.Add("=D1", "D2:D3");
presentation.Save("output.pptx");
And this is what I get:
Now my problem is that I cannot find any way to access and format the Category axis and Vertical axis.
I tried to use chart, comboChart, salaryChart, and minMaxChart objects, but none of them have any axes properties!?
How can I, let's say, set the axes titles?
To set the axes of the Combo chart, you'll need to use the axes of one of its containing charts, so either salaryChart or minMaxChart.
Now the reason why you don't see any axes properties on them is that they are of a base type (ExcelChart). You need to cast them to a derived type, like this:
var salaryChart = (ColumnChart)comboChart.Add(GemBox.Spreadsheet.Charts.ChartType.Column);
salaryChart.Series.Add("=B1", "B2:B3");
salaryChart.Axes.Horizontal.Title.Text = "My Categories";
salaryChart.Axes.Vertical.Title.Text = "My Values";

How Do I Get The Scale of The Secondary Axis to be Based on My Series Values?

I'm using System.Web.UI.DataVisualization. Charting to create charts in MVC.
I have a chart displaying values in a StackedColumn100 SeriesChartType with the corresponding y-axis values on the primary y-axis on the left side.
Since it is a 100% stacked column series, the primary y-axis is scaled from 0 to 100.
I have then added a secondary series in the form of a Line SeriesChartType tied to a secondary axis (on the right side). I would like this axis to adjust its scale based on the values in the series but it doesn't. No matter what the highest value of this series is, the secondary y-axis also has a scale between 0 to 100.
If I manually set the maximum value for the secondary y-axis the following way:
chart.ChartAreas[0].AxisY2.Maximum = 20;. It works but I don't want to do that since the maximum value can differ greatly based on the search criteria used.
I have really tried to find a solution for this but I can't. According to the documentation and samples it seems that the scale should be based on the series values but I don't get it to work that way. Any help would be greatly appreciated!
Below is a stand alone test function that recreates the problem. I call the function from my view with the following line:
<p><img src="#Url.Action("CreateChart_TestSecondaryAxis")" /> </p>
public FileResult CreateChart_TestSecondaryAxis()
{
System.Web.UI.DataVisualization.Charting.Chart chart = new System.Web.UI.DataVisualization.Charting.Chart();
chart.Width = 800;
chart.Height = 400;
chart.BackColor = Color.FromArgb(211, 223, 240);
chart.BorderlineDashStyle = ChartDashStyle.Solid;
chart.BackSecondaryColor = Color.White;
chart.BackGradientStyle = GradientStyle.TopBottom;
chart.BorderlineWidth = 1;
chart.Palette = ChartColorPalette.BrightPastel;
chart.BorderlineColor = Color.FromArgb(26, 59, 105);
chart.RenderType = RenderType.BinaryStreaming;
chart.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
chart.AntiAliasing = AntiAliasingStyles.All;
chart.TextAntiAliasingQuality = TextAntiAliasingQuality.Normal;
ChartArea chartArea = new ChartArea();
chartArea.Name = "TestSecondaryAxis";
chartArea.BackColor = Color.Transparent;
chartArea.AxisX.IsLabelAutoFit = false;
chartArea.AxisY.IsLabelAutoFit = false;
chartArea.AxisX.LabelStyle.Font =
new Font("Verdana,Arial,Helvetica,sans-serif",
8F, FontStyle.Regular);
chartArea.AxisY.LabelStyle.Font =
new Font("Verdana,Arial,Helvetica,sans-serif",
8F, FontStyle.Regular);
chartArea.AxisY.LineColor = Color.FromArgb(64, 64, 64, 64);
chartArea.AxisX.LineColor = Color.FromArgb(64, 64, 64, 64);
chartArea.AxisY.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);
chartArea.AxisX.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);
chartArea.AxisX.Title = "Airport";
chartArea.AxisY.Title = "LandingConf";
chartArea.AxisY.TextOrientation = TextOrientation.Rotated270;
chartArea.AxisX.LabelStyle.IsEndLabelVisible = true;
chart.ChartAreas.Add(chartArea);
Series seriesPrimaryAxisConf3 = new Series();
seriesPrimaryAxisConf3.Name = "Conf 3";
seriesPrimaryAxisConf3.IsValueShownAsLabel = false;
seriesPrimaryAxisConf3.Color = Color.Blue;
seriesPrimaryAxisConf3.ChartType = SeriesChartType.StackedColumn100;
seriesPrimaryAxisConf3.BorderWidth = 2;
seriesPrimaryAxisConf3.ChartArea = "TestSecondaryAxis";
DataPoint point;
for (int i = 1; i < 11; i++)
{
point = new DataPoint();
point.AxisLabel = "Airport" + i.ToString();
point.YValues = new double[] { i };
seriesPrimaryAxisConf3.Points.Add(point);
}
chart.Series.Add(seriesPrimaryAxisConf3);
Series seriesPrimaryAxisConfFull = new Series();
seriesPrimaryAxisConfFull.Name = "Conf Full";
seriesPrimaryAxisConfFull.IsValueShownAsLabel = false;
seriesPrimaryAxisConfFull.Color = Color.Red;
seriesPrimaryAxisConfFull.ChartType = SeriesChartType.StackedColumn100;
seriesPrimaryAxisConfFull.BorderWidth = 2;
seriesPrimaryAxisConfFull.ChartArea = "TestSecondaryAxis";
for (int i = 1; i < 11; i++)
{
point = new DataPoint();
point.AxisLabel = "Airport" + i.ToString();
point.YValues = new double[] { 11-i };
seriesPrimaryAxisConfFull.Points.Add(point);
}
chart.Series.Add(seriesPrimaryAxisConfFull);
Series seriesSecondaryAxisNoOfFlights = new Series();
seriesSecondaryAxisNoOfFlights.Name = "NoOfFLights";
seriesSecondaryAxisNoOfFlights.IsValueShownAsLabel = false;
seriesSecondaryAxisNoOfFlights.Color = Color.Red;
seriesSecondaryAxisNoOfFlights.ChartType = SeriesChartType.Line;
seriesSecondaryAxisNoOfFlights.BorderWidth = 2;
seriesSecondaryAxisNoOfFlights.ChartArea = "TestSecondaryAxis";
for (int i = 1; i < 11; i++)
{
point = new DataPoint();
point.AxisLabel = "Airport" + i.ToString();
point.YValues = new double[] { i };
seriesSecondaryAxisNoOfFlights.Points.Add(point);
}
chart.Series.Add(seriesSecondaryAxisNoOfFlights);
chart.Series["NoOfFLights"].YAxisType = AxisType.Secondary;
chart.ChartAreas["TestSecondaryAxis"].AxisY2.LineColor = Color.Transparent;
chart.ChartAreas["TestSecondaryAxis"].AxisY2.MajorGrid.Enabled = false;
chart.ChartAreas["TestSecondaryAxis"].AxisY2.MajorTickMark.Enabled = false;
MemoryStream ms = new MemoryStream();
chart.SaveImage(ms);
return File(ms.GetBuffer(), #"image/png");
}
MSChart is a nice control but unfortunately Microsoft has always failed to properly document it.
And with the latest changes at MSDN things have gone from bad to worse, so I can't actually point to the rules that go for the various ChartTypes.
In your case I deduct this (rather wacky) rule:
To attach a non 100%-series to an indepently scaled secondary y-axis
it must be the first series but the stacked series still must be added
first.
So, if you want to get a result like this:
..you need to adapt the code. Here are the changes and additions needed..:
First we have to insert the line series at the front but do that after the stack100 series have beeen added..:
chart.Series.Insert(0, seriesSecondaryAxisNoOfFlights); // instead of adding it
Next we need to owner-draw the line as it would get burried under the columns otherwise.
Code the PostPaint event like this:
private void Chart_PostPaint(object sender, ChartPaintEventArgs e)
{
Chart chart = sender as Chart; //*
Series s = chart.Series[0]; // make sure to pick the right one!
Axis ax = chart.ChartAreas[0].AxisX;
Axis ay = chart.ChartAreas[0].AxisY2; // !!
var pts = s.Points.Select(x =>
new PointF((float)ax.ValueToPixelPosition(x.XValue),
(float)ay.ValueToPixelPosition(x.YValues[0])));
using (Pen pen = new Pen(s.Color, s.BorderWidth))
e.ChartGraphics.Graphics.DrawLines(pen, pts.ToArray());
}
For this to work the series need valid x-values. So add this line:
point.XValue = i; // set both x and y-values!
I also added a few nudges to the axis positioning:
ChartArea ca = chart.ChartAreas["TestSecondaryAxis"];
ca.AxisY.Maximum = 100;
ca.AxisX.Minimum = 0.5;
ca.AxisX.IntervalOffset = 0.5;

C# charting - two chart areas with different Y values

Good day nobbles of programming,
I have a question. I made a code to create chart with datagridview as data source with chartarea1.
Chart chart1 = new Chart();
chart1.Size = new System.Drawing.Size(1024, 768);
ChartArea chartArea1 = new ChartArea();
chartArea1.AxisX.MajorGrid.LineColor = Color.LightGray;
chartArea1.AxisY.MajorGrid.LineColor = Color.LightGray;
chartArea1.AxisX.LabelStyle.Font = new Font("Consolas", 8);
chartArea1.AxisY.LabelStyle.Font = new Font("Consolas", 8);
chartArea1.AxisX.IntervalType = DateTimeIntervalType.Months;
chartArea1.AxisX.Interval = 1;
chart1.ChartAreas.Add(chartArea1);
chart1.Series.Add(new Series());
chart1.Series[0].XValueMember = dataGridView1.Columns[0].DataPropertyName;
chart1.Series[0].YValueMembers = dataGridView1.Columns[1].DataPropertyName;
chart1.DataSource = dataGridView1.DataSource;
chart1.Series[0].ChartType = SeriesChartType.Line;
Now i want to create second chartarea within chart1 with same XValueMember but different YValueMember from different datagridview, for example datagridview2. Is it possible to do it?
Thanks in advance.
Ok, so i tried this:
Chart chart1 = new Chart();
ChartArea chartArea1 = new ChartArea();
Series series1 = new Series();
chart1.DataSource = dataGridView1.DataSource;
chartArea1 = chart1.ChartAreas.Add("ca1");
chartArea1.AxisX.MajorGrid.LineColor = Color.LightGray;
chartArea1.AxisY.MajorGrid.LineColor = Color.LightGray;
chartArea1.AxisX.LabelStyle.Font = new Font("Consolas", 8);
chartArea1.AxisY.LabelStyle.Font = new Font("Consolas", 8);
chartArea1.AxisX.IntervalType = DateTimeIntervalType.Months;
chartArea1.AxisX.Interval = 1;
series1 = chart1.Series.Add("s1");
series1.Points.DataBindXY(dataGridView1.Columns[0].DataPropertyName, dataGridView1.Columns[1].DataPropertyName);
series1.ChartType = SeriesChartType.Line;
chart1.SaveImage("chart.png", ChartImageFormat.Png);
Now getting this error:
Y values cannot be data bound to the string object.
Parameter name: yValues
You should not bind to the whole Chart then but to the Series.Points !
There are many way to use Chart DataBinding
You also should control the Name of each Series and of the ChartAreas; this matters when you want/need to associate the 2nd series with the 2nd chartarea.
The preferred/recommended way to add a ChartArea or a Series is like so:
chartArea1 = chart1.ChartAreas.Add("ca1"); // or any other, more useful name
Series series1 = chart1.Series.Add("s1"); // dito
The association is done like this:
series1.ChartArea = "ca1"; // note the string!!
To bind only one series use..
series1.Points.DataBindXY()
..or some other overload from the table in the link at the top.

How to show the marker points in line graph using c#

I am using Line graph in my application and is working fine. I tried to draw the marker points in line graph,but the marker points are not displaying.
In line chart marker properties, I have chosen markerSize as 5,markerStyle as Circle,MarkerColor as blue.Refer my code below.
series1.Name = "Series1";
series1.IsVisibleInLegend = false;
series1.IsXValueIndexed = true;
series1.XValueType = ChartValueType.Time;
series1.YAxisType = AxisType.Primary;
series1.ChartType = SeriesChartType.Line;
this.chart1.Series.Add(series1);
I don't see how the Markers can show up from your code.
You need to set a non-default MarkerStyle:
series1.MarkerStyle = MarkerStyle.Circle;
If you use the debugger on that line you can see how the default is None !
Of course you will want to play with all other marker relates series properties, which all inherited from the DataPointCustomProperties
You are using ChartType.Line which is fine. Note that FastLine does not display markers!
If you only want to show some Markers simply style them for each point:
S1.Points[8].MarkerStyle = MarkerStyle.Triangle;
S1.Points[8].MarkerSize = 22;
S1.Points[8].MarkerColor = Color.Red;
I suggest getting each of your points, looping through them and adding each one. I noticed you want to set a name so I just created a counter then appended an integer value to the end of 'ser', name how you please.
Dim counter as int = 0;
foreach (Series ser in chart.Series)
{
ser.Name = "ser" & counter + 1;
ser.IsVisibleInLegend = false;
ser.IsXValueIndexed = true;
ser.XValueType = ChartValueType.Time;
ser.YAxisType = AxisType.Primary;
ser.ChartType = SeriesChartType.Line;
this.chart1.Series.Add(ser);
counter += 1;
}

How can the UltraChart of Infragistics do even better?

I need to convince my management that we can do very nice plots using infragistics, up to know this is what I have:
In order have that here is my code :
//Set the chart titles
ChartPureAlpha.TitleTop.Text = TickerName;
//Set Chart legend
this.ChartPureAlpha.Legend.Visible = true;
this.ChartPureAlpha.Legend.Location = LegendLocation.Right;
this.ChartPureAlpha.Legend.Margins.Left = 5;
this.ChartPureAlpha.Legend.Margins.Right = 10;
this.ChartPureAlpha.Legend.Margins.Top = 15;
this.ChartPureAlpha.Legend.Margins.Bottom = 90;
this.ChartPureAlpha.Legend.SpanPercentage = 15;
this.ChartPureAlpha.LineChart.TreatDateTimeAsString = false;
this.ChartPureAlpha.ChartType = ChartType.ScatterChart;
this.ChartPureAlpha.ScatterChart.ConnectWithLines = true;
//ChartPureAlpha.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
this.ChartPureAlpha.Axis.X.Labels.ItemFormatString = "<ITEM_LABEL:dd-MM-yyyy>";
this.ChartPureAlpha.Axis.X.Labels.SeriesLabels.Font = new System.Drawing.Font("Verdana", 25);
this.ChartPureAlpha.Axis.X.Labels.SeriesLabels.Visible = true;
this.ChartPureAlpha.Axis.X.Labels.SeriesLabels.OrientationAngle = 315;
//ChartPureAlpha.Axis.X.TickmarkInterval = 1;
//ChartPureAlpha.Axis.X.TickmarkIntervalType = AxisIntervalType.Days;
//ChartPureAlpha.Axis.X.TickmarkStyle = AxisTickStyle.DataInterval;
// axis label
//ChartPureAlpha.TitleBottom.Text = "Date";
//ChartPureAlpha.TitleBottom.HorizontalAlign = StringAlignment.Center;
//ChartPureAlpha.TitleLeft.Text = "Raw Alpha)";
//ChartPureAlpha.TitleLeft.HorizontalAlign = StringAlignment.Center;
// Create and add series
ChartPureAlpha.Series.Add(dowjones);
I want to know how to :
reduce marker size
have the whole date (not truncated)
change the label font
After a few looking through the official 2011.2 infragistics help i found some issues for you:
reduce marker size: use the IconSize Property (Auto, Large, Medium, Small)
change the label font:this.ultraChart1.TitleTop.Font = new Font("Arial", 12, FontStyle.Bold | FontStyle.Underline, GraphicsUnit.Point);
have the whole date (not truncated): If the label is "My Text" and the Date is 5/10/2005 it would format the label as follows: "<ITEM_LABEL><DATA_VALUE:MMM-dd-yyyy>" = MyText May 10, 2005
hope that helps
Infragistics is already trying quite hard to advertise their charts, so why don't you just reuse their marketing material ?

Categories

Resources