Display annotations when chart is zoomed

[Nazia]

Hi All,
I have a chart which is binded to nearly 50 datapoints. I want to display annotation for some of the datapoints when the chart is zoomed. Showing annotations in normal state is fine if the datapoints are less. But how to display the annotation when the chart is zoomed?

<telerikChart:RadCartesianChart PaletteName="DefaultDark" x:Name="LineSeries" >

          <telerikChart:RadCartesianChart.HorizontalAxis>
              <telerikChart:CategoricalAxis />
          </telerikChart:RadCartesianChart.HorizontalAxis>
          <telerikChart:RadCartesianChart.VerticalAxis>
              <telerikChart:LinearAxis/>
          </telerikChart:RadCartesianChart.VerticalAxis>

          <telerikChart:LineSeries  ItemsSource="{Binding Items}" >

              <telerikChart:LineSeries.CategoryBinding>
                  <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
              </telerikChart:LineSeries.CategoryBinding>
              <telerikChart:LineSeries.ValueBinding>
                  <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
              </telerikChart:LineSeries.ValueBinding>
          </telerikChart:LineSeries>

          <telerikChart:RadCartesianChart.Annotations>
              <telerikChart:CartesianCustomAnnotation HorizontalValue="100" VerticalValue="30" Content="Custom content" ContentTemplate="{StaticResource annotationTemplate}"
                                                      ClipToPlotArea="False" HorizontalAlignment="Center" VerticalAlignment="Center"
                                                      />
          </telerikChart:RadCartesianChart.Annotations>

          <telerikChart:RadCartesianChart.Behaviors>
              <telerikChart:ChartPanAndZoomBehavior/>
          </telerikChart:RadCartesianChart.Behaviors>
      </telerikChart:RadCartesianChart>

for (var i = 0; i < 150; i++)
         {
             this.Items.Add(new Data { Value = rand.Next(5, 40), Category = i });
         }
        Items[100].Value = 30;

It shows the annotation at the top left corner when the page is loaded and the annotation position does not changes when the chart is zoomed. Can someone tell me how to display the annotation at a particular datapoint after the chart is zoomed?

[Rosy Topchiyska]

Hello Nazia,

Thank you for your question.

First, I want to clarify how to position the annotation at a specific datapoint - the HorizontalValue and VerticalValue properties of the annotation should match the values on the axes. In case of categorical series, the HorizontalValue should match the category.

Unfortunately, I have to admit that there is a bug with the annotations when you zoom. They update their position as though the chart is panned to the most left top position and do not update their position on panning. I have redirected this issue to our developers and they will do their best to fix it for the next official release scheduled for mid-October. I have also updated your Telerik points as a token of gratitude for bringing this bug to our attention.

Please, let us know if we can help you in some other way.

Regards,
Rositsa Topchiyska
Telerik

[Nazia]

Thanks Rositsa.
Is it possible to hide the annotation when the chart is zoomed? Because displaying the annotation at top left position gives a wrong indication to users when it is zoomed. So I want to hide the annotation.
Please let me know how to hide those annotations when the chart is zoomed.

[Rosy Topchiyska]

Hi Nazia,

To achieve this, you can track the Zoom property of the RadChart and hide the annotations when the Zoom property takes a value different from Size(1,1).
In the attached project I have demonstrated how to hide CartesianGridLineAnnotationannotation( I have bound its Stroke property to the RadChart.Zoom property using a value converter that will return Transparent when the chart is zoomed) and a CartesianCustomAnnotation(I have bound the Visibility property of the root element in its ContentTemplate to the RadChart.Zoom property using value converter that will return Visibility.Collapsed when the chart is zoomed). 

I hope this was useful and let us know if we can assist you in some other way.


Regards,
Rositsa Topchiyska
Telerik

[Nazia]

Thanks a lot Rositsa

[Yasir]

Dear Rositsa,

I am facing similar issue. My requirement is that user should able to select the datapoints and selection should be marked with the annotation horizontally. But in case of zoom the annotation is shifting to its right side.
I have created sample application in which there are two charts placed vertically. The bottom chart is used as a timebar chart when user zoom it the top chart should also zoomed. Top chart allow user to select datapoints by creating selection box over chart series.
 
Please suggest any solution.

Thanks
Yasir

[Rosy Topchiyska]

Hello Yasir,

Thank you for using RadControls for Windows 8!

As I already explained in a previous reply in this thread, there is a bug with the annotations when zooming. Our developers are aware of this issue and they will do their best to fix it for the next official release scheduled for mid-October.

Do not hesitate to contact us if you have any other questions or ideas.

Regards,
Rositsa Topchiyska
Telerik