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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Questions for Xamarin SfChart Trackball

Thread ID:

Created:

Updated:

Platform:

Replies:

149526 Nov 28,2019 10:17 PM UTC Dec 3,2019 09:21 AM UTC Xamarin.Android 5
loading
Tags: SfChart
khasan
Asked On November 28, 2019 10:17 PM UTC


Hi, I am using the Trackball feature of Xamarin.Android SfChart with StepLineSeries. I have some question regarding its behavior: 
1) Currently, it shows labels when trackball placed on datapoint, but can it show labels when it is not exactly on point(for a line as well) like in the screenshot(look to the blue line, trackball still shows label)
2) Currently, it shows labels for datapoint only. Can it show a label for xAxis value as well like in the screenshot

Regards
Khasan


Hemalatha Marikumar [Syncfusion]
Replied On November 29, 2019 12:28 PM UTC

Hi khasan,  
  
Greetings from Syncfusion.  
  
Query 1: It show labels when it is not exactly on point(for a line as well) like in the screenshot(look to the blue line, trackball still shows label).  
 
You can achieve this requirement by extending the ChartTrackballBehavior and adding the Trackball Labels in OnLabelsGenerated method as per in below code snippet.  
  
Code Snippet[C#]: 
  
CustomTrackballBehavior trackballBehavior = new CustomTrackballBehavior(this);  
            trackballBehavior.ActivationMode = ChartTrackballActivationMode.TouchMove;  
            trackballBehavior.MarkerStyle.ShowMarker = false;  
            chart.Behaviors.Add(trackballBehavior);  
  
public class CustomTrackballBehavior : ChartTrackballBehavior  
    {  
        …..  
  
        protected override void OnTouchUp(float valueX, float valueY) => _isActivated = false;  
  
        protected override View GetView(ChartSeries series, object data, int index)  
        {  
            LinearLayout rootLayout = new LinearLayout(context);  
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(120, 70);  
            rootLayout.Orientation = Orientation.Horizontal;  
            rootLayout.LayoutParameters = layoutParams;  
  
            TextView yLabel = new TextView(context);  
            yLabel.Gravity = GravityFlags.Center;  
            yLabel.Text = (data as ChartDataModel).YValue.ToString("C", new CultureInfo("en-GB"));  
            yLabel.SetTextColor(Color.White);  
            yLabel.TextSize = 15;  
  
            LinearLayout layout = new LinearLayout(context);  
            LinearLayout.LayoutParams linearlayoutParams = new LinearLayout.LayoutParams(150, 50);  
            layout.Orientation = Orientation.Vertical;  
            layout.LayoutParameters = linearlayoutParams;  
  
            layout.AddView(yLabel);  
            rootLayout.AddView(layout);  
  
            return rootLayout;  
        }  
  
        protected override void OnLabelsGenerated(List<ChartPointInfo> chartPointsInfo)  
        {  
            List<ChartPointInfo> NewchartPointInfos = chartPointsInfo;  
            ChartPointInfo chartPoint = chartPointsInfo[0];  
  
            if (chartPointsInfo.Count < Chart.Series.Count)  
              
            foreach (var series in Chart.Series)  
            {  
                foreach(var info in chartPointsInfo)  
                {  
                        if (info.Series != series && chartPointsInfo.Count < Chart.Series.Count)  
                        {  
                            ObservableCollection<ChartDataModel> data = ((series as ChartSeries).ItemsSource) as ObservableCollection<ChartDataModel>;  
                            int index = chartPoint.DataPointIndex > 0 ? chartPoint.DataPointIndex - 1 : chartPoint.DataPointIndex;  
                            ChartDataModel model = data[index];  
  
                            ChartPointInfo pointInfo = new ChartPointInfo();  
                            pointInfo.Label = model.YValue.ToString();  
                            double yposition = Chart.SecondaryAxis.ValueToPoint(model.YValue);  
                            SetInternalProperty(pointInfo.GetType(), pointInfo, "DataPointIndex", chartPoint.DataPointIndex);  
                            SetInternalProperty(pointInfo.GetType(), pointInfo, "XPosition", chartPoint.XPosition);  
                            SetInternalProperty(pointInfo.GetType(), pointInfo, "YPosition", yposition);  
                            SetInternalProperty(pointInfo.GetType(), pointInfo, "ChartDataPoint", model);  
                            SetInternalProperty(pointInfo.GetType(), pointInfo, "LabelStyle", chartPoint.LabelStyle);  
                            SetInternalProperty(pointInfo.GetType(), pointInfo, "Series", series);  
                            SetInternalProperty(pointInfo.GetType(), pointInfo, "Color", series.Color);  
                            SetInternalProperty(pointInfo.GetType(), pointInfo, "IsVisible", true);  
                            NewchartPointInfos.Add(pointInfo);  
                            break;  
                        }  
                    }  
            }  
  
            base.OnLabelsGenerated(NewchartPointInfos);  
        }  
  
        …….  
        }  
  
  
  
Query 2: Currently, it shows labels for datapoint only. Can it show a label for xAxis value as well like in the screenshot?  
 
You can achieve this requirement by setting True to ShowTrackballInfo which is available in ChartAxis as per in below code snippet 
  
Code Snippet[Xaml]:  
  
DateTimeAxis primaryAxis = new DateTimeAxis();  
primaryAxis.LabelStyle.LabelFormat = "MMM yyyy";  
primaryAxis.ShowTrackballInfo = true;  
primaryAxis.TrackballLabelStyle.LabelFormat = "MMM dd, yyyy";  
chart.PrimaryAxis = primaryAxis;  
  
  
  
And we have prepared a sample based on your requirement and you can download the sample from the below link.  
   
  
Please let us know if need any further assistance on this.  
 
Regards, 
Hemalatha M. 
 


khasan
Replied On November 29, 2019 03:01 PM UTC

Hi Hemalatha, Thanks for the sample project, this is what I needed. Only one thing - when I add the third axis the app crashes. I have attached the updated sample, can you please make it work? Note that my sample has three axis

Regards
Khasan

Attachment: ChartSample_230adb9f.rar

Hemalatha Marikumar [Syncfusion]
Replied On December 2, 2019 12:43 PM UTC

Hi khasan, 
  
Thanks for the update. 
 
We would like to let you know that this issue has been resolved by getting the datapoint using FindNearestChartPoint in CartesianSeries and add the ChartPointInfo to the ChartPointsInfo collection in OnLabelsGenerated method. 
  
And we have modified a sample based on your requirement and you can download the sample from the below link. 
  
  
Please let us know if need any further assistance. 
 
Regards, 
Hemalatha M. 


khasan
Replied On December 2, 2019 01:54 PM UTC

Hi Hemalatha, thanks that were exactly what I needed!

Regards
Khasan

Hemalatha Marikumar [Syncfusion]
Replied On December 3, 2019 09:21 AM UTC

Hi Khasan, 
 
Thanks for your update. 
 
We glad to hear that given solution works. 
 
Please let us know if you need any further assistance. 
 
Regards, 
Hemalatha M. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon