ComponentOne FlexChart for UWP
FlexChart / Working with FlexChart / End-User Interaction / Hit Test
In This Topic
    Hit Test
    In This Topic

    FlexChart supports hit testing, which enables you to fetch information about a specific point in the control at run-time. The information obtained about the pointed coordinate can then be reused to drill down the chart data, to set alerts, or to enable other user interaction functionalities. Users can obtain relevant information about the chart element pointed to by using mouse or touch interaction.

    Hit testing in FlexChart


    FlexChart supports hit testing by utilizing HitTest() method. This method takes the location (coordinates) of the pointed entity; and returns an object of HitTestInfo class, which provides the following information about the pointer location:

    Note that, the mouse coordinates that are passed to HitTest() method are in pixels and are relative to the upper left corner of the window. 

    In this example, HitTest() method is called on MouseMove event of the FlexChart control. Here, the point coordinates of pointer location are passed as parameter to HitTest() method.

    To enable hit testing in FlexChart, follow these steps:

    1. Add a data bound FlexChart control
    2. Subscribe to a Mouse or Touch event
    3. Invoke chart’s HitTest method in mouse or touch event handler
    4. Use the information returned by HitTestInfo object

    Back to Top

    1. Add a data bound FlexChart control

      Add an instance of FlexChart control to your WPF application, and bind it to an appropriate data source, as shown in the below code snippet.

              <Chart:C1FlexChart x:Name="flexChart"
                                 HorizontalAlignment="Left"
                                 Height="220" Margin="70,25,0,0"
                                 VerticalAlignment="Top" Width="455"
                                 Binding="YVals" BindingX="XVals" ChartType="SplineSymbols" >
                  <Chart:C1FlexChart.Series>
                      <Chart:Series x:Name="series0" SeriesName="Series 0"/>
                      <Chart:Series x:Name="series1" SeriesName="Series 1" />
                  </Chart:C1FlexChart.Series>
              </Chart:C1FlexChart>
              <TextBlock x:Name="tbPosition1" Margin="155,250,255,185"/>
          </Grid>
      </Page>
      

      Back to Top

    2. Subscribe to a Mouse or Touch event

      Subscribe to a mouse or touch event to capture the pointer coordinates, as shown in the below code snippet.

          <Chart:C1FlexChart x:Name="flexChart"
                         HorizontalAlignment="Left"
                         Height="220" Margin="70,25,0,0"
                         VerticalAlignment="Top" Width="455"
                         Binding="YVals" BindingX="XVals" ChartType="SplineSymbols"                            
                         PointerPressed="flexChart_PointerPressed" >
          <Chart:C1FlexChart.Series>
              <Chart:Series x:Name="series0" SeriesName="Series 0"/>
              <Chart:Series x:Name="series1" SeriesName="Series 1" />
          </Chart:C1FlexChart.Series>
      </Chart:C1FlexChart>
      

      Back to Top

    3. Invoke chart’s HitTest method in mouse event handler

      In the respective event handler, invoke the HitTest() method and pass the captured mouse pointer coordinates, as shown in the below code snippet.

      private void flexChart_PointerPressed(object sender, PointerRoutedEventArgs e)
      {
          HitTestOnFlexChart(e.GetCurrentPoint(flexChart).Position);
      }
      

      Back to Top

    4. Use the information returned by HitTestInfo object

      The information regarding mouse pointer location, as returned by the HitTestInfo object, can then be reused. For example in the below code snippet, the values returned by HitTestInfo object are converted to string and displayed in a TextBlock.

      void HitTestOnFlexChart(Point p)
      {
          // Show information about chart element under mouse/touch.
          var ht = flexChart.HitTest(p);
          var result = new StringBuilder();
          result.AppendLine(string.Format("Chart element: {0}", ht.ChartElement));
          if (ht.Series != null)
              result.AppendLine(string.Format("Series name: {0}", ht.Series.Name));
          if (ht.PointIndex > 0)
              result.AppendLine(string.Format("Point index= {0:0}", ht.PointIndex));
          if (ht.Distance > 0)
              result.AppendLine(string.Format("Distance= {0:0}", ht.Distance));
          if (ht.X != null)
              result.AppendLine(string.Format("X= {0:0:0}", ht.X));
          if (ht.Y != null)
              result.AppendLine(string.Format("Y= {0:0:0}", ht.Y));
          tbPosition1.Text = result.ToString();            
      }
      

    Back to Top