Reduce number of Data Markers when zooming out

[Amplicade]

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]

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]

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]

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