DateTimeRangeNavigator and SfChart bind via ViewModel

Albert K

Asked On December 10, 2018 08:25 AM UTC

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>

Reply | Reply with quote

Lavanya Anaimuthu [Syncfusion]

Replied On 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.

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>

</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.

Reply | Reply with quote

Albert K

Replied On 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?

Reply | Reply with quote

Michael Prabhu M [Syncfusion]

Replied On 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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
141397	Dec 10,2018 08:25 AM UTC	Dec 11,2018 11:53 AM UTC	Xamarin.Forms	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US