1. Home
  2. Forum
  3. Xamarin.Forms
  4. Setting Custom labels and interval on DateTime axis is not drawing the series

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

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.

5 Replies
BK Bharathiraja K Syncfusion Team May 22, 2019 11:52 AM UTC

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.  
 
 
Regards, 
Bharathi. 


MF Moin Faisal May 22, 2019 04:23 PM UTC

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

SM Saravanan Madheswaran Syncfusion Team May 23, 2019 09:03 AM UTC

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> 
 
 
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.  
Output: 
 
 
Regards, 
Saravanan 


MF Moin Faisal May 23, 2019 04:33 PM UTC

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

SM Saravanan Madheswaran Syncfusion Team May 24, 2019 08:32 AM UTC

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.  


Loader.
Up arrow icon