Page 1 of 1

Chart resizing algorithm

Posted: Fri Dec 13, 2013 9:45 am
by 16567569
Hi there,

I have a software application that allows the user to place graphics(TImage's) on a chart.
I am trying to keep these images in their relative positions during/after a chart resize.

For example: If I have a pie-chart and a image is placed right in the center of the pie, I would like to keep the image in the center(as close as possible) while resizing the chart.

At present I am positioning these images by maintaining their midpoints at a percentage of the chart's width and height, but that doesn't quite do the trick - The chart's resizing is not handled in the same way by the looks of it.

Question: How is chart resizing handled? Algorithm? Or is there another way to achieve this that I am missing?

Regards

Re: Chart resizing algorithm

Posted: Fri Dec 13, 2013 3:17 pm
by yeray
Hello,

If I understood you correctly, it doesn't look very difficult to achieve with the OnResize event. You can store the position of the TImage, relative to the Chart width and height, and then use this relative position to calculate and assign the new position according to the new chart width and height in that event.
Ie:

Code: Select all

uses jpeg, Series;

var stored: boolean;
    relImCenter: TPointFloat;

procedure TForm1.FormCreate(Sender: TObject);
begin
  stored:=false;

  Chart1.Align:=alClient;
  Chart1.AddSeries(TPieSeries).FillSampleValues;

  Image1.Picture.LoadFromFile('C:\tmp\flower.jpg');

  Chart1.Draw;
  relImCenter.X:=(Image1.Left+(Image1.Width/2))*100/Chart1.Width;
  relImCenter.Y:=(Image1.Top+(Image1.Height/2))*100/Chart1.Height;

  stored:=true;
end;

procedure TForm1.Chart1Resize(Sender: TObject);
begin
  if stored then
  begin
    Image1.Left:=Round(Chart1.Width*relImCenter.X/100 - Image1.Width/2);
    Image1.Top:=Round(Chart1.Height*relImCenter.Y/100 - Image1.Height/2);
  end;
end;

Re: Chart resizing algorithm

Posted: Mon Jan 13, 2014 3:06 pm
by 16567569
Hi Yeray,

Thanks for your answer. Please excuse my delayed response.

Your answer is similar to my initial implementation - hence it does not quite solve my problem.

Below are two images which should clarify:

Both images show the entire canvas of the chart. The first image has a arrow-graphic pointing to the center of a pie chart.
Image
When I shrink( resize ) the chart, the result is:
Image
The arrow-graphic is repositioned according to your( and my initial ) solution. The arrow is not resized( might consider doing so in the future only for cases where the canvas-size is decreased ).
I am trying to keep the arrow pointing to the center of the pie-chart after resizing the canvas. Note - I'm just using a pie-chart as an example, in practice it can be any type of chart and any graphic.

Is there any way of doing so?

Kind Regards

Re: Chart resizing algorithm

Posted: Tue Jan 14, 2014 2:51 pm
by yeray
Hello,

In this example with the Pie it would be quite simple to reposition the image relative to the center of the Pie (CircleXCenter/CircleYCenter properties).
However, the difficulty here comes when you want the image position to be relative to the chart size but you keep taking some elements of the chart as reference (ie Pie center, some Bar top position, some Point, etc), while this element is resized with the chart but not with the same proportionality as the Chart.
I mean, as you see when you resize the chart in the example with the Pie, the Pie is resized, but not the legend. So you may have to calculate the proportionality relative to the Rectangle occupied by the series, not all the Chart.
I'm not sure if I've explained myself clearly enough.