Questions for Xamarin SfChart Trackball

[khasan]

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]

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.  

   

Sample: https://www.syncfusion.com/downloads/support/forum/149526/ze/149526-1097709354.zip   

  

Please let us know if need any further assistance on this.  

 

Regards, 

Hemalatha M. 

 

[khasan]

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]

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. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/149526/ze/149526_StepLine-54729951.zip 

  

Please let us know if need any further assistance. 

 

Regards, 

Hemalatha M. 

[khasan]

Hi Hemalatha, thanks that were exactly what I needed!

Regards

Khasan

[Hemalatha Marikumar]

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.