Steema Central

Posted: **Mon Dec 05, 2016 9:35 pm**

I need to create a chart that looks something like this:

The pointer on at ~2 o'clock indicates their position (117 out of 150).

Can that be done with a TChart series? If so, how?

Much appreciated,

Ed Dressel

Posted: **Fri Dec 09, 2016 2:29 pm**

Hello Dressel,

I would like suggest you take a look in the Demo project examples, specifically, All Features->Chart Styles->Extended->Donut and you can try to work with AfterDraw event to draw the TextOut and mark postions.
Also, If you are interested you can take a look in the All Features->Chart Styles->Gauges.

Note you find the TeeChart Pro Demo example under path below:
%Program Files (x86)%\Steema Software\Steema TeeChart Pro VCL FMX 2016.19\Examples

Hoping this helps
Thanks in advance

Posted: **Tue Dec 13, 2016 8:48 pm**

Couple items:

1.The donut example doesn't look like it gets very close (does it do 180 degrees, support in-series labels?), and the gauges example is lacking as well (no labels).

2. I do not have an "examples" directory. I installed the source code version.

I also searched your website and did not see where I could download the with source code.

Thank you,

Ed Dressel

Posted: **Wed Dec 14, 2016 3:06 pm**

Hello,

With a few tricks, the only thing I haven't been able to achieve is to draw the texts following a curved path (but this should be possible with GR32_Text).

: Donut.png (14.05 KiB) Viewed 9035 times

Code: Select all

uses TeeDonut, Series, TeeTools, TeCanvas;

var myDonut: TDonutSeries;

procedure TForm1.FormCreate(Sender: TObject);
begin
  Chart1.View3D:=False;
  Chart1.Legend.Visible:=False;
  Chart1.Title.Visible:=False;
  Chart1.Gradient.Visible:=False;
  Chart1.Color:=clWhite;
  Chart1.Hover.Visible:=False;

  myDonut:=Chart1.AddSeries(TDonutSeries) as TDonutSeries;
  with myDonut do
  begin
    AddPie(40, 'On Track', RGB(88, 150, 30));
    AddPie(10, 'Good', RGB(192, 200, 50));
    AddPie(10, 'Far', RGB(255, 200, 40));
    AddPie(50, 'Needs Attention', RGB(246, 69, 50));

    Shadow.Visible:=False;
    AngleSize:=180;
    Pen.Color:=clWhite;

    Marks.Font.Color:=TTeeCanvas.ColorFrom(Marks.Font.Color,255);
    Marks.Font.Size:=11;
    Marks.ArrowLength:=-150;
    Marks.Arrow.Visible:=False;
    Marks.Transparent:=True;
    DonutPercent:=60;

    BeforeDrawValues:=Series1BeforeDrawValues;
    AfterDrawValues:=Series1AfterDrawValues;
  end;

  Chart1.Draw;
  with Chart1.Tools.Add(TAnnotationTool) as TAnnotationTool do
  begin
    Text:='117';
    Shape.Font.Color:=RGB(88, 150, 30);
    Shape.Font.Size:=50;
    Shape.Transparent:=True;
    Shape.CustomPosition:=True;

    Chart1.Canvas.Font.Assign(Shape.Font);
    Shape.Left:=myDonut.CircleXCenter - Chart1.Canvas.TextWidth(Text) div 2;
    Shape.Top:=myDonut.CircleYCenter - Chart1.Canvas.TextHeight(Text) div 2;
  end;
end;

procedure TForm1.Series1BeforeDrawValues(Sender: TObject);
begin
  Chart1.ChartRect:=Rect(0,225,Chart1.Width, Chart1.Height);
end;

procedure TForm1.Series1AfterDrawValues(Sender: TObject);
var triangle: array of TPoint;
    tmpAngle: Double;
    tmpX, tmpY, i: Integer;
begin
  with Chart1.Canvas do
  begin
    Brush.Color:=Chart1.Color;
    Pen.Visible:=False;

    tmpAngle:=40;
    SetLength(triangle, 3);

    myDonut.AngleToPos(tmpAngle*TeePiStep, myDonut.XRadius*(myDonut.DonutPercent+7)*0.01, myDonut.YRadius*(myDonut.DonutPercent+7)*0.01, tmpX, tmpY);
    triangle[0].X:=tmpX;
    triangle[0].Y:=tmpY;

    myDonut.AngleToPos((tmpAngle+5)*TeePiStep, myDonut.XRadius*(myDonut.DonutPercent-1)*0.01, myDonut.YRadius*(myDonut.DonutPercent-1)*0.01, tmpX, tmpY);
    triangle[1].X:=tmpX;
    triangle[1].Y:=tmpY;

    myDonut.AngleToPos((tmpAngle-5)*TeePiStep, myDonut.XRadius*(myDonut.DonutPercent-1)*0.01, myDonut.YRadius*(myDonut.DonutPercent-1)*0.01, tmpX, tmpY);
    triangle[2].X:=tmpX;
    triangle[2].Y:=tmpY;

    Polygon(triangle);

    Font.Assign(myDonut.Marks.Font);
    Font.Color:=clWhite;
    for i:=0 to myDonut.Count-1 do
    begin
      myDonut.AngleToPos(myDonut.Angles[i].MidAngle, myDonut.XRadius*myDonut.DonutPercent*0.015, myDonut.YRadius*myDonut.DonutPercent*0.015, tmpX, tmpY);
      RotateLabel(tmpX, tmpY, myDonut.Labels[i], ((myDonut.Angles[i].MidAngle)/TeePiStep)-90);
    end;
  end;
end;

Steema Central

Create a specific chart

Create a specific chart

Re: Create a specific chart

Re: Create a specific chart

Re: Create a specific chart