Problems using Annotations when X axis is date

[Roei]

Hi

I'm trying to use the annotations. my x axis is date time.

When i try to add CartesianGridLineAnnotation i get the following error:

: The value: '0' provided for the annotation is incompatible with the selected axis.

When I try to add CartesianPlotBandAnnotation my content page is not loaded

 

when i tried to add CartesianPlotBandAnnotation to axis y which is numeric it worked fine.

Any suggestions? the annotations feature is crucial for my chart implementation.

 

Thanks

 

Roei

 

 

[Yana]

Hi Roei,

I have just tried setting GridLineAnnotation with DateTimeContinousAxis like this:

var lineAnnotation = new CartesianGridLineAnnotation()
{
    Axis = this.chart.HorizontalAxis,
    Value = new DateTime(2015, 3, 3),
    Stroke = Color.Green,
    StrokeThickness = 5
};
chart.Annotations.Add(lineAnnotation);

and the annotation is displayed without a problem. Please have in mind that the Annotation value should be set in accordance to the corresponding axis value - in this case it has to be of DateTime type.

Please give it a try and if you still experience any issues, send us more concrete information on the scenario you have.

Regards,
Yana
Progress Telerik

[Roei]

Hi Yana

Thanks for your reply.

I know that the annotation value must be of type date in my case.

I define everything in xaml and uses binding to my view model. 

I'll try again and let you know,

 

Thanks again 

Roei

 

[Roei]

Can you provide an example using XAML and binding ?

 

Thanks

 

Roei

[Lance | Manager Technical Support]

Hi Roei,

To bind the value to the view model, you'll want to make sure the BindingContext is correct. By default, the BindingContext is the parent, which is the Chart itself. You'll instead want to set the source of the binding to the view model.

Let me show you via a demo.

Demo

I've attached a runnable demo for you, here's a short video of it in action at runtime. In the demo, I've bound the Annotation's Value to a property in the view model. You can then click a button several times to move that annotation around.

Let me take you through the highlights, the attached demo is fleshed out.


View Model

First, let's look at the view model. In it, there's a DateTime property in the view model named "AnnotationValue", 

public class MainPageViewModel : NotifyPropertyChangedBase
{
    private bool isToggled;
    private DateTime annotationValue;

    public MainPageViewModel()
    {
        // Add some items for the series
        CategoricalData = new ObservableCollection<CategoricalData>
        {
            new CategoricalData {Value = 1, Category = DateTime.Now.AddDays(-1)},
            new CategoricalData {Value = 3, Category = DateTime.Now.AddDays(-2)},
            new CategoricalData {Value = 2, Category = DateTime.Now.AddDays(-3)},
            new CategoricalData {Value = 1, Category = DateTime.Now.AddDays(-4)},
        };

        // Here we set initial location of the annotation
        AnnotationValue = CategoricalData[2].Category;

        // For button click
        ChangeAnnotationCommand = new Command(ChangeAnnotation);
    }

    private void ChangeAnnotation()
    {
        AnnotationValue = isToggled ? CategoricalData[2].Category : CategoricalData[1].Category;

        isToggled = !isToggled;
    }

    public ObservableCollection<CategoricalData> CategoricalData { get; set; }

    public DateTime AnnotationValue
    {
        get => annotationValue;
        set
        {
            if (annotationValue == value)
                return;

            annotationValue = value;
            OnPropertyChanged();
        }
    }

    public Command ChangeAnnotationCommand { get; set; }
}

public class CategoricalData
{
    public DateTime Category { get; set; }
    public double Value { get; set; }
}

View 

Now, let's look at the XAML. You're seeing the following:

- Set the axis
- Set the BindingContext source
- Binding the AnnotationValue property to Value

<telerikChart:RadCartesianChart x:Name="chart">
    <telerikChart:RadCartesianChart.Annotations>
        <telerikChart:CartesianGridLineAnnotation x:Name="GridLineAnnotation"
             Axis="{x:Reference CatAxis}"
             Value="{Binding BindingContext.AnnotationValue, Source={x:Reference chart}}" />
    </telerikChart:RadCartesianChart.Annotations>
    <telerikChart:RadCartesianChart.HorizontalAxis>
        <telerikChart:CategoricalAxis x:Name="CatAxis" .../>
    </telerikChart:RadCartesianChart.HorizontalAxis>
...
</telerikChart:RadCartesianChart>

Run the demo and click the button a few times, you'll see the annotation move across horizontal axis tick locations (which correspond to the data point's DateTime value).

I hope this helps clarify what's going on and how you can get the result you're looking for.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik