Xamarin.Forms Chart DateTimeContinuousAxis LabelFormat Time issue

8 posts, 1 answers
  1. s.smith@oneeventtechnologies.com
    s.smith@oneeventtechnologies.com avatar
    5 posts
    Member since:
    Oct 2015

    Posted 24 Feb Link to this post

    I am using a DateTimeContinuousAxis to display various metrics over time.  I have set the LabelFormat to M/dd/yy h:mm.  However, even though I convert the DateTime values from UTC to local time before setting the data on the chart, the labels are displayed in UTC. How can I change this?  Also, regarding the LabelFormt, how can I get AM or PM displayed?  I have tried adding tt to the format string, but it does not seem to work?
  2. s.smith@oneeventtechnologies.com
    s.smith@oneeventtechnologies.com avatar
    5 posts
    Member since:
    Oct 2015

    Posted 24 Feb in reply to s.smith@oneeventtechnologies.com Link to this post

    I think I resolved my own issue with the UTC display.  It seems that the Chart expects that you are feeding it UTC datetime values and it converts for you.  So, all I needed to do was to NOT resolve to local time and leave the values I give the Chart UTC.

    Still trying to figure out the AM/PM formatting however.

  3. DevCraft banner
  4. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 29 Feb Link to this post

    Hi,

    I tried to reproduce the behavior you report in our side and it seems that the RadCartesianChart displays the dates that are provided in the datacontext as expected. In other words, the chart displays what you provide it with. There are no additional calculations over the provided business data. Could you please check what the provided data is? If you suspect some additional calculations are performed we would like to kindly ask you to provide us with a sample repro project.

    As for the question related with the formatting, please refer to MSDN article.

    Regards,
    Pavel R. Pavlov
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  5. s.smith@oneeventtechnologies.com
    s.smith@oneeventtechnologies.com avatar
    5 posts
    Member since:
    Oct 2015

    Posted 29 Feb Link to this post

    I am familiar with the standard DateTime formatting and have tried "g" to get the results I am hoping for.  However, it does not work.
  6. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 02 Mar Link to this post

    Hello,

    The following code produces a chart which displays the labels of the horizontal axis as described.

    <telerikChart:RadCartesianChart>
        <telerikChart:RadCartesianChart.HorizontalAxis>
          <telerikChart:DateTimeContinuousAxis LabelFormat="g"/>
        </telerikChart:RadCartesianChart.HorizontalAxis>
        <telerikChart:RadCartesianChart.VerticalAxis>
          <telerikChart:NumericalAxis/>
        </telerikChart:RadCartesianChart.VerticalAxis>
        <telerikChart:RadCartesianChart.Series>
          <telerikChart:BarSeries ItemsSource="{Binding Data}">
            <telerikChart:BarSeries.ValueBinding>
              <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
            </telerikChart:BarSeries.ValueBinding>
            <telerikChart:BarSeries.CategoryBinding>
              <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
            </telerikChart:BarSeries.CategoryBinding>
          </telerikChart:BarSeries>
        </telerikChart:RadCartesianChart.Series>
      </telerikChart:RadCartesianChart>
    The data provided to the chart is created like this:

    public class CategoricalData
    {
        public DateTime Category { get; set; }
     
        public double Value { get; set; }
    }
     
    public class ViewModel
    {
        public ViewModel()
        {
            this.Data = GetCategoricalData();
        }
     
        public List<CategoricalData> Data { get; set; }
     
        public string Title { get; set; }
     
        public static List<CategoricalData> GetCategoricalData()
        {
            List<CategoricalData> data = new List<CategoricalData>
        {
            new CategoricalData { Category = DateTime.Now.AddDays(1).AddHours(12), Value = 0.63 },
            new CategoricalData { Category = DateTime.Now.AddDays(2).AddHours(13), Value = 0.85 },
            new CategoricalData { Category = DateTime.Now.AddDays(3).AddHours(14), Value = 1.05 },
            new CategoricalData { Category = DateTime.Now.AddDays(4).AddHours(15), Value = 0.96 },
            new CategoricalData { Category = DateTime.Now.AddDays(5).AddHours(16), Value = 0.78 },
        };                                  
     
            return data;
        }
    }
    The only think you need to ensure is that the labels have enough free space to be visualized. Please note that the required format needs a lot of space for the label to be rendered. If there is no such space the AM and PM identifiers may be trimmed. If this is the case you will need to figure out a different way for visualizing the labels. You can rotate them sideways or you can try to reduce the amount of the data that is visualized so that the labels will have additional space.

    Regards,
    Pavel R. Pavlov
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  7. s.smith@oneeventtechnologies.com
    s.smith@oneeventtechnologies.com avatar
    5 posts
    Member since:
    Oct 2015

    Posted 02 Mar in reply to Pavel R. Pavlov Link to this post

    I have tried using "g".  The result I get are values on the horizontal axis are values like 2457499.  Below is the XAML

    <chart:RadCartesianChart x:Name="DayChart"
                                  HorizontalOptions="FillAndExpand"
                                  VerticalOptions="FillAndExpand"
                                  IsVisible="{Binding IsDayChart}">
           <chart:GridLineVisibility>XY</chart:GridLineVisibility>
          
           <chart:RadCartesianChart.Behaviors>
             <chart:ChartTrackBallBehavior ShowTrackInfo="True" ShowIntersectionPoints="True" />
             <chart:ChartPanAndZoomBehavior ZoomMode="Horizontal" PanMode="Horizontal" HandleDoubleTap="True"  />
           </chart:RadCartesianChart.Behaviors>
     
           <chart:RadCartesianChart.HorizontalAxis>
             <chart:DateTimeContinuousAxis  MajorStepUnit="Hour" LabelFormat="g" PlotMode="OnTicks" LabelFitMode="Rotate"/>
           </chart:RadCartesianChart.HorizontalAxis>
           <chart:RadCartesianChart.VerticalAxis>
             <chart:NumericalAxis/>
           </chart:RadCartesianChart.VerticalAxis>
     
           <chart:RadCartesianChart.Series>
             <chart:SplineAreaSeries ItemsSource="{Binding DayData}">
               <chart:SplineAreaSeries.ValueBinding>
                 <chart:PropertyNameDataPointBinding PropertyName="Value"/>
               </chart:SplineAreaSeries.ValueBinding>
               <chart:SplineAreaSeries.CategoryBinding>
                 <chart:PropertyNameDataPointBinding PropertyName="Date"/>
               </chart:SplineAreaSeries.CategoryBinding>
             </chart:SplineAreaSeries>
           </chart:RadCartesianChart.Series>
         </chart:RadCartesianChart>

  8. Answer
    Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 07 Mar Link to this post

    Hi,

    If the general date/time pattern for short time "g" does not work on your side why not trying a custom format string? Could you please try the following string on your side and let us know the results "d/M/yyy h:m a"?

    Regards,
    Pavel R. Pavlov
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  9. s.smith@oneeventtechnologies.com
    s.smith@oneeventtechnologies.com avatar
    5 posts
    Member since:
    Oct 2015

    Posted 07 Mar in reply to Pavel R. Pavlov Link to this post

    Using "d/M/yyy h:m a" did work!  Thank you
Back to Top
DevCraft banner