Custom line X-Intercept on datetime axis

[Asad]

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:RadChart.DefaultView>

 <telerik:ChartDefaultView ChartLegendPosition="Bottom">

 <telerik:ChartDefaultView.ChartLegend>

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

 </telerik:ChartDefaultView.ChartLegend>

  <telerik:ChartDefaultView.ChartArea>

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

 <telerik:ChartArea.Annotations>

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

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

 </telerik:ChartArea.Annotations>

 <telerik:ChartArea.AxisX>

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

 </telerik:AxisX>

 </telerik:ChartArea.AxisX>

 <telerik:ChartArea.AxisY>

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

 </telerik:AxisY>

 </telerik:ChartArea.AxisY>

 </telerik:ChartArea>

 </telerik:ChartDefaultView.ChartArea>

 </telerik:ChartDefaultView>

 </telerik:RadChart.DefaultView>

 </telerik:RadChart>

 

[Stuart]

Just voting this one up, this is precisely what I need to do also.

[Stuart]

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.

[Stuart]

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. 

[Petar Marchev]

Hi,

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:RadChart.SeriesMappings>
        <telerik:SeriesMapping>
            <telerik:ItemMapping DataPointMember="XCategory" FieldName="Date" />
            <telerik:ItemMapping DataPointMember="YValue" FieldName="Value" />
        </telerik:SeriesMapping>
    </telerik:RadChart.SeriesMappings>
</telerik:RadChart>

Copy Code

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();

        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;

                this.radChart.DefaultView.ChartArea.Annotations.Add(customLine);
                break;
            }
        }
    }
}

public class Sale
{
    public DateTime Date { get; set; }
    public double Value { get; set; }
}

Hope this helps.

Regards,
Petar Marchev
the Telerik team