Xamarin.Forms Chart DateTimeContinuousAxis LabelFormat Time issue

[[e-mail]]

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?

[[e-mail]]

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.

[Pavel R. Pavlov]

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

[[e-mail]]

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.

[Pavel R. Pavlov]

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

[[e-mail]]

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>

[Pavel R. Pavlov]

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

[[e-mail]]

Using "d/M/yyy h:m a" did work!  Thank you