This is a migrated thread and some comments may be shown as answers.
Problems using Annotations when X axis is date
4 Answers 14 Views
This is a migrated thread and some comments may be shown as answers.
Roei
Top achievements
Rank 1
Roei asked on 21 Aug 2018, 11:30 AM

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

 


 

4 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 24 Aug 2018, 10:44 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Roei
Top achievements
Rank 1
answered on 27 Aug 2018, 02:19 PM

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

 

0
Roei
Top achievements
Rank 1
answered on 27 Aug 2018, 03:01 PM

Can you provide an example using XAML and binding ?

 

Thanks

 

Roei

0
Accepted
Lance | Manager Technical Support
Telerik team
answered on 29 Aug 2018, 06:49 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Chart
Asked by
Roei
Top achievements
Rank 1
Answers by
Yana
Telerik team
Roei
Top achievements
Rank 1
Lance | Manager Technical Support
Telerik team
Share this question
or