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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Reduce number of Data Markers when zooming out

Thread ID:

Created:

Updated:

Platform:

Replies:

125684 Sep 2,2016 07:27 AM UTC Oct 6,2016 05:41 PM UTC Xamarin.Forms 3
loading
Tags: SfChart
Amplicade
Asked On September 2, 2016 07:27 AM UTC

Hi,

I'm using SfChart element in iOS and Android with Zooming enabled and also I'm displaying Data Markers.

When zooming out, my graph is showing a big number of Data Markers, which results in that the numbers of Data Markers can't be read anymore (since there are too many).

Is there any setting, where the number of Data Markers can be "aligned" with the zoom level, e.g. reduce the numbers shown when having a high/low zoom level?

Thanks for your support,
Tac 

Attachment: Screen_Shot_20160902_at_09.22.54.png_e321a471.zip

Karthikeyan V [Syncfusion]
Replied On September 6, 2016 12:30 PM UTC

Hi Tac,

Thanks for contacting Syncfusion support.

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

Thanks,
Karthikeyan V.

Attachment: Sample_ReduceDataMarker_f222ca89.zip

Amplicade
Replied On October 5, 2016 06:57 PM UTC

Hi,

thank you. I'm not sure I know how to use your code in my solution. 

Let me provide you some details on my solution:
  • I'm using XamarinForms Shared Code to create the SfChart
  • SfChart is created in XAML view like this
<ContentView x:Name="ChartContentView" >
 <ContentView.Content>
  <chart:SfChart x:Name="chart" BackgroundColor="Transparent" />
 </ContentView.Content>
</ContentView>

  • In code behind, SfChart is getting all required details
DateTimeAxis primaryAxis = new DateTimeAxis()
{
EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Shift,
RangePadding = DateTimeRangePadding.None,
LabelsIntersectAction = AxisLabelsIntersectAction.Hide,
EdgeLabelsVisibilityMode = EdgeLabelsVisibilityMode.Default,
};
primaryAxis.EnableAutoIntervalOnZooming = true;
chart.PrimaryAxis = primaryAxis;

NumericalAxis numericalAxis = new NumericalAxis()
{
Minimum = ViewModel.MinBmi,
Maximum = ViewModel.MaxBmi,
Interval = 5,
//RangePadding = NumericalPadding.Additional,
};
chart.SecondaryAxis = numericalAxis;

ChartZoomPanBehavior zoomPanBehavior = new ChartZoomPanBehavior();
zoomPanBehavior.EnablePanning = true;
zoomPanBehavior.EnableZooming = true;
zoomPanBehavior.EnableSelectionZooming = true;
zoomPanBehavior.EnableDoubleTap = true;
chart.ChartBehaviors.Add(zoomPanBehavior);

LineSeries lineDataBmi = new LineSeries()
{
ItemsSource = ViewModel.LineDataBmi,
XBindingPath = "Day",
YBindingPath = "Value",
StrokeWidth = 3,
Label = "Title",
};


Would it be possible to explain to me, how I can use your sample? I'm not using a nativeView and I don't know where to put the following method to?
public override NSString GetFormattedDataMarkerLabel(SFChart chart, NSString label, nint index, SFSeries series)

Please let me know if you need more details from my side that I can provide you.

Thanks,
Tac

Jaikrishna Chandrasekar [Syncfusion]
Replied On October 6, 2016 05:41 PM UTC

Hi Tac,
 
 In the AppDelegate class of the iOS Platform specific project file, you can include the below code in the FinishedLaunching method to get the native view
 
Xamarin.Forms.Forms.ViewInitialized += (object sender, Xamarin.Forms.ViewInitializedEventArgs e) =>
{
   if (e.NativeView is SFChart)
   {
      SFChart nativeChart = (e.NativeView as SFChart);
      SfChart formsChart = e.View as SfChart;
      nativeChart.Delegate = new CustomChartDelegate();
   }
};
 
Create the class for CustomChartDelegate and include the below code for the dataMarker customization and check the sample
 
public override NSString GetFormattedDataMarkerLabel(SFChart chart, NSString label, nint index, SFSeries series)
{
  if (series is SFXyDataSeries)
   {
    if (!(chart.SecondaryAxis.ZoomFactor < 1) || !(chart.PrimaryAxis.ZoomFactor < 1))
     {
        if ((int)index % 4 == 0)
         {
              return label;
         }
         else
         {
              return new NSString("");
         }
      }
    }
      
return label;
 }
 
 
 
Note : If the provided solution does not meet your requirement, Please give more information which will be helpful for us to serve you better.
 
Regards,
Jaikrishna C


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;