Display time result in RadChart

[Sperduti]

Hi,

I want to display times in my radchart ( horyzontal Bar type ) in format  mm:ss:ff.
I use XML file to bind my radchart datasource :

<?xml version="1.0" encoding="utf-8" ?>
<items>
  <item Title="encoding" val="12000" />
  <item Title="writing" val="20000" />
</items>

my "val" is in millisecond.

but when I do 

    this.DataSource ="myxml.xml";
    this.PlotArea.YAxis.Appearance.ValueFormat = ChartValueFormat.ShortDate;
    this.PlotArea.YAxis.Appearance.CustomFormat = "mm:ss:ff";

I can see on my chart "00:00:00" several times in my XAxis and data (val) is not converted.

What can I do ?

Thanks,

YSP

[Kiril]

Hi Sperduti,

Thank you for writing.

The RadChart handles dates in Ole Automation Date format. You can convert a value in this format using the ToOADate method of a DateTime object. Please refer to the link below for additional information on this date format:

http://msdn2.microsoft.com/en-us/library/system.datetime.tooadate(VS.71).aspx

Once you have the values in your XML file converted to the Ole Automation Format, you have to make changes to the code you're using the initialize the chart. Here's the code we used to plot the data. You can insert this code immediately after the call to the InitializeComponent method in the form.

radChart1.Series.Clear();
            radChart1.DataSource = "myxml.xml";
            radChart1.PlotArea.YAxis.Appearance.ValueFormat = ChartValueFormat.ShortTime;
            radChart1.PlotArea.YAxis.Appearance.CustomFormat = "mm:ss:ff";
            radChart1.PlotArea.YAxis.AutoScale = true;
            radChart1.PlotArea.YAxis.IsZeroBased = false;

            radChart1.UpdateGraphics();

 
The XML file we used is the following:

<?xml version="1.0" encoding="utf-8" ?>
<items>
  <item Title="encoding" val="39405.774" />
  <item Title="writing" val="39405.7741" />
</items>

You can now verify the values on the Y-axis (in your case you have to modify the code to suit your scenario) contain time values corresponding to the values in the XML file.

If you have any additional questions, please contact us.

Regards,
Kiril
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Sperduti]

Hi,
Thanks for your answer, but It doesn't work.
I have the same results than before, i.e my number equal than those in my XML File and the Axis only contain 00:00:00 values.

Regards,

YSP

[Kiril]

Hello Sperduti,

Could you please send us a small project reproducing this behavior? We'd like to investigate further.

We're looking forward to your response.

Sincerely yours,
Kiril
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Benjamin]

I am having the same issue...

<telerik:RadChart ID="RadChart1" runat="server" Legend-Visible="false" SkinsOverrideStyles="true" Width="450px">
           <PlotArea>
               <XAxis MaxValue="300000" MinValue="0" Step="60000" AutoScale="false" Appearance-ValueFormat="shortDate" Appearance-CustomFormat="mm:ss:ff">
               </XAxis>
               <YAxis MaxValue="100" Step="20" AutoScale="false">
               </YAxis>
           </PlotArea>
           <Series>
               <telerik:ChartSeries Name="Series1" Type="Point">
                   <Appearance LegendDisplayMode="Nothing" PointShape="Diamond">
                       <FillStyle MainColor="Red">
                       </FillStyle>
                   </Appearance>

                   <Items>
                       <telerik:ChartSeriesItem YValue="67" XValue="85000" Name="Item 1">
                       </telerik:ChartSeriesItem>
                   </Items>
               </telerik:ChartSeries>
                <telerik:ChartSeries Name="Series2" Type="Point">
                   <Appearance LegendDisplayMode="Nothing"  PointShape="Circle">
                       <FillStyle MainColor="Blue">
                       </FillStyle>
                   </Appearance>
                   <Items>
                       <telerik:ChartSeriesItem YValue="55" XValue="80000" Name="Item 1">
                       </telerik:ChartSeriesItem>
                       <telerik:ChartSeriesItem YValue="60" XValue="250000" Name="Item 2">
                       </telerik:ChartSeriesItem>
                       <telerik:ChartSeriesItem YValue="72" XValue="180000" Name="Item 3">
                       </telerik:ChartSeriesItem>
                       <telerik:ChartSeriesItem YValue="85" XValue="65400" Name="Item 4">
                       </telerik:ChartSeriesItem>
                       <telerik:ChartSeriesItem YValue="89" XValue="165320" Name="Item 5">
                       </telerik:ChartSeriesItem>
                   </Items>
               </telerik:ChartSeries>

[Evgenia]

Hello Benjamin,

I saw from your code snippet that you are trying to set integer numbers as XValue-s. Indeed RadChart works only with numeric types but it can't convert numeric values into DateTime format. To be able to set DateTime values on axis you should convert them to their OLE Automation equivalents using ToOADate().

Please, review this online example -  http://demos.telerik.com/aspnet-ajax/chart/examples/functionality/numericalaxis/defaultcs.aspx that demonstrates how you can display DateTime on the axes of RadChart.

If you want to set custom Range for XAxis you can do it like this:

RadChart1.PlotArea.XAxis.AddRange(DateTime.Today.ToOADate(), DateTime.Today.AddDays(3).ToOADate(), 1);

You can also rotate axis Item Labels so they won't overlap like this:

RadChart1.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 45;

Here is how you can create your Series:

ChartSeries series = new ChartSeries();
series.AddItem(new ChartSeriesItem(DateTime.Today.ToOADate(), 20));
series.AddItem(new ChartSeriesItem(DateTime.Today.AddDays(1).ToOADate(), 15));
series.AddItem(new ChartSeriesItem(DateTime.Today.AddDays(2).ToOADate(), 10));
series.AddItem(new ChartSeriesItem(DateTime.Today.AddDays(3).ToOADate(), 25));
series.AddItem(new ChartSeriesItem(DateTime.Today.AddDays(4).ToOADate(), 37));

RadChart1.Series.Add(series);

Regards,
Evgenia
the Telerik team