icons or small images on the graph

TeeChart for Microsoft Visual Studio .NET, Xamarin Studio (Android, iOS & Forms) & Monodevelop.
Post Reply
Sharkann
Newbie
Newbie
Posts: 17
Joined: Fri Apr 22, 2022 12:00 am

icons or small images on the graph

Post by Sharkann » Wed Jun 28, 2023 7:46 am

Hi,

I have an application where I can write some text on the graph, using the after draw event, and using the TextOut function of the Steema.TeeChart.Drawing.Graphics3DGdiPlus, this works well.
But sometimes, I have so many text to display over the curve that it can be superimposed, and the visibility at the end is not good.
Instead of text lines, I would like to display a simple icon (like a warning icon) or image, just to say to the user that there is something to read at this point. Then, hoovering the icon, a text window (normal form text window) indicating what has to be read on the hovered point.

How can I superimpose these icons over the graph ? Should I draw triangles / redo the warning shapes in the after draw event ?
Then How can I detect the user is hoovering them with the mouse ?

Thanks for your help.
In the attached picture an example of what is done today / what I would like.

Sharkann
example.jpg
example.jpg (346.28 KiB) Viewed 14861 times

Marc
Site Admin
Site Admin
Posts: 1265
Joined: Thu Oct 16, 2003 4:00 am
Location: Girona
Contact:

Re: icons or small images on the graph

Post by Marc » Fri Jun 30, 2023 7:19 am

Hello,

You can render an image in this way:

Code: Select all

private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g)
{
    Image myIcon = Image.FromFile(@"D:\Data\TCoherence\Publicity\icons\myIcon.png");
    g.Draw(100, 100, myIcon);
 }
Calculate the location as you require. To align it correctly to the axis or other x,y location use the logic as described here:

https://steema.com/docs/teechart/net/tu ... tPanel.htm

To make that appear/disappear with mouse over, the easiest way is to use the TeeChart mousemove event and to check the event X and Y location to the zone of interest,

Code: Select all

private void tChart1_MouseMove(object sender, MouseEventArgs e)
{
  //check e.X and e.Y location to the x,y zone of interest
}
The zone of interest can be obtained as pixel x,y coordinates by converting axis values via the Series CalcXPos method or the Axis CalcPosValue method.

Set a boolean variable, with scope to the form, to true when the mouse is within the zone and provoke a Chart repaint. Use the Boolean in OnAfterDraw to activate (or not) the icon draw line.

Regards,
Marc Meumann
Steema Support

Marc
Site Admin
Site Admin
Posts: 1265
Joined: Thu Oct 16, 2003 4:00 am
Location: Girona
Contact:

Re: icons or small images on the graph

Post by Marc » Fri Jun 30, 2023 7:25 am

...one point to add. I described how to make the icon visible or not according to mousemove location. That may have missed the point a little. To actuate a link or "further process" when clicking in the zone, use the mousedown event and confirm that the boolean "zoneTrue" is active to actuate or not your click.

Sharkann
Newbie
Newbie
Posts: 17
Joined: Fri Apr 22, 2022 12:00 am

Re: icons or small images on the graph

Post by Sharkann » Fri Jun 30, 2023 7:25 am

Thanks so much !
Regards

Post Reply