[SOLVED] Bottom axis disappears

[artem101]

Hello all!

I want to display some data with TChart divided by years. I add TDateTimeIntervalChartSource and set Steps to dtsYears.

Code: Pascal  [Select][+][-]

1. object Form1: TForm1
2.   Left = 324
3.   Height = 325
4.   Top = 171
5.   Width = 477
6.   Caption = 'Form1'
7.   ClientHeight = 325
8.   ClientWidth = 477
9.   LCLVersion = '2.0.12.0'
10.   object Chart1: TChart
11.     Left = 0
12.     Height = 325
13.     Top = 0
14.     Width = 477
15.     AxisList = <    
16.       item
17.         Marks.LabelBrush.Style = bsClear
18.         Minors = <>
19.         Title.LabelFont.Orientation = 900
20.         Title.LabelBrush.Style = bsClear
21.       end    
22.       item
23.         Alignment = calBottom
24.         Marks.Format = '%2:s'
25.         Marks.LabelBrush.Style = bsClear
26.         Marks.Source = DateTimeIntervalChartSource1
27.         Marks.Style = smsLabel
28.         Minors = <>
29.         Title.LabelBrush.Style = bsClear
30.       end>
31.     Foot.Brush.Color = clBtnFace
32.     Foot.Font.Color = clBlue
33.     Title.Brush.Color = clBtnFace
34.     Title.Font.Color = clBlue
35.     Title.Text.Strings = (
36.       'TAChart'
37.     )
38.     Align = alClient
39.     object RedBarSeries: TBarSeries
40.       Title = 'Red'
41.       BarBrush.Color = clRed
42.       BarOffsetPercent = -25
43.       BarWidthPercent = 25
44.       BarWidthStyle = bwPercentMin
45.       Source = RedRandomChartSource
46.     end
47.     object YellowBarSeries: TBarSeries
48.       Title = 'Yellow'
49.       BarBrush.Color = clYellow
50.       BarWidthPercent = 25
51.       BarWidthStyle = bwPercentMin
52.       Source = YellowRandomChartSource
53.     end
54.     object BlueBarSeries: TBarSeries
55.       Title = 'Blue'
56.       BarBrush.Color = clBlue
57.       BarOffsetPercent = 25
58.       BarWidthPercent = 25
59.       BarWidthStyle = bwPercentMin
60.       Source = BlueRandomChartSource
61.     end
62.   end
63.   object RedRandomChartSource: TRandomChartSource
64.     PointsNumber = 6
65.     RandSeed = 935630190
66.     XMax = 38353
67.     XMin = 36526
68.     YMax = 100
69.     Left = 358
70.     Top = 62
71.   end
72.   object YellowRandomChartSource: TRandomChartSource
73.     PointsNumber = 6
74.     RandSeed = 935695833
75.     XMax = 38353
76.     XMin = 36526
77.     YMax = 100
78.     Left = 358
79.     Top = 128
80.   end
81.   object BlueRandomChartSource: TRandomChartSource
82.     PointsNumber = 6
83.     RandSeed = 935750986
84.     XMax = 38353
85.     XMin = 36526
86.     YMax = 100
87.     Left = 358
88.     Top = 200
89.   end
90.   object DateTimeIntervalChartSource1: TDateTimeIntervalChartSource
91.     Steps = [dtsYear]
92.     Left = 224
93.     Top = 40
94.   end
95. end

Looks fine, but if I make window a bit wider bottom axis disappears. How to make it always visible?

Thanks.

[wp]

To be honest, I don't know why the Steps property has been published, I don't see any good usage for it. It works like this: The labelling algorithm decides which labels to put to the axes, depending on the axis length in pixels and constraints due to allowed labels count, label distance etc. In case of date/time data it changes the date/time units for optimimum label selection, and these units are stored internally. Steps means: "Display labels only when these internally stored units are among the selected Steps elements". When you set Steps to dtsYears, you get labels only when the internal units are years. When you increase the chart width, the labelling algorithm may switch to dtsMonths, and your year labels will be gone. You could add dtsMonths to the Steps property, but now you will have intermediate labels for x values that are meaningless in a bar chart at yearly intervals.

If I understand this correctly I'd recommand to replace the TDateTimeIntervalChartSource by an ordinary TListChartSource, and populate it with the year values manually:
- Delete the TDateTimeIntervalChartSource
- Add a TListChartSource and assign it to the Marks.Source of the bottom axis. Set the BottomAxis.Marks.Style to smsXValue.
- Click on the '...' next to its DataPoints property to open the DataPoints editor
- In the X column enter the year values that you want to see. You can add extra values if you can expect that your "real data range" might be larger than anticipated now. Or you could generate the labels by code:

Code: Pascal  [Select][+][-]

1. procedure TForm1.CreateYearLabels;
2. var
3.   year1, year2, year: Integer;
4. begin
5.   year1 := trunc(Chart1Barseries1.MinXValue);
6.   year2 := trunc(Chart1Barseries1.MaxXValue) + 1;
7.   ListChartSource1.Clear;
8.   for year := year1 to year2 do
9.     ListChartSource1.Add(year, 0);
10. end;
11.  

[artem101]

By the way, what SuppressPrevUnit propery does? I thought it disable switching to more detailed unit, but I didn't see any difference.

[wp]

Maybe the naming of the property is confusing. But the idea is as follows: Suppose that the internal steps are dtsMonths, then labels, by default when "SuppressPrevUnit" is true, are for example "2022/1", "2", "3", ... "12", "2023/1", "2", i.e. the year is only displayed after the year has changed, or: the "previous" unit is suppressed. When, on the other hand, "SuppressPrevUnit" is false, the year is always shown: "2022/1", "2022/2", "2022/3", ...

[artem101]

I'd recommand to replace the TDateTimeIntervalChartSource by an ordinary TListChartSource, and populate it with the year values manually

Thanks for advice. This is what I need, but there is small problem - if choosed interval very big many labels overlaps each other. Is it possible to autohide some of them (for example: 2000 - 2005 - 2010 - 2015 - 2020)?

[artem101]

if choosed interval very big many labels overlaps each other. Is it possible to autohide some of them

I found solution:

Code: Pascal  [Select][+][-]

1. Marks.OverlapPolicy = opHideNeighbour

And my problem completely solved.

[wp]

I don't like the opHideNeighbour option because it very easily can result in irregularly spaced labels which may be confusing to the user. In this particular case in which you only want year labels I would use two chart sources and check in the OnExtentChanged and OnResize events which steps the DateTimeInterval will be using. If it is dtsYear I'd label the x axis by means of the DateTimeIntervalChartSource which is constructed to consider overlapping labels automatically. If the steps are different from dtsYear I'd use the ListChartSource which is populated to contain only the year values and omits the intermediate labels in dtsMonth mode, for example.

Please have a look at the attached demo.