Custom line X-Intercept on datetime axis

5 posts, 0 answers
  1. Asad
    Asad avatar
    1 posts
    Member since:
    Sep 2011

    Posted 27 Nov 2011 Link to this post

    I'm trying to create two custom lines on a graph with a datetime X axis. The value for the X intercept property for the custom line is a double. How do I specify a date? The code below doesn't actually work because the propety requires a double and not a date, but it is what I need to do. Is there some sort of conversion I can use with a converter to create a double value from the date?


     <telerik:ChartDefaultView ChartLegendPosition="Bottom">


     <telerik:ChartLegend x:Name="scheduleLegend" Visibility="Visible" Header="" UseAutoGeneratedItems="True" />



     <telerik:ChartArea LegendName="scheduleLegend" RenderTransformOrigin="0.5,0.5">


     <telerik:CustomLine Stroke="Green" Slope="Infinity" XIntercept="01/01/2012" />

     <telerik:CustomLine Stroke="Orange" Slope="Infinity" XIntercept="01/01/2012" />



     <telerik:AxisX AutoRange="True" DefaultLabelFormat="MMM-yyyy" LabelRotationAngle="0" IsDateTime="True" >




     <telerik:AxisY AutoRange="True" Title="" >









  2. Stuart
    Stuart avatar
    6 posts
    Member since:
    Jun 2011

    Posted 29 Nov 2011 Link to this post

    Just voting this one up, this is precisely what I need to do also.
  3. Stuart
    Stuart avatar
    6 posts
    Member since:
    Jun 2011

    Posted 29 Nov 2011 Link to this post

    This appears to work, the property that you were binding to the chart on the X axis that is of type DateTime, change that to a double and populate it by calling .ToOADate() on your DateTimes. Then you can set the XIntercept to the result of calling .ToOADate() on the appropriate date value.
    You've already got DefaultLabelFormat and IsDateTime set in your XAML to format the X axis labels so this allows the OA date double to be shown as a date. 
    On first glance this appears to work for me, let me know if you find any problems.
  4. Stuart
    Stuart avatar
    6 posts
    Member since:
    Jun 2011

    Posted 30 Nov 2011 Link to this post

    In fact it's even easier than that. Leave your code just as it is and set the XIntercept by calling ToOADate on your date time. 
  5. Petar Marchev
    Petar Marchev avatar
    1029 posts

    Posted 30 Nov 2011 Link to this post


    If the DataPointMember is se to XValue (and not XCategory) you can use Stuart's approach. You need to convert the date ("01/01/2012") to OADate ("40909.0"). (or you can do this in code behind using DateTime.ToOADate() method)
    <telerik:CustomLine Stroke="Green" Slope="Infinity" XIntercept="40909.0" />

    If you have used XValue you should be all set.

    But when the DataPointMember is set to XCategory you need to throw in some extra work. In this case the XIntercept property expects a double that would represent the position of the custom line (as an index) relative to the bars. That is if you have 10 bar items and you set XIntercept to "7" - the custom line will be placed where the 7th bar is.

    To attain control of placing the custom line where you want you need to attach a handler to the DataBound event of the chart. In that event you can place you logic on where (at which index) you want to place your custom line.

    The code below can help you.
    Copy Code
    <telerik:RadChart x:Name="radChart">
                <telerik:ItemMapping DataPointMember="XCategory" FieldName="Date" />
                <telerik:ItemMapping DataPointMember="YValue" FieldName="Value" />

    Copy Code
    public partial class MainPage : UserControl
        public MainPage()
            DateTime now = DateTime.Now;           
            this.radChart.DataBound += radChart_DataBound;
            this.radChart.ItemsSource = new List<Sale>()
                new Sale(){Date=now.AddYears(-5), Value=50},
                new Sale(){Date=now.AddYears(-4), Value=20},
                new Sale(){Date=now.AddYears(-2), Value=150},
                new Sale(){Date=now.AddYears(-1), Value=30},
                new Sale(){Date=now.AddYears(4), Value=20},
                new Sale(){Date=now.AddYears(6), Value=150},
                new Sale(){Date=now.AddYears(9), Value=30},
            this.radChart.DefaultView.ChartArea.AxisX.LayoutMode = AxisLayoutMode.Inside;
        void radChart_DataBound(object sender, ChartDataBoundEventArgs e)
            DataSeries series = (DataSeries)(this.radChart.DefaultView.ChartArea.Items[0]);
            for (int i = 0; i < series.Count; i++)
                var dataPoint = (DataPoint)series[i];
                var currentSale = (Sale)(dataPoint.DataItem);
                DateTime comparativeDateTime = DateTime.Now;
                // custom logic here
                if (currentSale.Date >= comparativeDateTime)
                    CustomLine customLine = new CustomLine();
                    customLine.Slope = Double.PositiveInfinity;
                    customLine.Stroke = new SolidColorBrush(Colors.Red);
                    customLine.XIntercept = i + 1;
    public class Sale
        public DateTime Date { get; set; }
        public double Value { get; set; }

    Hope this helps.

    Petar Marchev
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top