[Solved] CartesianCustomLineAnnotation : Unable to view on RadCartesianChart

[Nitin Nitin]

Hello,

I have a radcartesianchart and am trying to add a cartesiancustomlineannotation in it.

Following is my xaml page:

<UserControl x:Class="SL_708313_DragCustomLineAnnotation.RadCartChartForAnnotaionTest"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="Black">
        <telerik:RadCartesianChart x:Name="xRadCartesianChart">
        </telerik:RadCartesianChart>
    </Grid>
</UserControl>

And my code behind :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Telerik.Windows.Controls.ChartView;
using System.Collections.ObjectModel;
using Telerik.Charting;
using Telerik.Windows.Controls;

namespace SL_708313_DragCustomLineAnnotation
{
    public partial class RadCartChartForAnnotaionTest : UserControl
    {
        private ObservableCollection<TrendsLineSeriesChartData> m_listOfDataPoints;
        public ObservableCollection<TrendsLineSeriesChartData> ListOfDataPoints
        {
            get { return m_listOfDataPoints; }
            set { m_listOfDataPoints = value; }
        }

        public RadCartChartForAnnotaionTest()
        {
            InitializeComponent();
            CreateDummyDataForChart();
        }

        public void CreateDummyDataForChart()
        {
            ObservableCollection<TrendsLineSeriesChartData> chartData = new ObservableCollection<TrendsLineSeriesChartData>();
            LinearAxis verticalAxis = new LinearAxis();
            verticalAxis.Minimum = 0;
            verticalAxis.Maximum = 100;
            verticalAxis.MajorStep = Math.Round(verticalAxis.Maximum / 10);
            verticalAxis.Visibility = Visibility.Visible;

            DateTimeContinuousAxis horizontalAxis = new DateTimeContinuousAxis();
            horizontalAxis.Visibility = Visibility.Visible;
            horizontalAxis.MajorStepUnit = TimeInterval.Day;

            LineSeries scatterlineSeries = new LineSeries();
            scatterlineSeries.Name = "Series01";
            scatterlineSeries.ValueBinding = new PropertyNameDataPointBinding("LineSeriesChartValue");
            scatterlineSeries.CategoryBinding = new PropertyNameDataPointBinding("LineSeriesChartCategory");
            scatterlineSeries.CombineMode = Telerik.Charting.ChartSeriesCombineMode.Stack;
            scatterlineSeries.VerticalAxis = verticalAxis;
            scatterlineSeries.HorizontalAxis = horizontalAxis;

            Random rnd = new Random();
            DateTime dt = new DateTime();
            dt = DateTime.Now;
            DateTime temp;
            temp = dt.AddDays(3);
            for (int i = 1; i <= 10; i++)
            {
                TrendsLineSeriesChartData dataPoint = new TrendsLineSeriesChartData();
                double number = rnd.Next(10, 100);
                dataPoint.LineSeriesChartCategory = dt.AddDays(i);
                dataPoint.LineSeriesChartValue = number;
                chartData.Add(dataPoint);
            }
            scatterlineSeries.ItemsSource = chartData;
            xRadCartesianChart.Series.Add(scatterlineSeries);
            AddRuler(temp);

        }

        private void AddRuler(DateTime horiToAndFrom)
        {
            CartesianCustomLineAnnotation annotation = new CartesianCustomLineAnnotation();
            annotation.VerticalFrom = Convert.ToDouble(0);
            annotation.VerticalTo = Convert.ToDouble(50);
            annotation.HorizontalFrom = horiToAndFrom.ToString(); //Convert.ToDateTime("09-08-2013 00:00:00");
            annotation.HorizontalTo = horiToAndFrom.ToString(); //Convert.ToDateTime("09-08-2013 00:00:00");
            annotation.IsHitTestVisible = true;
            annotation.Stroke = new SolidColorBrush(Colors.Red);
            annotation.StrokeThickness = 3;
            annotation.VerticalAxis = xRadCartesianChart.Series[0].VerticalAxis;
            annotation.HorizontalAxis = xRadCartesianChart.Series[0].HorizontalAxis;
            xRadCartesianChart.Annotations.Add(annotation);
        }
    }
}

public class TrendsLineSeriesChartData
{

    public double LineSeriesChartValue
    {
        get { return m_LineSeriesChartValue; }
        set { m_LineSeriesChartValue = value; }
    }

    private double m_LineSeriesChartValue;
    public DateTime LineSeriesChartCategory
    {
        get { return m_LineSeriesChartCategory; }
        set { m_LineSeriesChartCategory = value; }
    }

    private DateTime m_LineSeriesChartCategory;
}

I am using DateTimeContinousAxis as Horizontal Axis. Later I will be formatting the x-axis string to hh:mm or dd:MMM or anything else.

I would like to add the annotation in all the scenarios of x-axis string formatting.

Any early help would be really appreciated. Very urgent.

thanks,
Nitin

[Nitin Nitin]

Hello Telerik,

Please reply to my problem..I am stuck with this..

[Evgenia]

Hello Nitin,

 RadCartesianChart supports any type of object for a valid categorical value (such as number, DateTime or string) the properties that specify the position of Cartesian annotations (such as Horizontal/VerticalFrom/To) are of type object. This unfortunately means that the XAML parser will not always be able to determine the correct type as in the case of DateTime. Below is an example of annotation with DateTime HorizontalFrom and HorizontalTo:

this.chart.Annotations.Add(new CartesianCustomLineAnnotation
{
    HorizontalFrom = new DateTime(2011, 5, 26),
    HorizontalTo = new DateTime(2011, 7, 16),
    VerticalFrom = 520.0,
    VerticalTo = 630.0
});

//If you just need a vertical line
//you can use a grid line annotation
this.chart.Annotations.Add(new CartesianGridLineAnnotation
{
    Axis = chart.HorizontalAxis,
    Value = new DateTime(2011, 5, 28)
});

You can refer to this msdn article that demonstrates how you may parse strings to datetime. For more information on annotations, you can check our documentation here.

Regards,
Evgenia
Telerik