1. Home
  2. Forum
  3. Flutter
  4. Synchronized charts

Synchronized charts

Is it possible to have two charts (one above the other) where the trackball of both are synchronized. So when I move the trackball on one of the charts, it also moves by the same amount on the other chart and vice versa.


Thanks in advance,


Luca

2 Replies
SK Sriram Kiran Senthilkumar Syncfusion Team May 19, 2020 03:09 PM UTC

Hi Luca, 
  
Greetings from Syncfusion. We have analyzed your scenario and as of now, we do not have support for implementing synchronized trackball due to lack of touch interaction events in the chart. We have considered this as a feature to provide touch interaction events on pointer touch down and pointer touch move and created feedback in the feedback portal. We will include this feature in the Vol2 Main Release 2020 which is expected to be rolled out at the end of June 2020. 
You can track the status of the feedback below. 
  
Thanks, 
Sriram Kiran. 


SK Sriram Kiran Senthilkumar Syncfusion Team July 8, 2020 05:41 PM UTC

Hi Luca, 
  
Thanks for your patience. The promised feature regarding the adding of touch interaction events on pointer touch down and pointer touch move is implemented and rolled out in our Vol 2 Main release. To use these events, kindly upgrade the chart widget package to the latest version below. 
  
And we have also created a simple sample in which we have implemented the synchronized trackball between two charts with the help of the onChartTouchInteractionMove event available in the chart. Please check the code snippet below for reference. 
  
// Declared the first and second chart’s trackball behavior globally for synchronization purposes. 
TrackballBehavior trackBall1 = 
    TrackballBehavior(enable: true, activationMode: ActivationMode.singleTap); 
TrackballBehavior trackBall2 = 
    TrackballBehavior(enable: true, activationMode: ActivationMode.singleTap); 
 
// State full class for first chart. 
class FirstChart extends StatefulWidget { 
  @override 
  State<StatefulWidget> createState() { 
    return FirstChartState(); 
  } 
} 
 
class FirstChartState extends State<FirstChart> { 
  @override 
  Widget build(BuildContext context) { 
    return SfCartesianChart( 
        // OnTouchInteraction Move event for first chart 
        onChartTouchInteractionMove: (ChartTouchInteractionArgs args) { 
         //Called the second chart’s trackball public method to show the trackball by passing the touch move 
         // pixel positions as arguments for synchronization of trackball in the charts. 
          trackBall2.show(args.position.dx, args.position.dy, 'pixel'); 
        }, 
        title: ChartTitle(text: 'Chart 1'), 
        trackballBehavior: trackBall1, // First chart’s trackball variable 
        series: <LineSeries<SalesData, String>>[ 
          LineSeries<SalesData, String>( 
              dataSource: chartData, 
              xValueMapper: (SalesData sales, _) => sales.year, 
              yValueMapper: (SalesData sales, _) => sales.sales 
              // your configurations 
          ) 
        ]); 
  } 
} 
 
// Statefull class for second chart 
class SecondChart extends StatefulWidget { 
  @override 
  State<StatefulWidget> createState() { 
    return SecondChartState(); 
  } 
} 
 
// 
class SecondChartState extends State<SecondChart> { 
  @override 
  Widget build(BuildContext context) { 
    return SfCartesianChart( 
        // OnTouchInteraction Move event for second chart 
        onChartTouchInteractionMove: (ChartTouchInteractionArgs args) { 
          //Called the first chart’s trackball public method to show the trackball by passing the touch move pixel 
         // positions as arguments for synchronization on trackball in the charts. 
         trackBall1.show(args.position.dx, args.position.dy, 'pixel'); 
        }, 
        title: ChartTitle(text: 'Chart 2'), 
        trackballBehavior: trackBall2, // Second chart’s global trackball variable 
        series: <LineSeries<SalesData, String>>[ 
          LineSeries<SalesData, String>( 
              dataSource: chartData, 
              xValueMapper: (SalesData sales, _) => sales.year, 
              yValueMapper: (SalesData sales, _) => sales.sales 
              // your configurations 
          ) 
        ]); 
  } 
} 
 
  
The sample for reference can be found below. 
  
Please get in touch with us if you require further assistance. 
  
Regards, 
Sriram Kiran. 


Loader.
Up arrow icon