Interrelationship diagrams (shapes connected with arrows)

TeeChart for Microsoft Visual Studio .NET, Xamarin Studio (Android, iOS & Forms) & Monodevelop.
Post Reply
bairog
Newbie
Newbie
Posts: 78
Joined: Fri Dec 07, 2018 12:00 am

Interrelationship diagrams (shapes connected with arrows)

Post by bairog » Mon Oct 26, 2020 1:00 pm

Hello.
I need to draw interrelationship diagrams (shapes connected with arrows) to display team members relationships.
Simple example
Image
a bit more complex
Image
and sophisticated one
Image
I've expected to have "shapes (points), connected with arrows" diagram type in your editor but I failed to find any.
Maybe it can be drawn by a combintaion of two diagram types? which one?
Thank you.

Christopher
Guru
Posts: 1320
Joined: Fri Nov 15, 2002 12:00 am

Re: Interrelationship diagrams (shapes connected with arrows)

Post by Christopher » Tue Oct 27, 2020 1:50 pm

Hello,

All of the TeeChart Series types plot values, either of two (x,y) or three (x,y,z) dimensions - if I understand correctly, you are looking to draw diagrams rather than plot values, which while not the core function of TeeChart can actually be done.

The way is to draw directly onto TeeChart is by one of the Canvas Events; following is a small example to get you started:

Code: Select all

        private void InitializeChart(TChart chart)
        {
            void Chart_AfterDraw(object sender, Graphics3D g)
            {
                var center = new Point(100, 100);
                g.Brush.Color = Color.Blue;
                g.Pen.Color = Color.Red;

                var ellipseRect = Utils.FromLTRB(center.X - 50, center.Y - 50, center.X + 50, center.Y + 50);
                g.Ellipse(ellipseRect);
                var text = "AAAA";
                g.Font.Color = Color.Yellow;
                g.Font.Bold = true;
                g.TextOut(center.X - (Utils.Round(g.TextWidth(text) / 2)), center.Y - (Utils.Round(g.TextHeight(text) / 2)), text);

                var point = g.PointFromCircle(ellipseRect, 310);

                g.Brush.Color = Color.Pink;
                g.Pen.Visible = false;
                g.Arrow(true, PointDouble.Round(point), new Point(300, 300), 5, 10, 0);
            }

            chart.Header.Visible = false;
            chart.Axes.Visible = false;
            chart.AfterDraw += Chart_AfterDraw;
        }
Best Regards,
Christopher Ireland / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Instructions - How to post in this forum

bairog
Newbie
Newbie
Posts: 78
Joined: Fri Dec 07, 2018 12:00 am

Re: Interrelationship diagrams (shapes connected with arrows)

Post by bairog » Mon Nov 02, 2020 7:44 am

For now I've ended up with combination of Line series (circle points are enabled, line is disabled, markes are enabled) and Arrow series (it must be second series on the chart to be drawn after Line series - so arrow head is placed above circle point).
It looks something like:
Image
Last edited by bairog on Mon Nov 02, 2020 8:39 am, edited 4 times in total.

Christopher
Guru
Posts: 1320
Joined: Fri Nov 15, 2002 12:00 am

Re: Interrelationship diagrams (shapes connected with arrows)

Post by Christopher » Mon Nov 02, 2020 8:07 am

That's very nice. It's so good, in fact, that I wonder if we could ask your permission to publish this image on our public website as an example of a client using TeeChart custom drawing?

Many thanks.
Best Regards,
Christopher Ireland / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Instructions - How to post in this forum

bairog
Newbie
Newbie
Posts: 78
Joined: Fri Dec 07, 2018 12:00 am

Re: Interrelationship diagrams (shapes connected with arrows)

Post by bairog » Mon Nov 02, 2020 8:35 am

Christopher wrote:
Mon Nov 02, 2020 8:07 am
It's so good, in fact, that I wonder if we could ask your permission to publish this image on our public website as an example of a client using TeeChart custom drawing?
I've slightly modyfied data on my image - so now you can publish this image on our public website.

Christopher
Guru
Posts: 1320
Joined: Fri Nov 15, 2002 12:00 am

Re: Interrelationship diagrams (shapes connected with arrows)

Post by Christopher » Mon Nov 02, 2020 9:39 am

bairog wrote:
Mon Nov 02, 2020 8:35 am
I've slightly modyfied data on my image - so now you can publish this image on our public website.
Thank you very much!
Best Regards,
Christopher Ireland / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Instructions - How to post in this forum

Post Reply