Nevron Forum

Events when there is mouse click on chart markers

https://www.nevron.com/Forum/Topic4862.aspx

By Alex Art - Monday, February 7, 2011

We are building WinForm application,
I need to build some chart based on user data, on this chart, end user could click on some markers (data points) and detailed view will be displayed (with some dynamically generated functional info).. How to achieve this.. ? There is also a wish to navigate by mouse on markers by keyboard , is it possible in some way ?
By Nevron Support - Monday, February 7, 2011

Hi Alex,

Yes that's possible - you can use the HitTest method that allows you to check the chart element below the mouse. For example:

  private void Form1_Load(object sender, EventArgs e)
  {
   NChart chart = nChartControl1.Charts[0];

   NBarSeries bar = new NBarSeries();

   bar.Values.Add(10);
   bar.Values.Add(20);
   bar.Values.Add(30);

   chart.Series.Add(bar);

   nChartControl1.MouseDown += new MouseEventHandler(nChartControl1_MouseDown);
  }

  void nChartControl1_MouseDown(object sender, MouseEventArgs e)
  {
   NHitTestResult result = nChartControl1.HitTest(e.X, e.Y);

   if (result.ChartElement == ChartElement.DataPoint)
   {
    MessageBox.Show("You clicked on bar index [" + result.DataPointIndex + "]");
   }
  }

Hit testing works for all series, chart elements.

Let us know if you meet any probelms.

By Alex Art - Tuesday, February 8, 2011

Thank you, this really works fine..

Could I set border for only this item I clicked on? (using result.DataPointIndex)
Just to hightlight the item (or change shape) .. etc ?

Thanks in advance , Alex
By Nevron Support - Tuesday, February 8, 2011

Hi Alex,

Yes - in this case you need to modify the FillStyles/BorderStyles collection of the bar series. Check this code:

  private void Form1_Load(object sender, EventArgs e)
  {
   NChart chart = nChartControl1.Charts[0];

   NBarSeries bar = new NBarSeries();

   bar.Values.Add(10);
   bar.Values.Add(20);
   bar.Values.Add(30);

   chart.Series.Add(bar);

   nChartControl1.MouseDown += new MouseEventHandler(nChartControl1_MouseDown);
  }

  void nChartControl1_MouseDown(object sender, MouseEventArgs e)
  {
   NHitTestResult result = nChartControl1.HitTest(e.X, e.Y);

   if (result.ChartElement == ChartElement.DataPoint)
   {
    NBarSeries bar = result.Series as NBarSeries;

    bar.FillStyles.Clear();
    bar.BorderStyles.Clear();

    bar.FillStyles[result.DataPointIndex] = new NColorFillStyle(Color.Red);
    bar.BorderStyles[result.DataPointIndex] = new NStrokeStyle(2, Color.Orange);

    nChartControl1.Refresh();
   }
  }

It will dynamically highlight the clicked bar...