Distance between axis tick and label text, and more questions

[Yeray]

Hello,

Think on the ScrollPagerTool.SubChartTChart as a different TChart, with its series and axes. Indeed, there are some shorthands like ScrollPagerTool.Series to access the first series, but it's basically a SubChart.
When you assign a series to ScrollPagerTool, the series is cloned into it, but not the custom axes. And you can't assign a custom axis from a TChart to another TChart (or SubChart). If you need a custom axis in the SubChart, you can create it manually.

[MXHW]

Thank you so much!

(1)
"[...]When you assign a series to ScrollPagerTool, the series is cloned into it, [...]"
So, if one changes e.g. data of the series of the main chart, one needs to apply the changes manually to the 'corresponding' series of the scroll pager's subchart, too?
Or is there an automatism in the background, that updates/synchronizes a Scrollpager's series with the one of the main chart?

(2) Is it possible to add a series to the scrollpager that is not in the main chart?
Think on recorded data in the file that has data of weeks. The series in the scrollpager shows a rough overview with a reduced set of the data (e.g. one value per hour). The main chart's serie shows a more detailed view of the data with e.g. a value for each second.
When the scrollpager's colorband is moved, the series in main chart shows corresponding data that is loaded from file and replaces the data of the series before the colorband's position was changed.

[Yeray]

Hello,

So, if one changes e.g. data of the series of the main chart, one needs to apply the changes manually to the 'corresponding' series of the scroll pager's subchart, too?
Or is there an automatism in the background, that updates/synchronizes a Scrollpager's series with the one of the main chart?

The automatically cloned series is linked to the main series with the DataSource property, so when the main series is updated, the cloned series also receives the update.

(2) Is it possible to add a series to the scrollpager that is not in the main chart?
Think on recorded data in the file that has data of weeks. The series in the scrollpager shows a rough overview with a reduced set of the data (e.g. one value per hour). The main chart's serie shows a more detailed view of the data with e.g. a value for each second.
When the scrollpager's colorband is moved, the series in main chart shows corresponding data that is loaded from file and replaces the data of the series before the colorband's position was changed.

That could be done manually removing the cloned series and assigning your reduced series, but then you'll also have to maintain the synchronization yourself.

Here a simple example:

scrollpager.png (22.38 KiB) Viewed 11608 times

Code: Select all

uses Chart, Series, TeeScrollPagerTool;

var Chart1: TChart;
    scrollPagerTool: TScrollPagerTool;
    mainSeries: TLineSeries;
    scrollSeries: TLineSeries;

procedure TForm1.FormCreate(Sender: TObject);
var
  i: Integer;
begin
  Chart1:=TChart.Create(Self);

  with Chart1 do
  begin
    Parent:=Self;
    Align:=alClient;
    Color:=clWhite;
    Gradient.Visible:=False;
    Walls.Back.Color:=clWhite;
    Walls.Back.Gradient.Visible:=False;
    Legend.Hide;
    View3D:=False;

    mainSeries:=TLineSeries(AddSeries(TLineSeries));
    mainSeries.FillSampleValues(1000);

    scrollSeries:=TLineSeries.Create(Self);
    scrollSeries.Color:=mainSeries.Color;
    for i:=0 to mainSeries.Count-1 do
      if i mod 10 = 0 then
         scrollSeries.AddXY(mainSeries.XValue[i], mainSeries.YValue[i]);

    scrollPagerTool:=TScrollPagerTool(Tools.Add(TScrollPagerTool));
    scrollPagerTool.AddSeries(scrollSeries);
    scrollPagerTool.SubChartTChart.SeriesList.Delete(0);
  end;
end;

procedure TForm1.BAddDataClick(Sender: TObject);
var i: Integer;
    d: Double;
begin
  d:=mainSeries.YValues.Range / 10;
  for i:=0 to 99 do
  begin
    mainSeries.Add(mainSeries.YValue[mainSeries.Count-1]+(random*d)-d/2);

    if (mainSeries.Count-1) mod 10 = 0 then
       scrollSeries.AddXY(mainSeries.XValue[mainSeries.Count-1], mainSeries.YValue[mainSeries.Count-1]);
  end;
end;

[MXHW]

Hello,

The main concept is that the area in which the signals (aka series) are displayed only takes up the space left by the dynamic number of axes. So, if a file has four channels, each signal in the chart has one axis. The four axes are either to the left side or the right side (or mixed eg. 2 left, 2 right) of the painting area.
The "signal area" takes the rest: Its rectangle's left and right side is the height of the custom axes (Y), the rectangle's top/bottom is the width of the time scale (X, 'bottom axis').

So, inherently, the first data point of a signal (series) is always painted some pixels (borders, padding, margins etc) to the right of the right most axis (if all axes are left), because the Minimum of 'my' X axis starts on the left side of the rectangle of the "signal area".
So are the horizontal lines of a grid.

In the example above, all the series and grids are draw at the right of the right most axis. So as I understand, it fits that description.
However, you replied that wasn't the desired behaviour. I'm getting confused.
I'd suggest to just take "paint" and manually draw how you want it to look like and we'll prepare a simple example.

Two pictures:
One axis: https://www.directupload.eu/file/d/8826 ... oz_jpg.htm
Two Axes: https://www.directupload.eu/file/d/8826 ... 6r_jpg.htm

Rectangles:
A) One rectangle with the curves/signals --> "signal area"
B) One rectangle with axes/scales, width of single axis rectangle identical to others --> "axes rectangle"
C) One rectangle with bottom axis/scale
D) One big rectangle that encloses the entire picture
E) 'Rest' rectangle in the bottom-left corner

Width of one rectangle (B): Font size (height! 90° rotation), length of major tick, some margins ( |<Margin>Title/Fontheight <Margin>Major Tick| )
Width of one axis' rectangle multiplied with number of axes = width of 'axis rectangle'

Height of bottom axis (C): Font size (height), length of major tick, margins analog to the ones of the vertical axes

Left of rectangle "signal area" and "bottom axis" = D.left + B.width
Bottom of rectangle "signal area" and "axes rectangle" = D.bottom - C.height

width of signal area = width of bottom axis
height of signal area = height of left axes


If the number of signals (axes) changes, the width of (B) changes, so that signal area has more or less space (width).
The grid is always painted in the signal area's rectangle only.
All font sizes, margins and rectangle values (left/top/right/bottom, width/height) are pixels MULDIV'd with screen DPI.


In your example (https://www.steema.com/support/viewtopi ... 289#p81015) I do not understand how to calculate the values dynamically if the number of axes changes.

In the example:
...Chart1.MarginLeft:=15;
...Chart1.CustomAxes[1].PositionPercent:=-10;

These values are okay for the current situation, two axes -- the chart gets a margin of "15" (unit? percent? of what?) for its left side and the custom axes are moved with negative relative offset (-10).

Why -10? Because it looked best after testing some values? Or was that value somehow calculated from font size and other parameters?
Is the -10% offset from the width of the chart? If so, if the left margin of the chart changes (15->20) the -10% offset of axes position will result in a different absolute offset (because the width of the chart is smaller than with left-margin=15). So the axes will have a smaller (absolute) width? I want the axes to have a fixed width depending on font size, tick length and margins (distance text to border, distance text to tick lines).

Thanks for your patience!

[Yeray]

Hello,

In your example (https://www.steema.com/support/viewtopi ... 289#p81015) I do not understand how to calculate the values dynamically if the number of axes changes.

That was a simple example to demonstrate how to place the axes to draw the series without the axes overlapping the series. Of course that could be enhanced.

Here there's a more advanced example which places the axes considering the MaxLabelsWidth, TickLength and adding some extra margin.

AutoAxes.png (120.74 KiB) Viewed 8460 times

AutoAxes.zip

(2.13 KiB) Downloaded 132 times

[MXHW]

Thanks for the example.
For some reason I have to call 'PlaceAxes' in the 'OnLegendClick' handler (add/remove series to/from chart) with a non-zero value for MargLeft (example below). Otherwise the left-most axis (with smallest offset) is drawn partly offscreen.
...PlaceCustomAxes(0, 0, 0, 12, 0); // extraPos=12
Calling 'PlaceAxes' for the first time works without providing parameter values: PlaceAxes();.
But, okay, that's not so important, even if I do not understand that behaviour.

The attached image shows, that the scrollpager's chart is horizontally not aligned with main chart. (Both bottom axes should start at same x position and have the identical length/end position.)

After calling PlaceAxes and adding series to the scrollpager:

Code: Select all

  
ScrollPagerTool.SubChartTChart.MarginUnits := muPixels;
ScrollPagerTool.SubChartTChart.MarginLeft := ViewChart.MarginLeft;
ScrollPagerTool.SubChartTChart.MarginRight := ViewChart.MarginRight;

Ja, that does not do the trick... what do I need to do, to have the scrollpager's bottom axis start and end position at corresponding positions, please?

[Yeray]

Hello,

I've made a variant of that AutoAxes example with an improved version of the PlaceAxes function, which is now called at the OnBeforeDraw event.

AutoAxes.png (73.47 KiB) Viewed 3197 times

AutoAxes.zip

(2.41 KiB) Downloaded 94 times

[MXHW]

Thanks for the new example.

Any idea about positioning the chart and axes of the scrollpager to fit the requirements in my previous post?

The attached image shows, that the scrollpager's chart is horizontally not aligned with main chart. (Both bottom axes should start at same x position and have the identical length/end position.)

After calling PlaceAxes and adding series to the scrollpager:

Code: Select all

  
ScrollPagerTool.SubChartTChart.MarginUnits := muPixels;
ScrollPagerTool.SubChartTChart.MarginLeft := ViewChart.MarginLeft;
ScrollPagerTool.SubChartTChart.MarginRight := ViewChart.MarginRight;

Ja, that does not do the trick... what do I need to do, to have the scrollpager's bottom axis start and end position at corresponding positions, please?

I tried modifying the subcharts panel: margin top and bottom can be modified, but left and right ignore the values set.
The top of the chart 'loses' height with increasing top-margin. Ok, works.
But the left (and) right margin setting ignores any value.

panelmargin.png (39.88 KiB) Viewed 1326 times

I tried modifying the axis positions.
The left axis can be moved to the left, but the bottom axis vertical position is only movable to the right, because setting "Start %" cannot be negative!

axisposition.png (49.76 KiB) Viewed 1326 times

How to align the scrollpager's axes with the ones from the main chart, please?