TChart alignment of multiple charts

[darcy]

HI,
I have multiple charts positioned above each other and need to align both the left and right axes i.e. fix the width of all charts regardless of data present. Some charts have multiple axes i.e. labels on right, while others are simple charts with labels/ticks only on left axis.
The bottom axes is the same for all charts, TDateTime, and I want to be able to show a fixed time period e.g. 72hrs, regardless of whether there is data for that time. I have enclosed an image of the existing. To sum up:

1) How do I fix the widths for multiple charts
2) How do I fix the bottom axis data to display a fixed time period regardless of data present

I have searched for similar articles but could not find a great match. Please feel free to direct me to any existing articles if present.

Thanks & Merry Christmas,
D'Arcy

[Yeray]

Hi darcy,

1. Take a look at the following example that shows how you could set the margins to have two charts aligned:

Code: Select all

procedure TForm1.FormCreate(Sender: TObject);
begin
  Series1.FillSampleValues(100);
  Series2.FillSampleValues(200);
  Series1.VertAxis:=aBothVertAxis;

  LeftAlignCharts([Chart1,Chart2],100,600);

  Chart1.Draw;
  Chart2.Draw;

  RightAlignCharts([Chart1,Chart2],100);
end;

procedure TForm1.LeftAlignCharts(Const Charts: Array of TCustomChart; aLeft: Integer; aWidth: Integer);
var i: Integer;
begin
  for i := Low(Charts) to High(Charts) do
  With Charts[i] do
  begin
    Left := aLeft;
    MarginLeft := 0;
    Width := aWidth;
    Axes.Left.TitleSize := 15;
    Axes.Left.LabelsSize := 30;
    Axes.Left.LabelsAlign := alDefault;
  end;
end;

procedure TForm1.RightAlignCharts(Const Charts: Array of TCustomChart; aRight: Integer);
var i: Integer;
begin
  for i:=Low(Charts) to High(Charts) do
  With Charts[i] do
  begin
    MarginUnits:=muPixels;
    Legend.PositionUnits:=muPixels;
    Legend.Left:=530;
  end;

  if Charts[0].Axes.Bottom.IAxisSize < Charts[1].Axes.Bottom.IAxisSize then
  begin
    Charts[0].MarginRight:=aRight;
    Charts[1].MarginRight:=aRight+Charts[0].Axes.Right.MaxLabelsWidth+Charts[0].Axes.Right.TickLength;
  end
  else
  begin
    Charts[1].MarginRight:=aRight;
    Charts[0].MarginRight:=aRight+Charts[1].Axes.Right.MaxLabelsWidth+Charts[1].Axes.Right.TickLength;
  end;
end;

2. Have you tried with the axis Increment property?

Code: Select all

Chart2.Axes.Bottom.Increment:=50;

[darcy]

Hi Yeray,
Thanks for the reply.
1) I have been able to force the charts to be aligned correctly using CustomChartRect = true and defining the rect size relevant to the parent control. RESOLVED
2) I still am having issues forcing the charts to be fixed to a set time period for the x-axis e.g. 72hrs, despite the presence of data. The increment works fine but will not plot markers along the x-axis after the last data value. What I mean is if I add a dummy data point at the very last X-axis point it will behave as I want. I want the time increments to increase to 72hrs despite the presence of data.

I hope the above makes sense.

Thanks
D'Arcy.

[Yeray]

Hi D'Arcy,

Then I think that the only solution would be using custom labels like in the demo at All features/Welcome !/Axes/Labels/Custom Labels. You can clear all the labels from the bottom axis and add the labels you wish and with the text you want.

[Mark]

I'm trying to do a similar thing. I have multiple charts which I want to align so the data along the x-axis is in the same position. I can set the left side no problem but because the right axis width varies I can't get an exact alignment.

I tried the above code but they don't seem to address this issue unless I missed something.

Is there any way of doing this?

Thanks
Mark

Chart1.jpg (104.78 KiB) Viewed 14467 times

[Mark]

I think I sorted it.

At design time it's down to setting the Axes/Label/Style size. In code you set the LabelsSize property.

By the way I'm really like the product. It's so flexible. Just so many features to learn!

Mark

[Yeray]

Hello Mark,

Have in mind that some properties (like axis MaxLabelsWidth) need the chart to be drawn to give a correct value.
Take a look at the tutorials, demos and the support forums, and don't hesitate to let us know any doubt you have with the component!