(!Date)TIME Support for X-Axis

[Vinod Sardar]

Hi,

I have a requirement to create a chart for time v/s value. X axis will have Time value and Y -axis will have price value.

i have following data in code:

 public static IEnumerable GetStockWithTimeSINGLESERIES()
        {
            List<Stock> _lstStocks = new List<Stock>();

            Stock s1 = new Stock();
            s1.Name = "s1";
            s1.Volume = 100;
            s1.CreationDate = new DateTime(2010, 1, 1, 8, 0, 0);
            s1.ConvertedDate = s1.CreationDate.ToOADate();

            Stock s2 = new Stock();
            s2.Name = "s12";
            s2.Volume = 110;
            s2.CreationDate = new DateTime(2010, 1, 1, 8, 30, 0);
            s2.ConvertedDate = s2.CreationDate.ToOADate();

            Stock s3 = new Stock();
            s3.Name = "s3";
            s3.Volume = 120;
            s3.CreationDate = new DateTime(2010, 1, 1, 9, 0, 0);
            s3.ConvertedDate = s3.CreationDate.ToOADate();

            Stock s4 = new Stock();
            s4.Name = "s4";
            s4.Volume = 130;
            s4.CreationDate = new DateTime(2010, 1, 1, 9, 30, 0);
            s4.ConvertedDate = s4.CreationDate.ToOADate();

            //

            Stock s5 = new Stock();
            s5.Name = "s5";
            s5.Volume = 140;
            s5.CreationDate = new DateTime(2010, 1, 1, 10, 0, 0);
            s5.Price = s5.CreationDate.ToOADate();

            Stock s6 = new Stock();
            s6.Name = "s6";
            s6.Volume = 150;
            s6.CreationDate = new DateTime(2010, 1, 1, 10, 30, 0);
            s6.ConvertedDate = s6.CreationDate.ToOADate();


            Stock s7 = new Stock();
            s7.Name = "s7";
            s7.Volume = 160;
            s7.CreationDate = new DateTime(2010, 1, 1, 11, 0, 0);
            s7.ConvertedDate = s7.CreationDate.ToOADate();

            Stock s8 = new Stock();
            s8.Name = "s8";
            s8.Volume = 170;
            s8.CreationDate = new DateTime(2010, 1, 1, 11, 30, 0);
            s8.ConvertedDate = s8.CreationDate.ToOADate();


            _lstStocks.Add(s1);
            _lstStocks.Add(s2);
            _lstStocks.Add(s3);
            _lstStocks.Add(s4);
            _lstStocks.Add(s5);
            _lstStocks.Add(s6);
            _lstStocks.Add(s7);
            _lstStocks.Add(s8);

            return _lstStocks;
        }

XAML CODE AS FOLLOWS:

<UserControl x:Class="TestProj.DateTimeLabelStepOLEConversion"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerikCharting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    xmlns:telerikChart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"

    >
    <Grid x:Name="LayoutRoot" Background="White">
        <telerikChart:RadChart x:Name="radChart" VerticalAlignment="Top" HorizontalAlignment="Right">
                  </telerikChart:RadChart>
    </Grid>
</UserControl>

Code Behind:

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

                       try
            {


                SeriesMapping sm = new SeriesMapping();

                sm.SeriesDefinition = new LineSeriesDefinition();
                sm.ItemMappings.Add(new ItemMapping("Volume", DataPointMember.YValue));
                sm.ItemMappings.Add(new ItemMapping("ConvertedDate", DataPointMember.XValue));

                sm.ChartArea = radChart.DefaultView.ChartArea;


                sm.ChartArea.AxisX.AutoRange = false;
                sm.ChartArea.AxisX.IsDateTime = true;
                sm.ChartArea.AxisX.MinValue = new DateTime(2010, 1, 1, 7, 0, 0).ToOADate();
                sm.ChartArea.AxisX.MaxValue = new DateTime(2010, 1, 1, 12, 0, 0).ToOADate();
                sm.ChartArea.AxisX.Step = 1;
                sm.ChartArea.AxisX.LabelStep = 1;
                sm.ChartArea.AxisX.LayoutMode = AxisLayoutMode.Inside;
                //sm.ChartArea.AxisX.LabelRotationAngle = 45;
                sm.ChartArea.AxisX.DefaultLabelFormat = "hh:mm";


                radChart.SeriesMappings.Add(sm);
                radChart.ItemsSource = Stock.GetStockWithTimeSINGLESERIES();
            }
            catch (Exception ex)
            {
            }
        }
 public class Stock
    {
        public string Name { get; set; }
        public string Month { get; set; }
        public double Volume { get; set; }
        public double ConvertedDate { get; set; }
        public double Price { get; set; }
        public DateTime CreationDate { get; set; }


        public static IEnumerable GetStockWithTimeSINGLESERIES()
        {
            List<Stock> _lstStocks = new List<Stock>();

            Stock s1 = new Stock();
            s1.Name = "s1";
            s1.Volume = 100;
            s1.CreationDate = new DateTime(2010, 1, 1, 8, 0, 0);
            s1s1.ConvertedDate = s1.CreationDate.ToOADate();

            Stock s2 = new Stock();
            s2.Name = "s12";
            s2.Volume = 110;
            s2.CreationDate = new DateTime(2010, 1, 1, 8, 30, 0);
            s2s2.ConvertedDate = s2.CreationDate.ToOADate();

            Stock s3 = new Stock();
            s3.Name = "s3";
            s3.Volume = 120;
            s3.CreationDate = new DateTime(2010, 1, 1, 9, 0, 0);
            s3s3.ConvertedDate = s3.CreationDate.ToOADate();

            Stock s4 = new Stock();
            s4.Name = "s4";
            s4.Volume = 130;
            s4.CreationDate = new DateTime(2010, 1, 1, 9, 30, 0);
            s4s4.ConvertedDate = s4.CreationDate.ToOADate();

            //

            Stock s5 = new Stock();
            s5.Name = "s5";
            s5.Volume = 140;
            s5.CreationDate = new DateTime(2010, 1, 1, 10, 0, 0);
            s5s5.Price = s5.CreationDate.ToOADate();

            Stock s6 = new Stock();
            s6.Name = "s6";
            s6.Volume = 150;
            s6.CreationDate = new DateTime(2010, 1, 1, 10, 30, 0);
            s6s6.ConvertedDate = s6.CreationDate.ToOADate();


            Stock s7 = new Stock();
            s7.Name = "s7";
            s7.Volume = 160;
            s7.CreationDate = new DateTime(2010, 1, 1, 11, 0, 0);
            s7s7.ConvertedDate = s7.CreationDate.ToOADate();

            Stock s8 = new Stock();
            s8.Name = "s8";
            s8.Volume = 170;
            s8.CreationDate = new DateTime(2010, 1, 1, 11, 30, 0);
            s8s8.ConvertedDate = s8.CreationDate.ToOADate();


            _lstStocks.Add(s1);
            _lstStocks.Add(s2);
            _lstStocks.Add(s3);
            _lstStocks.Add(s4);
            _lstStocks.Add(s5);
            _lstStocks.Add(s6);
            _lstStocks.Add(s7);
            _lstStocks.Add(s8);

            return _lstStocks;
        }
}
    }

Now I want to make a chart that will show the timing on the x-axis and volume on the y-axis.

x axis should look like 

8:00 9:00 10:00 11:00
Question:
1.How to step the time on the x-axis. ?
2.Does Chart Automatically handles the convertion of the DateTime to OLE. (In code I have created the separate property of type double which holds the converted Datetime value... Which I don't want to use.)?
3.Please provide any link that will lead me to TIME SUPPORT for Chart. I have gone thru DATE TIEM SUPPPORT Link
at:http://www.telerik.com/help/silverlight/radchart-features-datetime-support.html
but could not find any info on the TIME support.


Please let me know if you need more info.

[Vinod Sardar]

Please reply... waiting for u guys to reply.

[Velin]

Hi Vinod Sardar,

Onto your questions:

1. Here is a sample code that should help you set up the X axis for DateTime:

   sm.ChartArea.AxisX.IsDateTime = true;
   sm.ChartArea.AxisX.AutoRange = false;
   
   DateTime minValue = new DateTime(2010, 1, 1, 7, 0, 0);
   DateTime maxValue = minValue.AddHours(10);
   double step = minValue.AddHours(1).ToOADate() - minValue.ToOADate();
   
   sm.ChartArea.AxisX.AddRange(minValue.ToOADate(), maxValue.ToOADate(), step);
   
   sm.ChartArea.AxisX.DefaultLabelFormat = "HH:mm";

2. RadChart will automatically handle DateTime values so you do not need to use converted values when data binding your data. When you manually adjust the X axis range, however, you will need to convert the axis values to OA date, as shown in the code above.
   
3. I'm afraid that this article is the only one available at the moment that is dedicated to DateTime support in RadChart.

Please find attached the modified code.

Hope this will help.

Sincerely yours,
Velin
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Vinod Sardar]

Thanks for the reply. That helped me but still found some issue for other requirement. I thought I am very close but like a moview villian came and take away the heroin.

I am trying to show the data for the 6 month on the X-axis.

Sample code for setting the min,Max and Range value:

DateTime minValue = new DateTime(2009, 12, 31, 0, 0, 0);
                DateTime maxValue = minValue.AddMonths(6);
                double step = minValue.AddMonths(1).ToOADate() - minValue.ToOADate();
                sm.ChartArea.AxisX.AddRange(minValue.ToOADate(), maxValue.ToOADate(), step);
                sm.ChartArea.AxisX.DefaultLabelFormat = "MMM";

out put is displayed as showin in the screenshot.

X axis shows.

----|---------|----------|--------|---------|-------|----------|-----------------
    Dec      Jan        Mar      Mar      Apr    May     Jun

Issue is Chart is not handling the condition with FEB Month..... may be chart considers the Month = 30/31 days.. which is causing the issue.

Please let mw know any ways to resolved this/ workaroud.

Thanks in advanced.

[Velin]

Hello Vinod Sardar,

The issue is caused by the current inability of the chart control to handle non-linear DateTime data as stated by Manuel in your other post. The axis labels are placed at equal time intervals along the X axis with no regard to the number of days contained. That is why February, being a shorter one, do not appear on the X axis.

Please, accept our apologies for this inconvenience.

All the best,
Velin
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Vinod Sardar]

Hi,

Thanks for your reply.

But.... this is one of the critical feature that we want to achieve. When are you planning to resolved this issue.

Pleaselet me know if I can do any workaround to resolve this issue.

[Velin]

Hi Vinod Sardar,

It is in our plans to review the existing DateTime functionality and improve it to successfully cover more complicated scenarios, but unfortunately we can not commit a specific time frame for this.

All the best,
Velin
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.