Display time result in RadChart

6 posts, 0 answers
  1. Sperduti
    Sperduti avatar
    16 posts
    Member since:
    Oct 2007

    Posted 16 Nov 2007 Link to this post

    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

  2. Kiril
    Admin
    Kiril avatar
    158 posts

    Posted 19 Nov 2007 Link to this post

    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
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Sperduti
    Sperduti avatar
    16 posts
    Member since:
    Oct 2007

    Posted 20 Nov 2007 Link to this post

    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
  5. Kiril
    Admin
    Kiril avatar
    158 posts

    Posted 20 Nov 2007 Link to this post

    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
  6. Benjamin
    Benjamin avatar
    7 posts
    Member since:
    Jun 2008

    Posted 19 Oct 2010 Link to this post

    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>
  7. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 22 Oct 2010 Link to this post

    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
    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
Back to Top
UI for WinForms is Visual Studio 2017 Ready