SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
EDIT 3:
I figured out the problem. The reason why I did not see them was two-fold. The annotation view for some reason cannot infere the height of the parent (the chart) so setting match_parent as height doesn’t work and the view doesn’t have height. Second problem was that I have set .withPosition() with Y value as 0, and that would draw the view under the visible area of the chart.
So let me now ask new questions
1 Is there a possibility to move the annotation just by grabbing it, without first selecting it?
2 How can I change the red border when selecting the annotation?
3 How to set the annotation to return X value of it’s position from the center of its view and not from the start of its view
4 How do I restrict movement of the annotation to only X axis?
/// original question
Hello.
I have a problem with annotations. What I need to achieve, is to draw custom view (it’s fairly simple) on my chart, and this view should have always the height of the chart.
I can’t make it work, I am adding the annotation in exact same way as in example android project, and I even copied annotation code from your example project to mine, but for some reason it doesn’t work in my project.
this is the drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:width="40dp">
<color android:color="@color/secondary_18"/>
</item>
<item android:gravity="center_horizontal" android:width="4dp">
<color android:color="@color/secondary"/>
</item>
</layer-list>
EDIT: There is no < br > in this code ^
what I already tried:
1. Wrapping the drawable into layout consisting of <ImageView>
with src= set to drawable
2. Creating a class extending View() class and then setting the imageResource there
3. inflating my layout first and then putting it inside .withContent()
4. using .withContent() directly with R.layout.some_layout_view
5. using it with .withBackgroundDrawableId()
6. various combinations with setting different widths and heights and .withPosition() and whatever you can think of
I managed to display the CustomAnnotation once (don’t remember with which combination of settings) but it wouldn’t move anyway despite the .withIsEditable(true) and despite it was “selected” (red border around it appeared on click)
my axes:
val xAxis = sciChartBuilder.newNumericAxis()
.withAxisId(X_AXIS_ID)
.withDrawMajorBands(false)
.withDrawMajorGridLines(false)
.withDrawLabels(false)
.withIsCenterAxis(true)
.withDrawMinorTicks(false)
.withDrawMinorGridLines(false)
.withDrawMajorTicks(false)
.build()
val yAxis = sciChartBuilder.newNumericAxis()
.withAutoRangeMode(AutoRange.Always)
.withAxisId(Y_AXIS_ID)
.withDrawMajorBands(false)
.withDrawMajorGridLines(false)
.withDrawMinorGridLines(false)
.withDrawLabels(false)
.withIsCenterAxis(true)
.withDrawMajorTicks(false)
.withDrawMinorTicks(false)
.build()
chartSurface.xAxes.add(xAxis)
chartSurface.yAxes.add(yAxis)
my series:
chartSurface.renderableSeriesAreaFillStyle = SolidBrushStyle(chartBackgroundColor)
chartSurface.renderableSeriesAreaBorderStyle = SolidPenStyle(0x0, false, 0f, null)
val mountainSeries = sciChartBuilder.newMountainSeries()
.withDataSeries(dataSeries)
.withStrokeStyle(SolidPenStyle(-0x1, true, 0f, null))
.withAreaFillLinearGradientColors(-0x1, -0xed7422)
.withXAxisId(X_AXIS_ID)
.withYAxisId(Y_AXIS_ID)
.build()
chartSurface.renderableSeries.add(mountainSeries)
my control modifiers:
val chartModifiers = sciChartBuilder.newModifierGroup()
.withPinchZoomModifier()
.withXyDirection(Direction2D.XDirection)
.withReceiveHandledEvents(true)
.withScaleFactor(0.8f)
.build()
.withZoomPanModifier()
.withXyDirection(Direction2D.XDirection)
.withClipModeX(ClipMode.ClipAtExtents)
.withZoomExtentsY(true)
.withReceiveHandledEvents(true)
.build()
.withZoomExtentsModifier()
.withReceiveHandledEvents(true)
.withXyDirection(Direction2D.XyDirection)
.build()
.build()
chartSurface.chartModifiers.add(chartModifiers)
one example of many of how I tried to add the annotations:
chartSurface.annotations.add(
sciChartBuilder.newBoxAnnotation()
.withContent(CustomView(context))
.withXAxisId(X_AXIS_ID)
.withYAxisId(Y_AXIS_ID)
.withIsEditable(true)
.build()
)
ofc I also tried the same with CustomAnnotation and like I said with various other settings I could think of like .withPosition() and withResizingGrip. Curious thing is that VerticalLineAnnotation works with no problems really.
EDIT2:
Alternatively I could go with two VerticalLineAnnotations on top of each other moving together but I would have to be able to move them instantly, without selecting them first, because those circular handles look really bad and I have to disable them.
But later on I need to have box annotation working anyway, there will be X values selecting feature
Hi Laszlo,
For this you can use AnnotationSelectionDrawable property:
annotation.setAnnotationSelectionDrawable(new DefaultAnnotationSelectionDrawable(Color.BLUE, 0.8f, 4f));
I’m not sure what you mean but for some annotation types you can set horizontal and vertical anchor point and then X/Y value will point to the center of annotation:
sciChartBuilder.newTextAnnotation()
.withX1(5d)
.withY1(8d)
.withHorizontalAnchorPoint(HorizontalAnchorPoint.Center)
.withVerticalAnchorPoint(VerticalAnchorPoint.Center)
.withText(“Anchor Right”)
.build(),
As I see we have ResizeDirections and DragDirections properties but for some reasons they don’t work for now ( I’m going to create a task for it in our bug tracker and we’ll try to fix it in one of our future releases ). For now you can use approach from our PaletteProvider example where we reset require coordinates in drag listner to ensure that they won’t change:
annotation.setOnAnnotationDragListener(new OnAnnotationDragListener() {
@Override
public void onDragStarted(IAnnotation annotation) {
updateAnnotation(annotation);
}
protected void updateAnnotation(IAnnotation annotation) {
annotation.setY1(0);
annotation.setY2(1);
surface.invalidateElement();
}
@Override
public void onDragEnded(IAnnotation annotation) {
updateAnnotation(annotation);
}
@Override
public void onDragDelta(IAnnotation annotation, float horizontalOffset, float verticalOffset) {
updateAnnotation(annotation);
}
});
Hope this will help you!
Best regards,
Yura
Hi Laszlo,
Well you need to specify X1/X2/Y1/Y2 coordinates for BoxAnnotation work. You can do this using our Builders API:
BoxAnnotation boxAnnotation = sciChartBuilder.newBoxAnnotation()
.withPosition(3.5d, 4d, 5d, 5d)
// set other properties here
.build()
Or setting properties on annotation instance:
// specify a desired position by setting coordinates
boxAnnotation.setX1(1d);
boxAnnotation.setY1(4.6d);
boxAnnotation.setX2(10d);
boxAnnotation.setY2(9.1d);
Can you try it and let me know if it helps?
Best regards,
Yura
Please login first to submit.