Use of Date Time Range Navigator With multiple Charts

[Djamila Ritchie]

Hello,

I would like to use the control DateTimeRangeNavigator with multiple charts which contains themselves several series.

Is that possible?

I have 4 Charts showing data for the same period, one week worth. I would like to include the Range Navigator that can be applied to the 4 charts at once. 

Thank you very much for your help,

Djamila

 

[Michael Prabhu M]

Hi Djamila, 

 

We have prepared a sample based on your requirement and the sample can be downloaded from the below link. 

 

Sample: 138640
 

 

In this sample we have added 4 different charts and it is synchronized to update from one Rangenavigator you can find the screenshot of the sample below. 

 

Screenshot: 

 

 

Let us know if you require further assistance on this. 

 

Thanks, 

Michael 

[Djamila Ritchie]

Hello, 

Thank you for your help.

Unfortunately I cannot use your sample. My Charts are defined in a CarouselView and I am using a  DataTemplate.

So my controls are not available at Runtime in the the cs class.

I cannot access "dateTimeAxis" and "dateTimeAxis2" in the 'RangeChanged' call back.

Following in a snippet of my XAML code.

Djamila

           <cv:CarouselViewControl x:Name="carousel" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"

                                    ShowIndicators="False"              

                                    Position="{Binding Position, Mode=TwoWay}"

                                    ShowArrows="true"

                                    Orientation="Horizontal"

                                    IsSwipeEnabled="true">

                <cv:CarouselViewControl.ItemTemplate>

                        <DataTemplate>

                                                  ...

                                                 <chart:SfChart x:Name="sfchartStore" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"

                                                                          HeightRequest="300" Margin="0,0,0,0"  >

                                         <chart:SfChart.PrimaryAxis >

                                            <chart:DateTimeAxis x:Name="dateTimeAxis" ShowTrackballInfo="True" EdgeLabelsVisibilityMode="AlwaysVisible"                                                                                                                                                                           IntervalType="Auto">                                                                     

                                                <chart:DateTimeAxis.LabelStyle>

                                                    <chart:ChartAxisLabelStyle LabelFormat="dd/MM HH:mm"/>

                                                </chart:DateTimeAxis.LabelStyle>

                                                <chart:DateTimeAxis.TrackballLabelStyle>

                                                    <chart:ChartTrackballAxisLabelStyle   BackgroundColor="Black" LabelFormat="dd/MM/yy HH:mm"/>

                                                </chart:DateTimeAxis.TrackballLabelStyle>

                                                <chart:DateTimeAxis.Title>

                                                    <chart:ChartAxisTitle Text="Date"/>

                                                </chart:DateTimeAxis.Title>

                                            </chart:DateTimeAxis>

                                        </chart:SfChart.PrimaryAxis>

                                                  ...                     

                                        <chart:SfChart.Series>

                                            <chart:FastLineSeries x:Name="series5" ItemsSource="{Binding Data5}"  Color="LimeGreen" 

                               Label="StoreMean" EnableTooltip ="true"  ShowTrackballInfo="True" TooltipTemplate="{StaticResource stackTooltipTemplate}" >

                                            </chart:FastLineSeries>

                                            <chart:FastLineSeries x:Name="series1" ItemsSource="{Binding Data1}" Color="Blue" StrokeWidth ="3"

                               Label="CropMean" EnableTooltip ="true"  ShowTrackballInfo="True"  TooltipTemplate="{StaticResource stackTooltipTemplate}" >

                                            </chart:FastLineSeries>

                                            <chart:FastLineSeries x:Name="series6" ItemsSource="{Binding Data6}" Color="Black" 

                               Label="Ext" EnableTooltip ="true"  ShowTrackballInfo="true" TooltipTemplate="{StaticResource stackTooltipTemplate}" >

                                            </chart:FastLineSeries>

                                            <chart:FastLineSeries x:Name="series2" ItemsSource="{Binding Data2}" Color="#808080" 

                                                Label="Set" EnableTooltip ="true"  ShowTrackballInfo="True"  TooltipTemplate="{StaticResource stackTooltipTemplate}">

                                                <chart:FastLineSeries.YAxis>

                                                    <chart:NumericalAxis  ShowMajorGridLines = "false" 

                                          OpposedPosition="true"  Minimum="0" Maximum="30">

                                                        <chart:NumericalAxis.Title>

                                                            <chart:ChartAxisTitle Text ="Temp °C"/>

                                                        </chart:NumericalAxis.Title>

                                                    </chart:NumericalAxis>

                                                </chart:FastLineSeries.YAxis>

                                            </chart:FastLineSeries>

                                        </chart:SfChart.Series>

                                    </chart:SfChart>

  <chart:SfChart x:Name="sfchartCrop" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"

                                  HeightRequest="300" Margin="0,0,10,0" >         

                                      ...                         

                                        <chart:SfChart.PrimaryAxis >

                                            <chart:DateTimeAxis x:Name="dateTimeAxis2" PlotOffset="10" ShowTrackballInfo="True" EdgeLabelsVisibilityMode="AlwaysVisible"                                                                                           IntervalType="Days" Interval="1" >

                                                <chart:DateTimeAxis.LabelStyle>

                                                    <chart:ChartAxisLabelStyle LabelFormat="dd/MM HH:mm"/>

                                                </chart:DateTimeAxis.LabelStyle>

                                                <chart:DateTimeAxis.Title>

                                                    <chart:ChartAxisTitle Text="Date"/>

                                                </chart:DateTimeAxis.Title>

                                            </chart:DateTimeAxis>

                                        </chart:SfChart.PrimaryAxis>

                                   </chart:SfChart>

                                          ...

                <rangenavigator:SfDateTimeRangeNavigator x:Name="RangeNavigator" HeightRequest ="50" Margin="10,0,10,0" VerticalOptions="FillAndExpand"                                                                                                           HorizontalOptions="FillAndExpand"

                                                                                        EnableTooltip="False" Intervals="Year,Month,Day" RangeChanged="RangeNavigator_RangeChanged" >

                                 </DataTemplate>

                </cv:CarouselViewControl.ItemTemplate>

         </cv:CarouselViewControl>

[Michael Prabhu M]

Hi Djamila,  

 

We have analyzed your requirement and it can be achieved by updating SfChart’s Minimum and Maximum property defined in view model. We have bound the view model property to Minimum and Maximum in axis then updating the value in range navigator’s ActualRangeChanged event as like in below code snippet.  

 

Code snippet [XAML]: 

<chart:SfChart.PrimaryAxis> 

                <chart:DateTimeAxis x:Name="dateTimeAxis1" Minimum="{Binding Minimum}" 

                                        Maximum="{Binding Maximum}"> 

                        <chart:DateTimeAxis.LabelStyle> 

                            <chart:ChartAxisLabelStyle LabelFormat="MMM/dd/yyyy" /> 

                        </chart:DateTimeAxis.LabelStyle> 

                    </chart:DateTimeAxis> 

                </chart:SfChart.PrimaryAxis> 

 

Code snippet[C#]: 

 

void nac_RangeChanged(object sender, Syncfusion.RangeNavigator.XForms.RangeChangedEventArgs e) 

        { 

            ViewModel viewModel = (sender as SfDateTimeRangeNavigator).BindingContext as ViewModel; 

 

            if (viewModel != null) 

            { 

                viewModel.Minimum = e.ViewRangeStartDate; 

                viewModel.Maximum = e.ViewRangeEndDate; 

            } 

        } 

 

 

Code snippet [ViewModel.cs]: 

public class ViewModel :INotifyPropertyChanged 

    { 

        .. 

 

        private DateTime? minimum; 

 

        public DateTime? Minimum 

        { 

            get { return minimum; } 

            set { minimum = value;OnPropertyChanged("Minimum"); } 

        } 

 

        private DateTime? maximum; 

 

        public DateTime? Maximum 

        { 

            get { return maximum; } 

            set { maximum = value;OnPropertyChanged("Maximum"); } 

        } 

 

 

        public ViewModel() 

        { 

            Minimum = null; 

            Maximum = null; 

 

            .. 

        } 

        protected void OnPropertyChanged(string propertyName) 

        { 

            var handler = PropertyChanged; 

            if (handler != null) 

                handler(this, new PropertyChangedEventArgs(propertyName)); 

        } 

    } 

 

We have modified our sample based on this, please find the sample from the following location.  

 

Sample: 138640
 

Thanks, 

Michael