Multi line trackball information

[Sam]

I am trying to show multiline trackball text possibly easy line in different color, but can’t see any reference on how to do it. Please suggest a solution.

Thanks

S

[Divya Venkatesan]

Hi Sam,  

  

Thanks for contacting Syncfusion support. 

  

The behavior of trackball is to show the value of data point which is placed at same index in all the series. If the data point is not available at particular index in any series, the trackball label of that particular series will be ignored, and it will be shown only when you move the finger near to that data point. Could you please let us know whether your requirement is to show the trackball label for the nearest data point in all the series even if it is not placed exactly at the trackball line index?   

  

Multiple series trackball label:  

   

   

Regards,  

Divya Venkatesan  

 

 

 

[khasan]

Hi Divya Venkatesan, I need to show exactly what you asking from Sam(show label even it is not on datapoint). Can you please send me an example that shows the label even if trackball is not placed exactly at datapoint? Also, if you can create example please use StepLineSeries instead of LineSeries

Regards

Khasan

[Lavanya Anaimuthu]

Hi khasan, 

 

Greetings from Syncfusion. 

 

Query 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). 

You can achieve this requirement by extending the ChartTrackballBehavior and adding the Trackball Labels in OnLabelsGenerated method. Please refer 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.   Please refer 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 smaple 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. 

 

Thanks, 

Lavanya A.