DateTime Axis not working well with hours interval type

[Safeer Ahmad]

Hi, 

I've been trying to use Hours interval type but its not giving me the required behaviour. It seems like X-axis labels are being created randomly and I've no control over them. I have 24 data points, one for each past hour but I see a lot more than them on the chart but the actual bars are 24. Could you please help me to get this right?

I've attached my code.

Attachment: App35_3ca69bfa.zip

[Michael Prabhu M]

Hi Safeer Ahmad, 

Greetings from Syncfusion, we have analyzed your application and found that you have bound the integer value in XBindingPath by getting DateTime.Hour() which is integer. For DateTimeAxis you have to bind only DateTime value in XBindingPath. We have changed your sample for your requirement and it can be downloaded from the below link. 

Sample: 140168 

Code snippet: 

<chart:StackingColumnSeries SelectedDataPointColor="Blue" 

                            ListenPropertyChange="True" 

                            ItemsSource="{Binding Path=BindingContext.Data,Source={x:Reference hourlyChart}}"  

                            EnableAnimation="True"   

                            Spacing=".1"  

                            EnableDataPointSelection="True"  

                            XBindingPath="Date"  

                            YBindingPath="ActualSalesValue"                                            

                            Label="Actual Sales"  

                            EnableTooltip="True" > 

 

Thanks, 

Michael 

[Chaitanya]

Hi Safeer Ahmad, 

Greetings from Syncfusion, we have analyzed your application and found that you have bound the integer value in XBindingPath by getting DateTime.Hour() which is integer. For DateTimeAxis you have to bind only DateTime value in XBindingPath. We have changed your sample for your requirement and it can be downloaded from the below link. 

Sample: 140168 

Code snippet: 

<chart:StackingColumnSeries SelectedDataPointColor="Blue" 

                            ListenPropertyChange="True" 

                            ItemsSource="{Binding Path=BindingContext.Data,Source={x:Reference hourlyChart}}"  

                            EnableAnimation="True"   

                            Spacing=".1"  

                            EnableDataPointSelection="True"  

                            XBindingPath="Date"  

                            YBindingPath="ActualSalesValue"                                            

                            Label="Actual Sales"  

                            EnableTooltip="True" > 

 

Thanks, 

Michael 

How to show X axis  values as show in image.

I have tried with
1. Minimum and Maximum
2. Delta values.

Please help me here....

[Yuvaraj Palanisamy]

Hi Chaitanya, 

 

We have analyzed your query “DateTime axis with Minimum, Maximum and Interval” and we have achieved your requirement as like in the provided image with the help of binding Minimum, Interval and Maximum property of DateTimeAxis. Please find the code example below. 

 

CodeSnippet: [XAML] 

<chart:SfChart.PrimaryAxis> 

    <chart:DateTimeAxis x:Name="dateTimeAxis" 

        Interval="3" 

        IntervalType="Hours" 

        Minimum="{Binding MinimumDate}" 

        Maximum="{Binding MaximumDate}"> 

 

        <chart:DateTimeAxis.LabelStyle> 

            <chart:ChartAxisLabelStyle LabelFormat="HH:mm"  

                                       TextColor="Black" /> 

        </chart:DateTimeAxis.LabelStyle> 

    </chart:DateTimeAxis> 

</chart:SfChart.PrimaryAxis> 

 

C#: 

DateTimeAxis dateTimeAxis = new DateTimeAxis(); 

dateTimeAxis.Interval = 3; 

dateTimeAxis.IntervalType = DateTimeIntervalType.Hours; 

dateTimeAxis.SetBinding(DateTimeAxis.MinimumProperty, new Binding("MinimumDate")); 

dateTimeAxis.SetBinding(DateTimeAxis.MaximumProperty, new Binding("MaximumDate")); 

dateTimeAxis.LabelStyle = new ChartAxisLabelStyle() { LabelFormat = "HH:mm" }; 

chart.PrimaryAxis = dateTimeAxis; 

 

ViewModel.cs 

public DateTime MinimumDate { get; set; } 

 

public DateTime MaximumDate { get; set; } 

 

public ViewModel() 

{ 

 

    DateTime dateTime = new DateTime(2021, 01, 01, 01, 01, 0); 

 

    MinimumDate = dateTime.AddHours(-1); 

    MaximumDate = dateTime.AddHours(20); 

} 

 

Also, we have attached the sample for your reference. Please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/140168/ze/ChartSample_DateTime1244652868  

  

Output: 

 

For more details, please refer the below ug document 

 

UG: https://help.syncfusion.com/xamarin/charts/axis#date-time-axis  

 

Please let us know if you have any concern. 

 

Regards, 

Yuvaraj.