Page 1 of 1

Interrelationship diagrams (shapes connected with arrows)

Posted: Mon Oct 26, 2020 1:00 pm
by 15685014
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.

Re: Interrelationship diagrams (shapes connected with arrows)

Posted: Tue Oct 27, 2020 1:50 pm
by Christopher
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;
        }

Re: Interrelationship diagrams (shapes connected with arrows)

Posted: Mon Nov 02, 2020 7:44 am
by 15685014
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

Re: Interrelationship diagrams (shapes connected with arrows)

Posted: Mon Nov 02, 2020 8:07 am
by Christopher
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.

Re: Interrelationship diagrams (shapes connected with arrows)

Posted: Mon Nov 02, 2020 8:35 am
by 15685014
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.

Re: Interrelationship diagrams (shapes connected with arrows)

Posted: Mon Nov 02, 2020 9:39 am
by Christopher
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!