TrackBall issues

Question

Hi, I have some issues regarding the TrackBall. The attached sample can be used to verify the issues.

First issue:

I'm trying to create a customized trackball which is basically a combination of the trackball and crosshairs. It consists of:

-the little balls that hover over the datapoints

-vertical and horizontal lines (crosshairs)

-the original trackball label should be hidden, instead there is an "info box" in the left bottom of the chart with relevant information about the hovered datapoint. The way I've hidden the trackbar label is simply by setting the trackballTemplate visibility to collapsed.

Run the sample, check "Compare with D" and check "Custom Trackball". The trackball that appears is just the way I want it, except there is a short, black horizontal line that appears somewhere between the two balls. It is particularly visible as you move the mouse slowly across the chart. Now, change the label position to Inside. The line changes to white color with a black outline.

How can I remove this line? Is there a better, more efficient way (in terms of cpu cycles) to create this customized trackball setup?

Second issue:

This might be a bug with the trackball as the issue can be reproduced with a standard, unmodified trackball. Run the sample, change the series type to FastCandle, click Zoom 1 day, check Custom Trackball, then carefully move the mouse from left to right over the chart. When the date changes from 4/14/2000 12:27 to 12:28, an exception occurs. How can this be prevented?

Thank you.

Attachment: sfChartTrackballTest_375958b9.rar

Muneesh Kumar G · Answer

Hi Tom,

Please find the solution below.

Query

Solution

Run the sample, check "Compare with D" and check "Custom Trackball". The trackball that appears is just the way I want it, except there is a short, black horizontal line that appears somewhere between the two balls. It is particularly visible as you move the mouse slowly across the chart. Now, change the label position to Inside. The line changes to white color with a black outline.

How can I remove this line?

We have analyzed the sample and found that you have set empty template for trackball label template. So, we don’t need to set LabelDisplayMode property in trackball initialization. By removing this property, black horizontal line appears issue resolved.

Code Snippet

' Custom label is used for the trackball so the label features are not needed.

'TRACKBALL

'trackballBehavior.LabelDisplayMode = TrackballLabelDisplayMode.GroupAllPoints

trackballBehavior.LabelHorizontalAlignment = ChartAlignment.Far

trackballBehavior.ChartTrackBallStyle = TryCast(chart.Resources("trackballStyle"), Style)

trackballBehavior.ShowLine = False

AddHandler trackballBehavior.PositionChanged, AddressOf trackballBehavior_PositionChanged(Of PositionChangedEventArgs)

Is there a better, more efficient way (in terms of cpu cycles) to create this customized trackball setup?

We can give empty data template to label template to hide label.

Code Snippet

</DataTemplate>

Second issue:

This might be a bug with the trackball as the issue can be reproduced with a standard, unmodified trackball. Run the sample, change the series type to FastCandle, click Zoom 1 day, check Custom Trackball, then carefully move the mouse from left to right over the chart. When the date changes from 4/14/2000 12:27 to 12:28, an exception occurs. How can this be prevented?

We can reproduce the issue “Trackball movement exception thrown when using large data for financial series”. The fix will be available on our upcoming volume 2 release, which will be available in month of May 2018.

Please let us know if you have any queries.

Thanks,
Muneesh Kumar G.

Tom · Answer

Perfect, thank you Muneesh.

Muneesh Kumar G · Answer

Hi Tom, 
 
Thanks for the update. 
 
We are glad to know that the given solution works. Please let us know if you need any further assistance. 
 
Thanks, 
Muneesh Kumar G.

Vinod Pujari · Answer

Hi Team, Need this same for flutter

Hariharasudhan Kanagaraj · Answer

Hi Tom,We would like to inform you that the mentioned requirement can be achieved using the Trackball Behavior and Crosshair Behavior in SfCartesianChart. Here, the tooltip of the crosshair can be hidden by using the interactiveTooltip property in the respective axis. To hide the trackball tooltip, we have disabled it in the tooltipSettings property and rendered the marker while hovering over the data points using the markerVisibility property in TrackballMarkerSettings, as shown in the code snippet below. class _MyHomePageState extends State { late List _data; late TrackballBehavior _trackballBehavior; late CrosshairBehavior _crosshairBehavior; final ValueNotifier _trackballXValue = ValueNotifier(''); final ValueNotifier _trackballYValue = ValueNotifier(''); @override void initState() { _data = [ ChartSampleData(01, 20), ChartSampleData(02, 60), ChartSampleData(03, 20), ChartSampleData(04, 40), ChartSampleData(05, 30), ChartSampleData(06, 70), ChartSampleData(07, 90), ChartSampleData(08, 50), ChartSampleData(09, 100), ChartSampleData(10, 80), ]; _trackballBehavior = TrackballBehavior( enable: true, lineType: TrackballLineType.none, markerSettings: const TrackballMarkerSettings( markerVisibility: TrackballVisibilityMode.visible, ), tooltipSettings: const InteractiveTooltip( enable: false, ), ); _crosshairBehavior = CrosshairBehavior( enable: true, ); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( body: Stack( children: [ SfCartesianChart( onTrackballPositionChanging: (TrackballArgs trackballArgs) { _trackballXValue.value = _data[trackballArgs.chartPointInfo.dataPointIndex!] .x .toString(); _trackballYValue.value = _data[trackballArgs.chartPointInfo.dataPointIndex!] .y .toString(); }, primaryXAxis: NumericAxis( interactiveTooltip: const InteractiveTooltip(enable: false), ), primaryYAxis: NumericAxis( interactiveTooltip: const InteractiveTooltip(enable: false), ), series: >[ LineSeries( dataSource: _data, xValueMapper: (ChartSampleData sales, int index) => sales.x, yValueMapper: (ChartSampleData sales, int index) => sales.y, color: Colors.deepOrangeAccent, ), ], trackballBehavior: _trackballBehavior, crosshairBehavior: _crosshairBehavior, ), Padding( padding: const EdgeInsets.only( left: 41, bottom: 36, ), child: Align( alignment: Alignment.bottomLeft, child: ValueListenableBuilder( valueListenable: _trackballXValue, builder: (BuildContext context, String value, Widget? child) { return ValueListenableBuilder( valueListenable: _trackballYValue, builder: (context, value, child) { return Container( color: Colors.deepOrangeAccent.shade100.withOpacity(0.25), width: 120, height: 60, child: Column( mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ const Text( 'Data Points Info.', style: TextStyle( fontSize: 12, color: Colors.indigoAccent, fontWeight: FontWeight.bold, ), ), if (_trackballXValue.value.isNotEmpty) Text( 'x : ${_trackballXValue.value}', style: const TextStyle( fontWeight: FontWeight.w600, ), ), if (_trackballYValue.value.isNotEmpty) Text( 'y : ${_trackballYValue.value}', style: const TextStyle( fontWeight: FontWeight.w600, ), ), ], ), ); }, ); }, ), ), ), ], ), ); } } Also attached the sample and recording below and modify the sample based on your requirement. If you have further queries, please get back to us. Regards,Hari Hara Sudhan. K.Attachment: 137413_59285660.zip