How to show correct Time on DateTime axis (Primary axis) of Line chart after loading data from API response using SFChart in Xamarin forms?

Question

Time on DateTime axis (Primary axis) of Line chart showing incorrect time after loading data from API response using SFChart in Xamarin forms.

I am using SFChart - Line chart to show graph having time on x-axis and values on y-axis. I want to show 24 hours data on graph. I am getting date time and values from API response.

Before loading data I can see correct time on DateTime-Axis as shown in below image.

I have set IntervalType as Hour and Interval as 1 for DateTime-Axis (Primary axis)

but after loading data, time on DateTime-Axis is repeating 12AM, 4PM and 8AM as shown in below image.

I am sharing my code so that you will get clear idea what I have done and is there anything wrong in my code.

Xaml.cs

<Frame HasShadow="False"
               x:Name="outframe"
               CornerRadius="{OnIdiom Phone=15,Tablet=25}"
               Padding="0"
               OutlineColor="#ffffff"
               BackgroundColor="#4A4541"
               WidthRequest="{OnIdiom Phone=320,Tablet=600}"
               HeightRequest="{OnIdiom Phone=450,Tablet=475}"
               VerticalOptions="Center"
               HorizontalOptions="Center"
               IsClippedToBounds="True">
            <StackLayout VerticalOptions="FillAndExpand"
                         HorizontalOptions="FillAndExpand" BackgroundColor="#4A4541">
                <Label Text="GRAPH"
                       FontFamily="{StaticResource PrimaryFontBold}"
                       TextColor="White"
                       VerticalTextAlignment="Center"
                       Margin="0,50,0,0"
                       HorizontalTextAlignment="Center"
                       FontSize="{OnIdiom Phone=16,Tablet=22}"
                       HorizontalOptions="Center" />

                <sfcharts:SfChart HeightRequest="200"
                                  WidthRequest="300"
                                  HorizontalOptions="CenterAndExpand"
                                  VerticalOptions="CenterAndExpand"
                                  BackgroundColor="#4A4541"
                                  AreaBorderColor="White" AreaBackgroundColor="#4A4541">

                    <sfcharts:SfChart.PrimaryAxis>

                        <sfcharts:DateTimeAxis IntervalType="Hours" Interval="1"  LabelRotationAngle="90" >
                            <sfcharts:DateTimeAxis.LabelStyle> 
                                <sfcharts:ChartAxisLabelStyle LabelFormat = "hh:mm tt" TextColor="#FDDFBD">          
                            </sfcharts:ChartAxisLabelStyle>          
                        </sfcharts:DateTimeAxis.LabelStyle>
                    </sfcharts:DateTimeAxis>

                    </sfcharts:SfChart.PrimaryAxis>

                    <sfcharts:SfChart.SecondaryAxis>

                        <sfcharts:NumericalAxis  Minimum="0"
                                                 Maximum="60"
                                                 Interval="10" >
                        <sfcharts:NumericalAxis.LabelStyle> 
                                <sfcharts:ChartAxisLabelStyle TextColor="White"> 
                            </sfcharts:ChartAxisLabelStyle>          
                        </sfcharts:NumericalAxis.LabelStyle>
                            <sfcharts:NumericalAxis.MajorGridLineStyle>
                                <sfcharts:ChartLineStyle StrokeColor="#bae1f2"/>
                            </sfcharts:NumericalAxis.MajorGridLineStyle>
                            </sfcharts:NumericalAxis>
                    </sfcharts:SfChart.SecondaryAxis>

                    <sfcharts:StackingLineSeries x:Name="MyLineChart"
                                                 XBindingPath="Key"
                                                 YBindingPath="Value" ItemsSource="{Binding LineData}"
                                                 ListenPropertyChange="True" StrokeWidth="1" Color="#FDDFBD" >
                        <sfcharts:StackingLineSeries.DataMarker>
                            <sfcharts:ChartDataMarker MarkerWidth="2" MarkerHeight="2" ShowLabel="False" ShowMarker="true" MarkerBorderColor="#bae1f2" MarkerBorderWidth="2" MarkerColor="White"/>
                        </sfcharts:StackingLineSeries.DataMarker>
                    </sfcharts:StackingLineSeries>
                </sfcharts:SfChart>
            </StackLayout>
        </Frame>

Codebehind.cs

RViewModel rViewModel;
 public RRGraph()
    {
        InitializeComponent();
        rViewModel = new RViewModel();
        BindingContext = rViewModel;
    }

Model.cs

public class ChartData
{
    public string name { get; set; }
    public ObservableCollection<LineChartData> DataPoints { get; set; }
}

public class LineChartData:INotifyPropertyChanged
{
    public LineChartData(string key, double value)
    {
        Value = value;
        Key = key;
    }

    private double value;

    public double Value
    {
        get { return value; }
        set
        {
            this.value = value;
            RaisePropertyChanged("Value");
        }
    }

    private string key;

    public string Key
    {
        get { return key; }
        set
        {
            DateTime dt = DateTime.Parse(value);

            value = dt.ToString("hh:mm tt");
            key = value;
            RaisePropertyChanged("Key");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    void RaisePropertyChanged(string name)
    {
        if (PropertyChanged != null)
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }

}

ViewModel.cs

public class RViewModel:INotifyPropertyChanged
{
    public ChartData ChartData { get; set; }

    public ObservableCollection<LineChartData> LineData
    {
        get { return lineData; }
        set
        {
            lineData = value;
            RaisePropertyChanged(nameof(LineData));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    void RaisePropertyChanged(string name)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }

    public RespiratoryViewModel(string roomId)
    {
        LoadData();
    }

    public async void LoadData()
    {
        try
        {
    //API call
            ChartData = await AppClass.DataManager.GetRR();
            LineData = ChartData.DataPoints;
        }
        catch (Exception ex)
        {
            Crashes.TrackError(ex);
        }
    }
}

I am struggling with this. Not getting what is exact issue. Any hint for this?

Answer 1

I tried and I got answer for this so sharing here. Issue is DataType used for Key.

I am getting date time in string format and values in double from API response. I had kept that Key as string only instead of that it’s datatype should be DateTime. So I have added one parameter DateValue of datatype DateTime in LineChartData Model.

public DateTime DateValue { get; set; }

    public LineChartData(string key, double value)
    {
        Value = value;
        Key = key;
        DateValue = DateTime.ParseExact(Key, "hh:mm tt", new CultureInfo("en-US"));
    }

And in xaml set that DateValue to XBindingPath.

<sfcharts:LineSeries x:Name="MyLineChart" XBindingPath="DateValue" YBindingPath="Value" ItemsSource="{Binding LineData}" ListenPropertyChange="True" StrokeWidth="1" Color="#FDDFBD" >
                        <sfcharts:LineSeries.DataMarker>
                            <sfcharts:ChartDataMarker MarkerWidth="2" MarkerHeight="2" ShowLabel="False" ShowMarker="true" MarkerBorderColor="#bae1f2" MarkerBorderWidth="2" MarkerColor="White"/>
                        </sfcharts:LineSeries.DataMarker>
                    </sfcharts:LineSeries>