Alignment of Multiple TeeChart's Chart Control along Bottom Axis - c#

Currently we are having sync issue using TeeChart's Chart Control (.net / c#). In the example shown in attached screenshot, we have two chart controls whose right vertical axis are synced perfectly. Top chart contains area chart while bottom chart contains volume chart. While drawing vertical lines on both charts at specific time interval, we found that vertical lines drawn in both charts having the same value are not synced. Please note that both charts are plotted with same dataset.
We did some r&d on the same issue and our observations states that it is due to different chart styles used in TeeChart's. But as per our client's requirement we need to sync this vertical lines across multiple charts. Any help on this would be greatly appreciated.

The code below align the vertical line for both Series. I think you can do something like that:
public Form1()
{
InitializeComponent();
InitializeChart();
}
Steema.TeeChart.Axis axis1;
DateTime dt;
private void InitializeChart()
{
tChart1 = new Steema.TeeChart.TChart();
tChart1.Dock = DockStyle.Fill;
this.Controls.Add(tChart1);
tChart1.Aspect.View3D = false;
axis1 = new Steema.TeeChart.Axis();
tChart1.Axes.Custom.Add(axis1);
axis1.Horizontal = false;
tChart1.Axes.Right.StartPosition = 0;
tChart1.Axes.Right.EndPosition = 50;
axis1.StartPosition = 51;
axis1.EndPosition = 100;
axis1.OtherSide = true;
axis1.AxisPen.Visible = false;
dt = DateTime.Now;
tChart1.Axes.Bottom.Labels.DateTimeFormat = "dd/MM";
tChart1.Axes.Bottom.Labels.Style = Steema.TeeChart.AxisLabelStyle.Value;
InitializeSeries();
tChart1.Draw();
tChart1.AfterDraw += TChart1_AfterDraw;
}
private void TChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g)
{
for (int i=0; i<tChart1[0].Count; i++)
{
Point point1, point2;
point1= new Point(tChart1.Axes.Bottom.CalcPosValue(tChart1[0].XValues[i]),tChart1.Axes.Right.CalcYPosValue(tChart1[0].YValues[i]));
point2= new Point(tChart1.Axes.Bottom.CalcPosValue(tChart1[0].XValues[i]), axis1.CalcYPosValue(tChart1[0].YValues[i]));
g.Line(point1, point2);
}
}
private void InitializeSeries()
{
for (int i=0; i<10; i++)
{
if (i==0)
{
new Steema.TeeChart.Styles.Area(tChart1.Chart);
tChart1.Series[i].XValues.DateTime = true;
(tChart1.Series[i] as Steema.TeeChart.Styles.Area).AreaLines.Visible = false;
(tChart1.Series[i] as Steema.TeeChart.Styles.Area).Color = Color.BlueViolet;
(tChart1.Series[i] as Steema.TeeChart.Styles.Area).Transparency = 20;
Random rnd = new Random();
for (int j=0; j<10; ++j)
{
tChart1.Series[i].Add(dt, rnd.Next(100));
dt = dt.AddDays(1);
}
tChart1.Series[i].Marks.Visible = false;
tChart1.Series[i].VertAxis = Steema.TeeChart.Styles.VerticalAxis.Right;
}
else if(i==1)
{
new Steema.TeeChart.Styles.Volume(tChart1.Chart);
tChart1.Series[i].DataSource = tChart1.Series[i - 1];
tChart1.Series[i].CustomVertAxis = axis1;
}
}
}

Related

How do I plot system time on ZedGraph's XAxis using C#?

I have searched some examples of ZedGraph, but I couldn't perform what I wanted. I am drawing real-time data each 20 ms, and I want to show the system time on the x-axis (using the ZedGraph class XAxis). However when I try to draw milliseconds on the x-axis I cannot see any data. Here is my code:
//X-Axis Settings
pane.XAxis.Scale.MinorStep = 1;
pane.XAxis.Scale.MajorStep = 5;
pane.XAxis.Type = AxisType.Date;
pane.XAxis.Scale.Format = "HH:mm:ss.fff";
pane.XAxis.Scale.Min = new XDate(DateTime.Now);
pane.XAxis.Scale.Max = new XDate(DateTime.Now.AddSeconds(10));
pane.XAxis.Scale.MinorUnit = DateUnit.Second;
pane.XAxis.Scale.MajorUnit = DateUnit.Second;
XDate time = new XDate(DateTime.Now.ToOADate());
for (int i = 1; i < 16; i++)
{
listAuido.Add(time, (double)Read_Data1[i]);
}
Scale xScale1 = zgcMasterPane.MasterPane.PaneList[0].XAxis.Scale;
if (time.XLDate > xScale1.Max)
{
xScale1.Max = (XDate)(DateTime.Now.AddSeconds(1));
xScale1.Min = (XDate)(DateTime.Now.AddSeconds(-20));
}
Edit: This code structure is solved my problem.
The following code is drawing all the data on the same x point!
for (int i = 1; i < 16; i++)
{
listAuido.Add((XDate)(DateTime.Now.Millisecond), (double)Read_Data1[i]);
}
Why do you set your XAxis to the date format if you don't want it to appear like that?
OK, try this:
//Declare the x coordinate (time) variable
double xValue = 0;
//Setting the axis
pane.XAxis.Scale.MinorStep = 1;
pane.XAxis.Scale.MajorStep = 5;
pane.XAxis.Scale.Max = 0;
pane.XAxis.Scale.Min = -10;
//drawing the data
private void draw(double dataValue)
{
LineItem curve1 = zedGraphControl1.GraphPane.CurveList[0] as LineItem;
IPointListEdit list1 = curve1.Points as IPointListEdit;
list1.Add(xValue*(20/1000), dataValue); //
//Scroll
Scale XScale = zedGraphControl1.GraphPane.XAxis.Scale as Scale;
XScale.Max = xValue*(20/1000);
XScale.Min = XScale.Max - 10;
xValue++;
zedGraphControl1.AxisChange();
zedGraphControl1.Invalidate();
}
//Now you call the function draw every 20 ms using a [Timer][1] for example
private void timer1_Tick(object sender, EventArgs e)
{
draw(data[xValue]);
}
By the way I am not using MasterPane here.

Teechart: bottom axes label angle

I'm using Teechart for .net V3.
When trying to rotate the X-labels to 45° some of the labels are not displayed, but if the angle is set to 90° it is OK.
Please see the following images:
This is 45° rotation:
This is 90° rotation:
Is it possible to show all the labels with 45° angle?
I think you can use custom labels to achieve all labels appear when you use an angle of 45º. You can do something as next code:
private Steema.TeeChart.TChart tChart1;
public Form1()
{
InitializeComponent();
tChart1 = new Steema.TeeChart.TChart();
this.Controls.Add(tChart1);
tChart1.Left = 100;
tChart1.Top = 50;
tChart1.Width = 500;
tChart1.Height = 350;
tChart1.Dock = DockStyle.Fill;
InitialzieChart();
}
private void InitialzieChart()
{
Steema.TeeChart.Styles.Bar bar1 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);
DateTime dt = DateTime.Today;
Random rnd = new Random();
bar1.XValues.DateTime = true;
//bar1.date
for (int i = 0; i < 20; i++)
{
bar1.Add(dt, rnd.Next(100));
dt = dt.AddDays(5);
}
tChart1.Axes.Bottom.Labels.Angle = 45;
tChart1.Panel.MarginLeft = 10;
tChart1.Legend.Alignment = Steema.TeeChart.LegendAlignments.Bottom;
AddCustomLabels();
}
private void AddCustomLabels()
{
tChart1.Axes.Bottom.Labels.Items.Clear();
for (int i = 0; i < tChart1[0].Count; i++)
{
tChart1.Axes.Bottom.Labels.Items.Add(tChart1[0].XValues[i], DateTime.FromOADate(tChart1[0].XValues[i]).ToLongDateString());
}
}
Could you tell us if previous code works in your end?
Thanks,

How to change color of axis scale In TeeChart

I am working with C# windows from application. I am using TeeChart for .net v3 to plot chart.I am able to create multiple Y-axis with different color for each one as shown in below image.
Now i am able to display the axis with difftent color but i want to assign the same axis color to the scale of its axis also. Please help me what property i need to use.
one more problem is If i have multiple axis then it is taking to much space on chart to create separate axis for each. I want assign the scale of axis horizontally not like the one i am getting now. Please can any one help me please what properties i need to use.
I want to represent scale and axis as shown in below image.
Thanks in advance.
I have made a simple code where I have achieved set same scale for each custom axis I have drawn and place the all axes in a correct position automatically. I think you can use similar code as next to try to achieve as you want:
public Form1()
{
InitializeComponent();
InitializeChart();
}
private DataSet GetData()
{
DataSet TeeDataSet = new DataSet();
DateTime dt = DateTime.Today;
DataTable TeeDataTable = new DataTable("DataTable1");
DataColumn xval = new DataColumn("DateTime", typeof(DateTime));
DataColumn yval = new DataColumn("SystemName", typeof(double));
TeeDataTable.Columns.Add(xval);
TeeDataTable.Columns.Add(yval);
Random rnd = new Random();
for (int i = 0; i < 10; i++)
{
DataRow newRow = TeeDataTable.NewRow();
newRow[xval] = dt;
newRow[yval] = rnd.Next(100);
TeeDataTable.Rows.Add(newRow);
dt = dt.AddMonths(1);
}
TeeDataSet.Tables.Add(TeeDataTable);
return TeeDataSet;
}
private void InitializeChart()
{
tChart1.Aspect.View3D = false;
tChart1.Header.Visible = false;
tChart1.Legend.Alignment = LegendAlignments.Bottom;
tChart1.Legend.CheckBoxes = true;
for (int i = 0; i < 5; i++)
{
new Steema.TeeChart.Styles.Line(tChart1.Chart);
tChart1[i].Title = "SystemName";
tChart1[i].DataSource = GetData();//Add values using DataSource
tChart1[i].XValues.DataMember = "DateTime";
tChart1[i].XValues.DateTime = true;
tChart1[i].XValues.Order = Steema.TeeChart.Styles.ValueListOrder.Ascending;
tChart1[i].YValues.DataMember = "SystemName";
tChart1.Axes.Custom.Add(new Steema.TeeChart.Axis(tChart1.Chart));
tChart1[i].CustomVertAxis = tChart1.Axes.Custom[i];
tChart1.Axes.Custom[i].AxisPen.Color = tChart1[i].Color;
tChart1.Axes.Custom[i].Grid.Visible = false;
tChart1.Axes.Custom[i].PositionUnits = PositionUnits.Pixels;
}
tChart1.Panel.MarginUnits = PanelMarginUnits.Pixels;
tChart1.Panel.MarginTop = 20;
tChart1.Draw();
PlaceAxes(0, 0, 0, 0, 0);
tChart1.AfterDraw += new PaintChartEventHandler(tChart1_AfterDraw);
tChart1.ClickLegend += new MouseEventHandler(tChart1_ClickLegend);
tChart1.Draw();
}
void tChart1_ClickLegend(object sender, MouseEventArgs e)
{
tChart1.Draw();
}
void tChart1_AfterDraw(object sender, Graphics3D g)
{
PlaceAxes(0, 0, 0, 0, 0);
}
private void PlaceAxes(int nSeries, int NextXLeft, int NextXRight, int MargLeft, int MargRight)
{
const int extraPos = 12;
const int extraMargin = 60;
//Variable
int MaxLabelsWidth;
int lenghtTicks;
int extraSpaceBetweenTitleAndLabels;
foreach (Steema.TeeChart.Styles.Line s in tChart1.Series)
{
if (s.Active)
{
s.CustomVertAxis.Visible = true;
s.CustomVertAxis.SetMinMax(tChart1[0].YValues.Minimum, tChart1[0].YValues.Maximum);
MaxLabelsWidth = s.CustomVertAxis.MaxLabelsWidth();
lenghtTicks = s.CustomVertAxis.Ticks.Length;
extraSpaceBetweenTitleAndLabels = (s.CustomVertAxis.Title.Width);//- tChart1.Axes.Custom[nSeries].MaxLabelsWidth());
if (s.CustomVertAxis.Title.Visible)
{
s.CustomVertAxis.RelativePosition = NextXLeft;
NextXLeft = NextXLeft - (MaxLabelsWidth + lenghtTicks + extraSpaceBetweenTitleAndLabels + extraPos);
MargLeft = MargLeft + extraMargin;
}
else
{
s.CustomVertAxis.RelativePosition = NextXLeft;
NextXLeft = NextXLeft - (MaxLabelsWidth + lenghtTicks + extraPos);
MargLeft = MargLeft + extraMargin;
}
tChart1.Panel.MarginLeft = MargLeft;
tChart1.Panel.MarginRight = MargRight;
}
else
{
s.CustomVertAxis.Visible = false;
}
}
}
Could you tell us if previous code works in your end? If you have any problems, please let me know.
I hope will helps.
Thank you,

How to enable auto scroll?

I have a feeling that Im am missing something obvious but:
I have a single row of pictures in a form, in theory the pictures could go on forever. I need a scroll bar so that the user can look at all of the pictures in the row. I know I need to enable auto scroll but I have no idea how to enable it. Can someone tell me how to enable it or something that I am missing?
If it helps this is the code i am using to generate the pictures:
private void imagePalletToolStripMenuItem_Click(object sender, EventArgs e)
{
MyPalletGui.Show();
Dictionary<string,Bitmap> MyPallet = MyImageCollection.ToDictionary();
int xcor = -50;
int ycor = 0;
foreach (Bitmap curtImage in MyPallet.Values){
PictureBox myPicBox = new PictureBox();
xcor += 50;
myPicBox.Location = new Point(xcor, ycor);
myPicBox.Width = 50;
myPicBox.Height = 50;
myPicBox.Visible = true;
myPicBox.Image = new Bitmap(curtImage);
this.MyPalletGui.Controls.Add(myPicBox);
This code will do exactly what you want, it uses the Form as the ViewPort with AutoScroll:
public Form1()
{
InitializeComponent();
PopulatePictures();
}
private void PopulatePictures()
{
this.AutoScroll = true;
string[] list = Directory.GetFiles(#"C:\\Users\\Public\\Pictures\\Sample Pictures", "*.jpg");
PictureBox[] picturebox= new PictureBox[list.Length];
int y = 100;
for (int index = 0; index < picturebox.Length; index++)
{
picturebox[index] = new PictureBox();
this.Controls.Add(picturebox[index]);
picturebox[index].Location=new Point(index * 120, y);
if(x%12 == 0)
y = y + 150;
picturebox[index].Size = new Size(100,120);
picturebox[index].Image = Image.FromFile(list[index]);
}
}

MScharts graph: Overwrite column / bar value

Ok this might be a newb question but I've only been programming since a few days.
So I took an example chart from MScharts that is a dynamically created graph during run-time, code is as follows:
private void DynamicChartCreation_Load(object sender, System.EventArgs e)
{
// Create a Chart
Chart1 = new Chart();
// Create Chart Area
ChartArea chartArea1 = new ChartArea();
// Add Chart Area to the Chart
Chart1.ChartAreas.Add(chartArea1);
// Create a data series
Series series1 = new Series();
Series series2 = new Series();
// Add data points to the first series
series1.Points.Add(34);
// Add data points to the second series
series2.Points.Add(14);
// Add series to the chart
Chart1.Series.Add(series1);
Chart1.Series.Add(series2);
// Set chart control location
Chart1.Location = new System.Drawing.Point(16, 48);
// Set Chart control size
Chart1.Size = new System.Drawing.Size(360, 260);
// Add chart control to the form
this.Controls.AddRange(new System.Windows.Forms.Control[] { this.Chart1 });
}
It is a column chart and I want to be able to change the column values dynamically via a combobox.
The question is how do I overwrite the existing old values?
I tried it with Series.point.add like this:
Chart1.Series["Series1"].Points.AddY(comboBox_value);
But instead of applying the value to the first series1 column, it creates another column with the new value right next to it.
Any help would be appreciated, thanks.
I did customize in my project for axix "X", I paste code here, for your reference...
It's working fine in my environment... Please, check it in your environment.
protected void SpiLineAreaChart_Customize(object sender, EventArgs e)
{
foreach (ChartArea area in ((Chart)sender).ChartAreas) {
foreach (Axis axis in area.Axes) {
if (axis.Name.StartsWith("X")) {
foreach (CustomLabel label in axis.CustomLabels) {
counter = counter + 1;
}
lastpoint = counter;
midpoint = counter / 2;
for (int i = 0; i <= counter - 1; i++) {
if (i == 0) {
axis.CustomLabels(i).Text = MonthVal;
} else if (i == midpoint - 1) {
StartDate = StartDate.AddDays(31);
strstartdate = StartDate.ToString("MMM");
axis.CustomLabels(i).Text = strstartdate;
} else if (i == lastpoint - 1) {
StartDate = StartDate.AddDays(31);
strstartdate = StartDate.ToString("MMM");
axis.CustomLabels(i).Text = strstartdate;
} else {
axis.CustomLabels(i).Text = "";
}
}
}
}
}
}

Categories

Resources