gridline custom annotation

[Fabio]

Hi
Sorry for my english.
I must mark some dates (relevant events) in a DateTimeCategoricalAxis with a custom annotation.
Something like a custom (templated) gridline annotation or a CartesianCustomAnnotation without verticalvalue specified.
This annotation must be always visible over axis, also when the user zoom and pan the data (obviously only if relative date is in visible area)

[Rosy Topchiyska]

Hi Fabio,

Thank you for the question.

Here is an article from our online documentation with all supported annotations and you can see which one fits best for your scenario: Annotations Overview
I have attached a sample project that demonstrates very basic scenario with CartesianGridLineAnnotation.

I hope this helps. Please, let us know if you have further questions.

Regards,
Rosy Topchiyska
Telerik

 

 

[Fabio]

Hello
Before writing, I had read the documentation of the annotation, but I have not found anything that came near to what I want to achieve. The example you sent me uses a CartesianGridLineAnnotation, which is displayed as a vertical line, what I need is to put the images anchored to the lower part of the graph corresponding to certain dates.
I tried to change the template of CartesianGridLineAnnotation, but as you can see the result is not what I want.

​<Page xmlns:Chart="using:Telerik.UI.Xaml.Controls.Chart"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:SampleProject"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:Charting="using:Telerik.Charting" 
      x:Class="SampleProject.MainPage"
      mc:Ignorable="d">
<Page.Resources>
<!--Base Styles-->

<Style TargetType="Chart:ChartElementPresenter" x:Key="BasePresenterStyle">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Chart:ChartElementPresenter">
<!--<Canvas x:Name="PART_RenderSurface" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>-->
                        <Grid x:Name="PART_RenderSurface">
                            <Image Source="Assets/SmallLogo.png" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
                        </Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<Style TargetType="Chart:ChartAnnotation" x:Key="BaseAnnotationStyle" BasedOn="{StaticResource BasePresenterStyle}">
<Setter Property="IsHitTestVisible" Value="False" />
</Style>

<Style x:Key="CartesianGridLineAnnotationStyle1" TargetType="Chart:CartesianGridLineAnnotation" BasedOn="{StaticResource BaseAnnotationStyle}">
<Setter Property="Stroke" Value="red" />
<Setter Property="StrokeThickness" Value="1" />
</Style>

</Page.Resources>

    <Page.DataContext>
        <local:ViewModel/>
    </Page.DataContext>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Chart:CartesianGridLineAnnotation  />
        <Chart:RadCartesianChart>

            <Chart:RadCartesianChart.VerticalAxis>
                <Chart:LinearAxis/>
            </Chart:RadCartesianChart.VerticalAxis>
            <Chart:RadCartesianChart.HorizontalAxis>
                <Chart:DateTimeCategoricalAxis x:Name="axis"/>
            </Chart:RadCartesianChart.HorizontalAxis>

            <Chart:RadCartesianChart.Annotations>
                <Chart:CartesianGridLineAnnotation Axis="{Binding ElementName=axis}" Value="{Binding SpecialDate}" Style="{StaticResource CartesianGridLineAnnotationStyle1}" />
            </Chart:RadCartesianChart.Annotations>

            <Chart:SplineAreaSeries ItemsSource="{Binding Items}">
                <Chart:SplineAreaSeries.ValueBinding>
                    <Chart:PropertyNameDataPointBinding PropertyName="Value"/>
                </Chart:SplineAreaSeries.ValueBinding>
                <Chart:SplineAreaSeries.CategoryBinding>
                    <Chart:PropertyNameDataPointBinding PropertyName="Date"/>
                </Chart:SplineAreaSeries.CategoryBinding>
            </Chart:SplineAreaSeries>
            
            <Chart:RadCartesianChart.Behaviors>
                <Chart:ChartPanAndZoomBehavior ZoomMode="Horizontal"/>
            </Chart:RadCartesianChart.Behaviors>
        </Chart:RadCartesianChart>
    </Grid>
</Page>

[Rosy Topchiyska]

Hi Fabio,

I have attached a sample project that demonstrates how you can use the CartesianCustomAnnotation and calculate its VerticalValue dynamically depending on the chart Zoom and ScrollOffset in order to position the annotation at the same height every time.

I hope this helps. Please, take a look at the sample and let us know if you have further questions.

Regards,
Rosy Topchiyska
Telerik

 

 

[Fabio]

Hi Rosy
Great example, exactly what I needed.

Regards
Fabio

[Fabio]

Hi Rosy
Working on your example I found some issue.
I have changed the example for recreate these issues.

First problem, using a style for annotation, binding of values for HorizontalValue and VerticalValue not work.

Second problem, in my app I create annotation dinamically, from code because annotations collection of chart is not MVVM compliant. To workaround the first problem, I create binding from code and not from style, this works perfectly if property associated to HorizontalValue and VerticalValue not changed, otherwise if value change, as required for implement my original request, annotations are not rendered.

Third problem, your example work well only if Axis.ActualRange.Minimum is 0, I solved this by changing the calculation of top with this top = max + offset, but I could not test it because of the second problem. In sample project I failed to make sure that Axis.ActualRange.Minimum is different to 0.

I hope I was clear enough in explaining the problems. As support I have share the sample project here https://www.dropbox.com/s/mxuv7dqs347fohu/AnnotationSample1.zip?dl=0.

Regards
Fabio

[Rosy Topchiyska]

Hello Fabio,

Thank you for the project. I have modified it and I left comments in the code in MainPage.xaml.cs file.

Please, note that in WinRT you can not bind a Style's Setter.Value. If you create your annotations dynamically, then you will have to set the bindings for the specific annotation instance, not in the Style. I have demonstrated how to change the vertical value of the annotations from your ViewModel. Also, you are right that top = max + offset.

I hope this helps. Please, see the changes to your project and let us know if you have further questions.

Regards,
Rosy Topchiyska
Telerik