We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

DateTimeRangeNavigator and SfChart bind via ViewModel

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>

3 Replies

LA Lavanya Anaimuthu Syncfusion Team December 10, 2018 12:57 PM UTC

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. 
 
 
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" ?> 
             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. 
 
 
Regards, 
Lavanya Anaimuthu. 
 



AK Albert K December 11, 2018 02:38 AM UTC

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?  


MP Michael Prabhu M Syncfusion Team December 11, 2018 11:53 AM UTC

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  


Loader.
Live Chat Icon For mobile
Up arrow icon