Circular gauges - labels and layout

[jremy]

Started to use Circular gauges for a current project and struggling with a couple of items:

I've attached a screen shot to help describe my issue:

1) I've created a chart with 4 circular gauges. I'm trying to get a label/tite to display per gauge.. for example, directly underneath each gauge... or perhaps embedded within the face of the gauge itself, for example over the numeric gauge that I also display. I do have a legend displayed underneath the chart but ideally the each gauge has it's own label/title shown next to it. Can this be done?

2) When using circular gauges, is it possible for the chart to "auto arrange" each gauge within the window shown by limiting the number of gauges per line.. and in effect "wrap" the remaining gauges to the next line? I have a need for 8 total circular gauges, and when I place all 8 on a single chart they all apread across on a single line... making each gauge small. I DO want all gauges shown on the screen all the time... so I don't want a "paging" situation where 4 are shown.. and 4 are hidden. Is there a way to tell the chart to display "4 per line max"... and to wrap the remaining on the same screen? To experiment I ended up creating two charts with 4 gauges per chart. While this did accompish what I want for the most part, it causes other challenges such as scaling issues per chart when the screen is resized.

I'd appreciate your feedback.

John

[Narcís]

Hi John,

1. One option would be using the TextMarker property of the embedded NumericGauge, for example:

Code: Select all

  Series1.NumericGauge.TextMarker.Text:='HELLO';

Another option is custom drawing text or placing an annotation tool in the OnAfterDraw event based on the NumericGauge position, for example:

Code: Select all

procedure TForm1.FormCreate(Sender: TObject);
begin
  Series1.NumericGauge.Visible:=true;
end;

procedure TForm1.Chart1AfterDraw(Sender: TObject);
var
  Rect  : TRect;
  text  : String;
  tmp   : Integer;
begin
  Rect:=Series1.NumericGauge.CustomBounds;
  text:='Hello!';
  Chart1.Canvas.Font.Color:=ClRed;
  tmp:=Chart1.Canvas.TextHeight(text);
  Chart1.Canvas.TextOut(Rect.Left, Rect.Top - tmp, text);
end;

2. You could try doing something as in the All Features\Welcome!\Chart Sytles\Standard\Pie\Multiple Pies example in the new features demo, available at TeeChart's program group.

[jremy]

Thank you for the ideas. As for the first item... your second suggestion of drawing custom text in the AfterDraw I believe is workable. Instead of positioning the text/label above the numeric gauge I changed the coordinates so that the text shows up under the circular gauge itself.... that way the text stands out nicely. The only challenge with this technique will be to keep the text in proportion (size/position) to the gauge itself as a user resizes the window and the gauges slide accordingly. Do you have any suggestions for "auto scaling" the added text to stay in sync with the respective circular gauge?

As for item 2.... thank you for pointing me to the piechart demo... I will review to see if it will work for me.

Thanks!
John

[Yeray]

Hi John,

The only challenge with this technique will be to keep the text in proportion (size/position) to the gauge itself as a user resizes the window and the gauges slide accordingly. Do you have any suggestions for "auto scaling" the added text to stay in sync with the respective circular gauge?

You could set a Canvas.Font.Size proportional to the size of the chart. Here you have an example:

Code: Select all

procedure TForm1.Chart1AfterDraw(Sender: TObject);
var
  Rect  : TRect;
  text  : String;
  tmp   : Integer;
begin
  Rect:=Series1.NumericGauge.CustomBounds;
  text:='Hello!';
  Chart1.Canvas.Font.Color:=ClRed;
  Chart1.Canvas.Font.Size:=Round(Min(Chart1.Width,Chart1.Height)/30);
  tmp:=Chart1.Canvas.TextHeight(text);
  Chart1.Canvas.TextOut(Rect.Left, Rect.Top - tmp, text);
end;