Flex chart: point selection and tooltip location quesions

Flex chart: point selection and tooltip location quesions

Posted by: a.sharov on 12 September 2022, 12:14 pm EST

• 

  a.sharov

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 12 September 2022, 12:14 pm EST

  Hi.

  1)I have tooltip for series and context menu. There are few usage issues – sometimes tooltip covers sereis item(points of chart) and it is not easy for me to click on this series point. How can I shift tooltip slightly higher than it’s actual location? I’ve used following approach:

  
        flexChartMain.ToolTip.Content = $"some text";
        flexChartMain.ToolTip.Draw += ToolTipDraw;
  ....
  
   private void ToolTipDraw(object sender, DrawToolTipEventArgs e)
          {
              e.Graphics.ClipBounds.Offset(e.Graphics.ClipBounds.Location.X - 30,e.Graphics.ClipBounds.Location.Y - 30);
          }
  
  

  The thing is that handler above is never triggered… How can I shift location of a tooltip?

  2. I have

  flexChart.SelectionMode = ChartSelectionMode.Point;
  

  so when I need to access contenxt menu I need initially select point with left button mouse click, next right button click to show context menu for selected point on chart. Question – can I do it only within single right btn mouse click?

  Thank in advance.

• 

  nitin.sharma

  

  • Post Options:
  • Link
    Copy

  Posted 13 September 2022, 5:45 am EST

  Hi,

  JFYI, Tooltip.Draw fires when the ToolTip is drawn and the OwnerDraw property is set to true and the IsBalloon property is false. You can refer here : https://docs.microsoft.com/en-us/dotnet/api/system.windows.forms.tooltip.draw?view=windowsdesktop-6.0.

  Through Tooltip.Draw you can customize and render content under tooltip. In order to achieve your requirement you can show a custom tooltip at a particular position. For that, you can handle MouseMove event as :(see code snippet)

  
          private void FlexChart_MouseMove(object sender, MouseEventArgs e)
          {
              var ht = flexChart.HitTest(new Point(e.X, e.Y));
              if (ht != null)
              {
                  if (ht.Distance == 0)
                  {
                      flexChart.ToolTip.Show("Value:" + (ht.Item as DataPoint).Y, this, new Point(e.X + 30, e.Y + 20));
                  }
                  else
                  {
                      flexChart.ToolTip.Hide(this);
                  }
              }
          }
  
  

  Please refer the attached sample for the same : FlexChartCustomTooltip.zip

  Best Regards,
  
  Nitin

• 

  a.sharov

  • Post Options:
  • Link
    Copy

  Posted 13 September 2022, 11:14 am EST

  Thank you very much.

  1. The problem with your solution is that tooltip is flickering now, it is possible to deal with it?

  2)Wnat about part 2 of my question:

  "I have flexChart.SelectionMode = ChartSelectionMode.Point;

  so when I need to access contenxt menu I need initially select point with left button mouse click, next right button click to show context menu for selected point on chart. Question – can I do it only within single right btn mouse click?
  
  "

• 

  nitin.sharma

  

  • Post Options:
  • Link
    Copy

  Posted 14 September 2022, 6:52 am EST

  Hi,

  Apologize for any inconvenience caused to you.

  1. We are showing tooltip when HitTest’s Distance = 0. Over a Symbol-point there are many points where Distance=0 could be possible. That’s why the tooltip is displaying on screen over and over and hence the flickering occurs.

  To resolve this issue, you can add another check to identify if mouse cursor is on symbol then display tooltip only for the first time. For that you can handle the MouseMove event as:

  
          bool OnSymbol = false;
          private void FlexChart_MouseMove(object sender, MouseEventArgs e)
          {
              var ht = flexChart.HitTest(new Point(e.X, e.Y));
              if (ht != null)
              {
                  
                  if (ht.Distance == 0)
                  {
                      if (!OnSymbol)
                      {
                          flexChart.ToolTip.Show("Value:" + (ht.Item as DataPoint).Y, this, new Point(e.X + 30, e.Y + 20));
                          OnSymbol = true;
                      }                        
                  }
                  else
                  {
                      OnSymbol = false;
                      flexChart.ToolTip.Hide(this);
                  }
              }
          }
  
  

  2. Single RightClick on Symbol-point can open ContextMenu immediately. If you want to
     
     Select the Point and opens a ContextMenu on a single RightClick. Then you can implement a ContextMenu and handle the MouseUp event as:(see code snippet)

  
          private async void FlexChart_MouseUp(object sender, MouseEventArgs e)
          {
              if(e.Button == MouseButtons.Right)
              {
                  var ht = flexChart.HitTest(new Point(e.X, e.Y));
                  if (ht != null)
                  {
  
                      if (ht.Distance == 0)
                      {
                          await Task.Delay(100);
                          contextMenu.Show(MousePosition);
                          OnSymbol = false;
                          flexChart.ToolTip.Hide(this);
                      }
                  }
              }
          }
  
  

  please refer the attached sample for the same : FlexChartCustomTooltip_Mod.zip

  Best Regards,
  
  Nitin