This is a migrated thread and some comments may be shown as answers.

Custom line X-Intercept on datetime axis

4 Answers 69 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Asad
Top achievements
Rank 1
Asad asked on 28 Nov 2011, 05:45 AM

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>

 

4 Answers, 1 is accepted

Sort by
0
Stuart
Top achievements
Rank 1
answered on 29 Nov 2011, 03:26 PM
Just voting this one up, this is precisely what I need to do also.
0
Stuart
Top achievements
Rank 1
answered on 29 Nov 2011, 04:51 PM
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.
0
Stuart
Top achievements
Rank 1
answered on 30 Nov 2011, 11:58 AM
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. 
0
Petar Marchev
Telerik team
answered on 30 Nov 2011, 03:21 PM
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

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

Tags
Chart
Asked by
Asad
Top achievements
Rank 1
Answers by
Stuart
Top achievements
Rank 1
Petar Marchev
Telerik team
Share this question
or