CartesianCustomAnnotation annotations not showing up on chart

5 posts, 1 answers
  1. David
    David avatar
    22 posts
    Member since:
    Oct 2012

    Posted 25 Mar 2014 Link to this post

    I have RadCartisianChart on a Window and on a button click I would like to add a vertical line at a particular channel (x-axis value) and label the line.  Here is the code for my button click event.

    Please let me know if you know why the CartsianCustomAnnotation is now being displayed.  I've also provided a link to a zipped stripped-down example C# WPF project which demonstrates this: Telerik ChartView CartesianCusomAnnotation not display

    01.private void Button_OnClick(object sender, RoutedEventArgs e)
    02.    {
    03.      Random rnd = new Random();
    04.      int curChannel = rnd.Next(1, 1000);
    06.      CartesianGridLineAnnotation myLineAnnotation = new CartesianGridLineAnnotation();
    07.      myLineAnnotation.Axis = radCartesianChart1.HorizontalAxis;
    08.      myLineAnnotation.Value = curChannel;
    10.      myLineAnnotation.Stroke = System.Windows.Media.Brushes.Fuchsia;
    11.      radCartesianChart1.Annotations.Add(myLineAnnotation);
    13.      var newKLMLabel = new CartesianCustomAnnotation();
    14.      newKLMLabel.HorizontalAxis = radCartesianChart1.HorizontalAxis;
    15.      newKLMLabel.VerticalAxis = radCartesianChart1.VerticalAxis;
    17.      var border = new Border();
    18.      border.CornerRadius = new CornerRadius(4);
    19.      border.Background = Brushes.Gray;
    20.      border.Opacity = 0.9;
    22.      //var content = new TextBlock();
    23.      var content = new Label();
    24.      content.Content = "Channel " + curChannel.ToString();
    25.      border.Child = content;
    27.      newKLMLabel.Content = border;
    28.      newKLMLabel.HorizontalValue = curChannel;
    29.      newKLMLabel.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
    30.      newKLMLabel.VerticalValue = _chartVM.ParticleEdsSpectrum[curChannel].Counts;
    32.      newKLMLabel.Tag = "klmlabel";
    34.      newKLMLabel.Visibility = Visibility.Visible;
    36.      radCartesianChart1.Annotations.Add(newKLMLabel);
    38.    }
  2. Petar Marchev
    Petar Marchev avatar
    996 posts

    Posted 26 Mar 2014 Link to this post

    Hi David,

    Thank you for the provided code snippet and project, I was able to run the app right away and reproduce the behavior in mind.

    On the button click a new line annotation appears. The custom annotation is not visible. The reason for this is the VerticalValue, it is something like 129, when the range of the axis is (0 - 12000). This leads to the annotation being positioned just below the plot area, under the pan zoom bar, and the annotation gets clipped. You can set the ClipToPlotArea property to false and you will understand what is going on:
    newKLMLabel.ClipToPlotArea = false;

    I hope this helps.

    Petar Marchev

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

  3. David
    David avatar
    22 posts
    Member since:
    Oct 2012

    Posted 26 Mar 2014 in reply to Petar Marchev Link to this post

    Hi Petar,

    I'm getting the labels to show up by setting ClipToPlotArea to false, but the labels are all still drawn very low on the plot no matter what I set the VerticalValue to.  I've re-written my code to add a label to the channel with the value (which is around 10,625)  and the label is still way at the bottom. curChannel = 1;
    02.      uint maxCounts = 1;
    03.      foreach (var specChan in _chartVM.ParticleEdsSpectrum)
    04.      {
    05.        if (specChan.Counts > maxCounts)
    06.        {
    07.          maxCounts = specChan.Counts;
    08.          curChannel = specChan.Channel;
    09.        }
    10.      }
    13.      CartesianGridLineAnnotation myLineAnnotation = new CartesianGridLineAnnotation();
    14.      myLineAnnotation.Axis = radCartesianChart1.HorizontalAxis;
    15.      myLineAnnotation.Value = curChannel;
    16.      //myLineAnnotation.Value = (int)Math.Round(line.Energy, 0, MidpointRounding.ToEven);
    17.      myLineAnnotation.Stroke = System.Windows.Media.Brushes.Fuchsia;
    18.      radCartesianChart1.Annotations.Add(myLineAnnotation);
    20.      var newKLMLabel = new CartesianCustomAnnotation();
    21.      newKLMLabel.HorizontalAxis = radCartesianChart1.HorizontalAxis;
    22.      newKLMLabel.VerticalAxis = radCartesianChart1.VerticalAxis;
    24.      var border = new Border();
    25.      border.CornerRadius = new CornerRadius(4);
    26.      border.Background = Brushes.Gray;
    27.      border.Opacity = 0.9;
    29.      var content = new TextBlock();
    30.      content.Text = "Channel " + curChannel.ToString();
    31.      border.Child = content;
    33.      newKLMLabel.Content = border;
    35.      newKLMLabel.Content = border;
    36.      newKLMLabel.HorizontalValue = curChannel;
    37.      newKLMLabel.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
    38.      newKLMLabel.VerticalValue = _chartVM.ParticleEdsSpectrum[curChannel].Counts;
    39.      newKLMLabel.VerticalContentAlignment = VerticalAlignment.Top;
    40.      newKLMLabel.ClipToPlotArea = false;
    42.      newKLMLabel.Tag = "klmlabel";
    44.      newKLMLabel.Visibility = Visibility.Visible;
    46.      radCartesianChart1.Annotations.Add(newKLMLabel);

    Any thoughts?
  4. Answer
    Petar Marchev
    Petar Marchev avatar
    996 posts

    Posted 27 Mar 2014 Link to this post

    Hi David,

    Well, looking at the project again I now see that you have two vertical axes. One of them has a Name LiveAxis and is declared to be the main vertical axis of the chart. You need this axis in order for the PanZoomBar to show, so you can zoom. The other is in the resources collection of the chart, it has a Key LiveAxis (the same as the Name of the previous one). Later, on the 59th row, you are setting this additional axis to the series, so the series uses the axis from the resources.

    This leaves the main vertical axis of the chart with no series attached to it. This results in a no-range axis. So the axis does not have a range. Later when you create annotations, you do not specifically set the annotations' VerticalAxis. So the annotations try to work with the main axis. However, the main axis does not have a range and the annotation is not able to find a suitable vertical position. If you set the VerticalAxis of the annotation to be the axis from the resources, you would have no problems with this.

    If possible, I suggest you do not use two axes at all. I am not sure if your actual application requires multiple axes, but if it doesn't I suggest you only use the main vertical axis of the chart.  I hope these explanations help.

    Petar Marchev

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

  5. David
    David avatar
    22 posts
    Member since:
    Oct 2012

    Posted 27 Mar 2014 in reply to Petar Marchev Link to this post

    Thank you so much for your help.  Removing the the 2nd definition of my Horizontal axis now allowed my labels to show up.
Back to Top