Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
120
Getting Underlying Value from Position in Polar Axis
posted

Hello,

I've implemented a custom tooltip for the Polar Series, since I want to be able to visualize each continous point for a polar series and not just the marker tooltips.

This is the XAML for my Polar Chart (almost the same as the sample Polar chart):

<ig:XamDataChart x:Name="PolarLineChart" Grid.Column="0" Grid.Row="1" SeriesMouseMove="PolarLineChart_OnSeriesMouseMove" HorizontalZoomable="True"                                            HorizontalZoombarVisibility="Visible" VerticalZoomable="True" VerticalZoombarVisibility="Visible"

                          Legend="{StaticResource Legend}" CrosshairVisibility="Visible" PlotAreaBorderBrush="{x:Null}" >
        <ig:SyncManager.SyncSettings>
              <ig:SyncSettings SyncChannel="SyncPolarSeries" SynchronizeHorizontally="True" SynchronizeVertically="True" />
        </ig:SyncManager.SyncSettings>
         <ig:XamDataChart.Axes>
                 <ig:NumericAngleAxis x:Name="NumericAngleAxis1" Canvas.ZIndex="10" CrossingAxis="{Binding ElementName=NumericRadiusAxis1}" Interval=".5"                  

                                                MaximumValue="10" MinimumValue="0" StartAngleOffset="0">
                           <ig:NumericAngleAxis.LabelSettings>
                                <ig:AxisLabelSettings Location="InsideTop" Extent="20" />
                           </ig:NumericAngleAxis.LabelSettings>
                 </ig:NumericAngleAxis>
                  <ig:NumericRadiusAxis x:Name="NumericRadiusAxis1" Canvas.ZIndex="10" StrokeThickness="2" CrossingAxis="{Binding ElementName=NumericAngleAxis1}"

                                                CrossingValue="0" MinimumValue="0" MaximumValue="10" Interval="1">
                          <ig:NumericRadiusAxis.LabelSettings>
                                   <ig:AxisLabelSettings Location="InsideBottom" />
                           </ig:NumericRadiusAxis.LabelSettings>
                   </ig:NumericRadiusAxis>
              </ig:XamDataChart.Axes>
      <ig:XamDataChart.Series>
               <ig:PolarLineSeries Title="2010"
                                         AngleAxis="{Binding ElementName=NumericAngleAxis1}"
                                         RadiusAxis="{Binding ElementName=NumericRadiusAxis1}"
                                         AngleMemberPath="X" MarkerType="None"
                                         RadiusMemberPath="Y" ItemsSource="{Binding Path=Points, Source={StaticResource EnergyProductionCollection}}"
                                          Thickness="5" >
                 </ig:PolarLineSeries>
      </ig:XamDataChart.Series>
</ig:XamDataChart>

The underlying data is a List<Point>()

For other numeric series, what I've been doing is attaching to the SeriesMouseMove event and working with positions and unscaled values as follows:

private void chart_SeriesMouseMove(object sender, ChartMouseEventArgs e)
{        

         var position = e.GetPosition(e.Series);

         var viewport = new Rect(0, 0, e.Series.ActualWidth, e.Series.ActualHeight);

         var scalerParams = new ScalerParams(e.Series.SeriesViewer.WindowRect, viewport, false);

         var scatterSeries = e.Series as ScatterSeries;

         double x = scatterSeries.XAxis.GetUnscaledValue(position.X, scalerParams);

         double y = scatterSeries.YAxis.GetUnscaledValue(position.Y, scalerParams);         

         var selectedPoint = new Point
         {
             X = x,
             Y = y
         };

         // Show the point in the UI...

}

The above method works great on regular numeric X axis and Y axis.

But for Polar Axes, the UnscaledValue doesn't comply correctly due to the angle and radius. I've tried other methods like UnscaledAngleValue but the angle I get must be based on the Axis values, not the actual position in the plot area.

Is there a way I can get underlying values (interpolated or exact points) by using the current mouse position?

(This means: If I set a Point of 1,2, whenever I move through that point I want 1,2 returned to me).

Hope it's clear.

Thank you very much.

Kind regards,

Sebastian

Parents
No Data
Reply
  • 34810
    Verified Answer
    Offline posted

    Hello Sebastian,

    Thank you for your post.

    I have been investigating into this issue, and if, by chance you have downloaded the source code for the XamDataChart, I would recommend that you have a look at an internal class named PolarAxes. In this PolarAxes class, there is a method called GetUnscaledValues, which demonstrates the calculations that must be made to scale the values of the radial axis and the angle axis relative to the viewport, the center of the XamDataChart's plot area, and a point, which in this case, will be the mouse position. After these values are scaled, one can go about getting the unscaled value and the unscaled angle from the radial and the angle axis, respectively.

    As the formula to scale these values is a little bit on the complex side, I feel that the code for this PolarAxes' GetUnscaledValue method may speak for itself. As such, I have attached a sample project that demonstrates it, along with its dependencies. I hope this helps you.

    Please let me know if you have any other questions or concerns on this matter.

    Sincerely,
    Andrew
    Associate Developer
    Infragistics Inc.
    www.infragistics.com/support

    XamDataChartPolarMousePointsCase.zip
Children
No Data