Setting Custom labels and interval on DateTime axis is not drawing the series

[Moin Faisal]

I have data which is time, value to be plotted on areaseries with DateTime axis as the primary axis and Numeric Axis as the secondary axis.(like shown below)

I have tried the below code. 

xaml: 

<chart:SfChart x:Name="ChartControl" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Black" 

                               ChartPadding ="5" AreaBackgroundColor="Black"

                               AreaBorderColor="Black" AreaBorderWidth="3">

                    <chart:SfChart.PrimaryAxis>

                        <chart:DateTimeAxis x:Name="XAxis" Interval="14400" IntervalType="Seconds" CrossesAt="0" ShowMinorGridLines="False" ShowMajorGridLines="False" LabelCreated="OnXAxisLabelCreated">

                            <chart:DateTimeAxis.LabelStyle >

                                <chart:ChartAxisLabelStyle LabelFormat="hh tt" />

                            </chart:DateTimeAxis.LabelStyle>

                        </chart:DateTimeAxis>

                    </chart:SfChart.PrimaryAxis>

                    <chart:SfChart.SecondaryAxis>

                        <chart:NumericalAxis x:Name="YAxis" ShowMajorGridLines="False" ShowMinorGridLines="False" CrossesAt="{Binding Source={x:Static System:DateTime.Today}}">

                        </chart:NumericalAxis>

                    </chart:SfChart.SecondaryAxis>

                    <chart:SfChart.Series>

                        <chart:AreaSeries x:Name="ChartSeries" ItemsSource="{Binding Data}" XBindingPath="Time" YBindingPath="Value" />

                    </chart:SfChart.Series>

                </chart:SfChart>

Code behind:

 private void OnXAxisLabelCreated(object sender, ChartAxisLabelEventArgs e)

        {

            DateTimeAxis dateTimeAxis = (DateTimeAxis)sender;

            dateTimeAxis.Minimum = DateTime.Today;

            dateTimeAxis.Maximum = DateTime.Today.AddHours(23).AddMinutes(59).AddSeconds(59);

           

    //hiding the end labels

            if (e.LabelContent == "12 AM" || e.LabelContent == "11 PM")

            {

                e.LabelStyle = new ChartAxisLabelStyle();

                e.LabelStyle.FontSize = 0.01f;

            }

            if (e.LabelContent == "12 PM")

            {

                e.LabelContent = "Noon";

            }

        }

Data coming from the model

 myDataCaptured = new List<DataCaptured>()

                {

                    new DataCaptured{ Time = new DateTime(2019, 05, 12, 3, 12,0), Value = 2.1 },

                    new DataCaptured{ Time = new DateTime(2019, 05, 12, 6, 32,0), Value = 2.3 },

                    new DataCaptured{ Time = new DateTime(2019, 05, 12, 5, 23,0), Value = 5.1 }                    

                }.OrderBy(data=>data.Time).ToList();

If  I set the DateTimeAxis.Maximum, then the DateTime axis is set well but the graph is not drawn.

If I remove the DateTimeAxis.Maximum, my graph gets rendered but the axis labels are not intact and the graph is beyond the width of the emulator.

PLease suggest a fix for this.

[Bharathiraja K]

Hi Faisal, 

 

Greetings from Syncfusion, Thanks for your code snippet, but we are not able to understand, what is the actual behavior you need, and not get the reason of setting datetimeAxis.Maximum at the time of Label created  

 

We have prepared the sample with your code snippet, please revert us by modifying the sample and provide us what issue you are facing and what is your expectation. Please provide any expected image that will help us to solve your issue earlier.  

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SimpleSample1039737342.zip  

 

Regards, 

Bharathi. 

[Moin Faisal]

Hi Bharati,

I have modified the sample code to reproduce the issue.

In the modified solution, 

Issues seen:

1. the x-axis does not show the labels 4Am, 8AM, Noon, 4PM and 8PM.

2. The graph has gone beyond the limits of the screen (atleast it appears so because the data beyond 3pm is not rendered within the window) 

Expected result: please see the below snapshot (the data should always span for the day between 12am to 11:59pm

Attachment: SimpleSampleModified_7e5c4327.zip

[Saravanan Madheswaran]

Hi Faisal, 

 

We have validated the given sample and we would like to let you know about the axis behavior, 

By default, the axis range will be calculated based on the given data collection. So, we suggest below 2 solution to achieve your requirement.  

 

Solution 1: Set Minimum and Maximum if you have only one day of data in collection.  

[C#] 

XAxis.Minimum = new DateTime(2019, 05, 12, 00, 00, 00); 

XAxis.Maximum = new DateTime(2019, 05, 12, 23, 59, 59); 

 

Solution 2: Set AutoScrollingDelta, 

This property used to ensure specified range of data always visible in chart, by default it shows recently added point, using ChartZoomPanBehavior you can scroll the chart to see previous points. 

[Xaml] 

 

<chart:DateTimeAxis EnableAutoIntervalOnZooming="False" x:Name="XAxis" Interval="4" IntervalType="Hours" AutoScrollingDelta="1" AutoScrollingDeltaType="Days" AutoScrollingMode="Start"  CrossesAt="0" LabelCreated="XAxis_LabelCreated"> 

. . . 

. . . 

</chart:DateTimeAxis> 

 

. . . 

 

. . . 

 

<chart:SfChart.ChartBehaviors> 

                        <chart:ChartZoomPanBehavior EnableDoubleTap="False" EnablePanning="True" EnableSelectionZooming="False"/> 

</chart:SfChart.ChartBehaviors> 

 

 

UG Link: https://help.syncfusion.com/xamarin-ios/sfchart/axis#auto-scrolling  

We have modified the sample that will be downloaded from below link and we hope the given information will be help full to achieve your requirement.  

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SimpleSample-1518828759.zip  

Output: 

 

 

Regards, 

Saravanan 

[Moin Faisal]

Thank you so much for the support. This works for me.

[Saravanan Madheswaran]

Hi Faisal,    

  

We are glad that the reported problem resolved at your end. Please let us know, if you have any other queries.  

  

Regards,  

Saravanan.