Page 1 of 1

Sizing charts in ChartLayout

Posted: Thu Nov 23, 2023 2:43 pm
by 16494596
Hi,
I have difficulties sizing charts using tChartLayout. I have five charts in one row. The first chart should have a left axis, while the other four should just have a line with no labels or ticks. That is easily achieved by setting only the left axis on the leftmost chart to visible.
I managed to get the charts to be the same size, by setting .... LeftAxis.Resizecharts to false for the leftmost chart but then the axis on the leftmost chart does not show the labels (only the ticks). If I, in my naivety, add a marginleft to the leftmost chart then I am back to square one: Visible axis labels , but more narrow chart.I hope there is a solution for this.
Below is the code (The form is just blank)
Best
Jon

Code: Select all

unit Gtest;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, VCLTee.TeeChartLayout, Vcl.StdCtrls,
  VCLTee.TeePNG,  VCLTee.TeExport,  VclTee.TeeGDIPlus,
  VCLTee.TeEngine, Vcl.ExtCtrls, VCLTee.TeeProcs, VCLTee.Chart, VCLTee.Series,
  VCLTee.TeeEdit,  VCLTee.TeePreviewPanel;

type
  TForm3 = class(TForm)
    procedure FormCreate(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
    Procedure AddCharts;
  end;

var
  Form3: TForm3;
  ChLay: TChartLayout;
implementation

{$R *.dfm}

Procedure FormatChart(ch: Tchart);
Begin
    Ch.Border.Visible:=False;
    Ch.MarginLeft:=3;
    Ch.MarginRight:=3;
    Ch.View3D:=False;
    Ch.Legend.Visible:=False;
    Ch.BottomAxis.Grid.Visible:=False;
    Ch.LeftAxis.Grid.Style:=psClear;  //psDot;
    Ch.LeftAxis.Grid.SmallDots:=True;
    Ch.LeftAxis.Grid.Visible:=False;
    Ch.Walls.Visible:=False;
    Ch.Walls.Right.Visible:=False;
    Ch.Walls.Left.Visible:=True;
End;

procedure TForm3.AddCharts;
var ChartCounter : Integer;
    tmp,tmp2 : TChartSeries;
begin
  ChLay:=TchartLayout.Create(self);
  ChLay.Parent:=self;
  ChLay.Top:=20;
  ChLay.Left:=20;
  ChLay.Columns:=5;
  ChLay.Width:=Form3.Width- ChLay.Left*2;
  ChLay.Height:=Form3.Height-40;
  ChLay.HorzScrollBar.Visible:=False;
  ChLay.ChartWidth:=ChLay.Width div ChLay.Columns -20 ;


  for ChartCounter:=0 to 4 do begin
    // Create two series
    tmp:=TLineSeries.Create(Self);
    tmp.FillSampleValues;
    tmp2:=TLineSeries.Create(Self);
    tmp2.FillSampleValues;

    // Set a different color for each series
    tmp.Color:=GetDefaultColor(ChartCounter);
    tmp2.Color:=GetDefaultColor(ChartCounter+10);
    // Add series to layout
    ChLay.Add('Chart '+IntToStr(ChartCounter)).AddSeries(tmp);
    ChLay.charts[ChartCounter].chart.addseries(tmp2);
    FormatChart(ChLay.Charts[ChartCounter].Chart);


   // Special case for leftmost chart
     if ChartCounter mod 5 <> 0  then Begin
          ChLay.Charts[ChartCounter].Chart.LeftAxis.Labels:=False;
     End else Begin
        ChLay.Charts[ChartCounter].Chart.LeftAxis.ResizeChart:=False ;
        //ChLay.charts[ChartCounter].Chart.MarginLeft:=20;
     End;

  end;  // for

end; // addcharts

procedure TForm3.FormCreate(Sender: TObject);
begin
   AddCharts;
end;

end.

Re: Sizing charts in ChartLayout

Posted: Mon Nov 27, 2023 11:13 am
by yeray
Hello Jon,

TChartLayout is designed to have all the charts with the same size, including the axes. If you show the axis in some of them, part of the chart "zone" (BoundsRect) is used to draw the labels etc. So that's per design.
However, once all the charts have been added, you could tweak the BoundsRect. Ie:

Code: Select all

  with ChLay.Charts[0].Chart.Axes.Left do
    wOffset:=MaxLabelsWidth+TickLength+LabelsSeparation;

  lOffset:=0;
  for ChartCounter:=1 to 4 do begin
     with ChLay.Charts[ChartCounter].Chart do begin
        l:=BoundsRect.Left-lOffset;
        t:=BoundsRect.Top;
        w:=BoundsRect.Width-wOffset;
        h:=BoundsRect.Height;
        BoundsRect:=Rect(l, t, l+w, t+h);
     end;
     lOffset:=wOffset*ChartCounter;
  end;

Re: Sizing charts in ChartLayout

Posted: Mon Nov 27, 2023 9:14 pm
by 16494596
Dear Yeray,
Thanks a lot - this is nearly exactly what I wanted. However, the leftmost chart is still a little bit smaller. It seems that some factor is missing in the wOffset calculation.
Best
Jon

Re: Sizing charts in ChartLayout

Posted: Mon Nov 27, 2023 9:40 pm
by yeray
Hello Jon,

Try adding Axes.Left.Axis.Width to the wOffset.

Re: Sizing charts in ChartLayout

Posted: Tue Nov 28, 2023 9:33 am
by 16494596
Hello,
That improves things, but the leftmost chart is still a bit more narrow.
Best,
Jon

Re: Sizing charts in ChartLayout

Posted: Wed Nov 29, 2023 12:11 pm
by yeray
Hello,

This is what I get, where I measure 61 pixels in all the bottom axes.
layout.png
layout.png (24 KiB) Viewed 27776 times
Note this is without adding Axes.Left.Axis.Width to the wOffset and commenting the ResizeChart line:

Code: Select all

   // Special case for leftmost chart
     if ChartCounter mod 5 <> 0  then Begin
          ChLay.Charts[ChartCounter].Chart.LeftAxis.Labels:=False;
     End else Begin
        //ChLay.Charts[ChartCounter].Chart.LeftAxis.ResizeChart:=False ;
        //ChLay.charts[ChartCounter].Chart.MarginLeft:=20;
     End;

Re: Sizing charts in ChartLayout

Posted: Wed Nov 29, 2023 3:17 pm
by 16494596
Hi,
Strange. I get:
Capture.PNG
Capture.PNG (31.35 KiB) Viewed 27766 times
The code is the original code, plus your suggested changes.

(Rad Studio 11.2 and the latest version of Teechart Build 2023.39.231109)

Best,
Jon

Re: Sizing charts in ChartLayout

Posted: Mon Dec 04, 2023 9:04 am
by yeray
Hello,

I tested it again and changed the way to calculate the wOffset again. This way looks more stable:

Code: Select all

  ChLay.Charts[0].Chart.Draw;
  with ChLay.Charts[0].Chart do
       wOffset:=BoundsRect.Width-Axes.Bottom.IAxisSize;

  ChLay.Charts[1].Chart.Draw;
  with ChLay.Charts[1].Chart do
       wOffset:=wOffset-(BoundsRect.Width-Axes.Bottom.IAxisSize)+2;

  lOffset:=0;
  for ChartCounter:=1 to 4 do begin
     with ChLay.Charts[ChartCounter].Chart do begin
        l:=BoundsRect.Left-lOffset;
        t:=BoundsRect.Top;
        w:=BoundsRect.Width-wOffset;
        h:=BoundsRect.Height;
        BoundsRect:=Rect(l, t, l+w, t+h);
     end;
     lOffset:=wOffset*ChartCounter;
  end;
Here the test project:
ChartLayoutTest.zip
(1.76 KiB) Downloaded 1281 times

Re: Sizing charts in ChartLayout

Posted: Tue Dec 12, 2023 8:44 pm
by 16494596
Hi Yeray,
Yes, that works fine.
Interestingly, I just installed Rad Studio 12. Your previous version works in that, as does the new one.
In 11.2, only the new one works.
Thanks a lot for your effort. It is rather useful to obtain something similar to panel graphs in R.
Best
Jon

Re: Sizing charts in ChartLayout

Posted: Wed Dec 13, 2023 6:54 am
by yeray
Hello Jon,

I'm glad to hear it works fine now!