Create a specific chart

TeeChart VCL for Borland/CodeGear/Embarcadero RAD Studio, Delphi and C++ Builder.
Post Reply
Test Always
Newbie
Newbie
Posts: 14
Joined: Mon Jan 18, 2016 12:00 am

Create a specific chart

Post by Test Always » Mon Dec 05, 2016 9:35 pm

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

Image

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

Sandra
Site Admin
Site Admin
Posts: 3132
Joined: Fri Nov 07, 2008 12:00 am

Re: Create a specific chart

Post by Sandra » 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
Best Regards,
Sandra Pazos / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Image Image Image Image Image Image
Instructions - How to post in this forum

Test Always
Newbie
Newbie
Posts: 14
Joined: Mon Jan 18, 2016 12:00 am

Re: Create a specific chart

Post by Test Always » 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

Yeray
Site Admin
Site Admin
Posts: 9614
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Create a specific chart

Post by Yeray » 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
Donut.png (14.05 KiB) Viewed 9109 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;
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Post Reply