SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and iOS Chart & Android Chart Components

Answered
0
0

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

Version
2.5.0
  • You must to post comments
Best Answer
1
1

Hi Laszlo,

  1. Well you can’t do this because Annotation API was designed in a such way that it can’t be dragged unless it is selected. This was made to prevent dragging of more than one annotation at the same time If you really need this functionality then you can create a custom modifier or something like this and then move annotations in code using moveAnnotation which offsets entire annotation by specified offset and moveBasePointTo which moves one of annotation corners to specified coordinate ( basically you can resize annotation with it )
  2. For this you can use AnnotationSelectionDrawable property:

                annotation.setAnnotationSelectionDrawable(new DefaultAnnotationSelectionDrawable(Color.BLUE, 0.8f, 4f));
    
  3. 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(),

  4. 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

  • Yura Khariton
    Regardin #4 – starting from v2.5.0.2580 ResizeDirections and DragDirection properties should work and you should be able to restrict dragging/resizing by setting them to Direction2D.XDirection
  • You must to post comments
0
0

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

  • Laszlo Bonkers
    Yes it does work, thanks If you could take a look at the top of my post, there is an edit text there with new, very important questions. I will be really thankful if you could answer those :)
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.