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

Questions for Xamarin SfChart Trackball


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


5 Replies

HM Hemalatha Marikumar Syncfusion Team 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. 
 



KH khasan 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


HM Hemalatha Marikumar Syncfusion Team 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. 



KH khasan December 2, 2019 01:54 PM UTC

Hi Hemalatha, thanks that were exactly what I needed!

Regards
Khasan


HM Hemalatha Marikumar Syncfusion Team 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. 


Loader.
Live Chat Icon For mobile
Up arrow icon