DateTimeRangeNavigator and SfChart bind via ViewModel

[Albert K]

How do I achieve the followings (all from ViewModel)

1) When RangeNavigator is range is changed, change the minimum and maximum range of the SFChart Line series.

2) The MarkerType ="Diamond" has no effect, there is no circle option. sfchart version 16.3.0.21

3) Is it possible to achieve coding the chart in viewmodel for Xamarin Forms as per the wpf example.

https://www.syncfusion.com/forums/136727/binde-entire-sfchart-to-viewmodel-not-just-series-collection

Thank you.

 <chart:LineSeries ItemsSource="{Binding DataModel}" XBindingPath="DataDateTime" YBindingPath="IntData">

                        <chart:LineSeries.DataMarker>

                            <chart:ChartDataMarker ShowMarker="True" MarkerType="" />

                        </chart:LineSeries.DataMarker>

   </chart:LineSeries>

[Lavanya Anaimuthu]

Hi Albert, 

 

Greetings from Syncfusion. 

 

Query 1:  When RangeNavigator range is changed, change the minimum and maximum range of the SFChart Line series.  

You can achieve this requirement by set range navigator ViewRangeStartDate and ViewRangeEndDate values to chart DateTimeAxis Minimum and Maximum properties respectively. We have added a getting started sample for your requirement and you can download the sample from the below link. 

 

https://help.syncfusion.com/xamarin/sfdatetimerangenavigator/rangenavigator#handle-range-selection 

 

Please refer below code snippet. 

[C#] rangeNavigator.RangeChanged += rangeNavigator_RangeChanged;  

private void rangeNavigator_RangeChanged(object sender, RangeChangedEventArgs e)  

{ 

        //Updating chart's date time range  

        dateTimeAxis.Minimum = e.ViewRangeStartDate;  

        dateTimeAxis.Maximum = e.ViewRangeEndDate;  

} 

 

 

Query 2: The MarkerType ="Diamond" has no effect, there is no circle option. sfchart version 16.3.0.21 

 

The ChartDataMarker type Diamond is working fine at our end.  

Screenshot: 

 

 

You can achieve your requirement by customize the Ellipse to Circle by set DataMarker Height and Width properties, setting same height and width to the Ellipse will result in a circle.   

 

Please refer below link to know about DataMarker Shapes.  

Ug link : https://help.syncfusion.com/xamarin/sfchart/datamarker#customizing-marker-shapes 

 

Query 3: Is it possible to achieve coding the chart in viewmodel for Xamarin Forms as per the wpf example. 

Yes, we can achieve this requirement by set the ViewModel Chart to Content of the ContentPage. Please refer below code snippet. 

Code snippet: 

<?xml version="1.0" encoding="utf-8" ?> 

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 

             xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms" 

             xmlns:local="clr-namespace:ChartGettingStarted"   

             x:Class="ChartGettingStarted.Sample" 

             Content="{Binding Chart}" 

             > 

 

    <ContentPage.BindingContext> 

        <local:ViewModel1></local:ViewModel1> 

    </ContentPage.BindingContext> 

 

    <!--<ContentPage.Content>         

        <ContentView Content ="{Binding Chart}"></ContentView>         

    </ContentPage.Content>--> 

  </ContentPage> 

  

And we have prepared a sample for your requirement and you can download the sample from the below link. 

 

Sample : http://www.syncfusion.com/downloads/support/directtrac/141397/ze/141397-912187155.zip  

 

Regards, 

Lavanya Anaimuthu. 

 

[Albert K]

Thank you for the reply and sample code.  Regarding Query 1.    The example you gave is based on "code behind" (filename.xaml.cs)  .  I am looking for a way to do it via the ViewModel code.  Is that possible?  

[Michael Prabhu M]

Hi Albert, 

Yes, we can achieve this requirement in the ViewModel code itself. Please find the attached sample for your reference. 

Sample: Sample 

Hope this helps 

Thanks, 

Michael