SciChart Android 2D Charts API > Axis APIs > Axis APIs - Convert Pixel to Data Coordinates
Axis APIs - Convert Pixel to Data Coordinates

SciChart provides a clean and simple API to transform pixels to data-values and vice versa via the IAxisCore.getDataValue() and IAxisCore.getCoordinate() methods.

Where Pixel Coordinates are measured from

It is important to note when converting Pixels to Data Coordinates and vice versa that pixels are measured from the top-left inside corner of the chart. So, the pixel coordinate (0,0) corresponds to the data-value at (XAxis.getVisibleRange().getMin(), YAxis.getVisibleRange().getMax()), and the pixel coordinate (Width, Height) corresponds to the data-value at (XAxis.getVisibleRange().getMax(), YAxis.getVisibleRange().getMin()),

Learn about Axis.VisibleRange and how to get/set this property at the page: Axis Ranging - VisibleRange and DataRange

 

Converting between Pixels and Data Coordinates

Data-values are converted to pixel coordinates via the IAxisCore.getCoordinate() method. Also, Coordinates in pixels are converted back to chart data-values via the IAxisCore.getDataValue() method. It expects a coordinate in pixels and returns the closest data value to that coordinate.

You can find some examples how to do the conversions below.

Converting NumericAxis Data to Pixels

IAxis xAxis = new NumericAxis(getActivity());
// the getCoordinate() expects a chart data value and
// returns the corresponding pixel coordinate
float coord = xAxis.getCoordinate(1.2d);

// Convert back: 
// the getDataValue() expects a coordinate in pixels and returns the closest data value to that coordinate
double dataValue = (Double)xAxis.getDataValue(coord);

Converting DateAxis Data to/from Pixels

IAxis xAxis = new DateAxis(getActivity());
Date date = new Date(1990, 5, 10);
// the getCoordinate() expects a chart data value and returns the corresponding pixel coordinate
float coord = xAxis.getCoordinate(date);

// Convert back
// the getDataValue() expects a coordinate in pixels and returns the closest data value to that coordinate
double d = (Double)xAxis.getDataValue(coord);
Date dataValue = new Date((long)d);

Converting CategoryDateAxis Data to/from Pixels

CategoryDateAxis is slightly different. The getCoordinate() method expects an integer, which is the index of a data point inside a DataSeries. You can convert Date to index and vice versa through the ICategoryLabelProvider as follows:

IAxis xAxis = new CategoryDateAxis(getActivity());
// get ICategoryLabelProvider to convert Date values to Indexes and vice versa
ICategoryLabelProvider categoryLabelProvider = (ICategoryLabelProvider)xAxis.getLabelProvider();
int index = categoryLabelProvider.transformDataToIndex(new Date(2000, 1, 10));
// the getCoordinate() expects a data index and returns the corresponding pixel coordinate
float coord = xAxis.getCoordinate(index);

// Convert back:
// the getDataValue() expects a coordinate in pixels and returns the closest index value to that coordinate
double index = (Double)xAxis.getDataValue(coord );

// get ICategoryLabelProvider to convert Date values to Indexes and vice versa
ICategoryLabelProvider categoryLabelProvider = (ICategoryLabelProvider)xAxis.getLabelProvider();
Date dataValue = categoryLabelProvider.transformIndexToData((int)index);

Transforming Pixels to the Inner Viewport

If you subscribe to listen to touch events on a SciChartSurface, the touch coordinates you will receive will be relative to the SciChartSurface itself. Before the Coordinate Transformation API can be used, it's important to ensure that such coordinates are transformed relative to the viewport (the central area). The view to translate relative to can be obtained calling either the ISciChartSurface.getModifierSurface() or ISciChartSurface.getRenderableSeriesArea(), depending on the context. By default, both occupy the same area, but this can be changed if a custom LayoutManager is provided:

 

    

 

The transformation can be done via the ISciChartSurface.translatePoint() method:

SciChartSurface surface = new SciChartSurface(getActivity());
surface.setOnTouchListener(new View.OnTouchListener() {
 @Override
 public boolean onTouch(View v, MotionEvent event) {
     // the touch point relative to the SciChartSurface
     PointF touchPoint = new PointF(event.getX(), event.getY());

    // translate the touch point relative to RenderableSeriesArea or ModifierSurface
     surface.translatePoint(touchPoint, surface.getRenderableSeriesArea());

    //OR surface.translatePoint(touchPoint, surface.getModifierSurface());
    // the translated point can be used for looking for data values
     double dataValue = (Double)xAxis.getDataValue(touchPoint.x);

    return true;
 }
});

For more information on chart layout customization, please refer to the Placing Axes Central in the Chart article.

 

See Also

SciChart Android Examples