1. Home
  2. Forum
  3. Flutter
  4. Selection Zoom

Selection Zoom

Zooming and Panning in Flutter Cartesian Charts widget | Syncfusion

I followed the example but just couldn't get selection zoom to work on Flutter desktop.

Any thing I did wrongly for desktop?

_zoomPanBehavior = ZoomPanBehavior(
enableSelectionZooming: true,
selectionRectBorderColor: Colors.red,
selectionRectBorderWidth: 1,
selectionRectColor: Colors.grey);


I set my SfCartesianChart zoomPanBahavior to the above.

Also, once set, I can't change the zoomPanBahavior to another as it complained that this is 'final'

HELP!!


14 Replies
DP Dharanitharan Palanisamy Syncfusion Team July 19, 2021 12:49 PM UTC

Hi Peter, 
 
Greetings from Syncfusion. We have analyzed your query unfortunately we are unable to reproduce the reported issue. Selection zooming is works fine at our end without any issue in windows. We have attached the sample and screen record for your reference. We would also like to tell you how to do selection zooming. It can be done by long-click using mouse and then drag the mouse to the required portion will select the dragged region and it got zoomed.  
 
 
 
If you still have concerns, please share more details with the issue replicated sample will help us to provide the solution to you sooner.  

Thanks, 
Dharanitharan. P 


PE Peter July 19, 2021 01:42 PM UTC

I am using FutureBuilder like this:

FutureBuilder<List<ChartSeries>>(
future: _loadChartDataFunction,
builder: (BuildContext context, AsyncSnapshot snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return SpinKitHourGlass(
color: drawerIconColour,
);

default:
if (snapshot.hasError)
return Text('Error: ${snapshot.error}');
else
print("snapshot.data called");
if (snapshot.data != null) {
List<ChartSeries> myChartSeries = snapshot.data;
_SfCartesianChart = SfCartesianChart(
primaryXAxis: DateTimeAxis(
autoScrollingDelta: _scrollingDelta,
autoScrollingMode: AutoScrollingMode.start,
autoScrollingDeltaType: DateTimeIntervalType.minutes,
labelIntersectAction: AxisLabelIntersectAction.multipleRows,
enableAutoIntervalOnZooming: true,
majorTickLines: MajorTickLines(size: 6, width: 2, color: Colors.red),
interactiveTooltip: InteractiveTooltip(
enable: true,
borderColor: Colors.red,
borderWidth: 2,
),
plotBands: _plotBands,
),
primaryYAxis: NumericAxis(
anchorRangeToVisiblePoints: false,
majorGridLines: MajorGridLines(
width: 0.5, color: colorChart, dashArray: <double>[5, 5]),
isVisible: true,
title: AxisTitle(
text: 'Diff Pressure (${measurementUnit[1]})',
textStyle: TextStyle(
color: colorChart,
//fontFamily: 'Roboto',
fontSize: 16,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.w300)),
axisLine: AxisLine(
color: colorChart,
width: 2,
)),
title: ChartTitle(
text: chartTitle,
textStyle: TextStyle(
color: colorChart,
//fontFamily: 'Roboto',
fontSize: 22,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold)),
legend: Legend(
isVisible: true,
title: LegendTitle(text: "Channels"),
// Border color and border width of legend
borderColor: colorChart,
borderWidth: 2,
toggleSeriesVisibility: true,
),
zoomPanBehavior: _zoomPanBehavior,
trackballBehavior: _trackballBehavior,
enableAxisAnimation: true,
// Enable tooltip
tooltipBehavior: TooltipBehavior(enable: false),

annotations: _chartAnnotations,

series: myChartSeries,
onChartTouchInteractionDown: (ChartTouchInteractionArgs args) {
switch (_currentChartSelectionMode) {
case ChartSelectionMode.box:
print(args.position.dx.toString());
break;
default:
break;
}
},
);




PE Peter July 19, 2021 01:43 PM UTC

And displaying the Chart.

I can see the chart. It is just the box selection not working. Thanks


DP Dharanitharan Palanisamy Syncfusion Team July 20, 2021 02:48 PM UTC

Hi Peter, 
 
We examined your provided code and attempted to reproduce the stated issue on our end but were unable to do so. As a child of the future builder, we rendered the chart in the same way as the given code, and selection zooming works fine in Windows. For your convenience, we have attached a sample and a screen record; please duplicate the reported issue in this sample and this will help us to analyze and your situation and provide the solution to you sooner. 
 
Screen record: 
 
Thanks, 
Dharanitharan. P 


PE Peter July 21, 2021 04:59 AM UTC

Hi

I downloaded the sample below:

https://www.syncfusion.com/downloads/support/forum/167386/ze/F167386_selection_zooming_future_builder839343221 


Run it on the sim but couldn't get Selection Zoom to work either.

What am I missing here?




Attachment: selection_zoom.mp4_ce402f95.zip

PE Peter July 22, 2021 09:01 AM UTC

Is the Selection Zoom using the Longpress or LongPressDraggable?

Can we change this? I am not sure what is going on..

HELP!


DP Dharanitharan Palanisamy Syncfusion Team July 22, 2021 09:35 AM UTC

Hi Peter, 
 
We have analyzed your queries and came up with the following responses.  
 
Query #1 
I downloaded the sample below: Run it on the sim but couldn't get Selection Zoom to work either. 
 
We discovered that you have downloaded the second sample and have attached the screen recording of the first sample that we previously provided to you. We can tell from your screen recording that you are using a single mouse click and pinch zooming in the simulator. Only long press and drag in mouse click can do selection zooming. We would also want to note out that while you originally reported the issue on the Windows platform, but the android emulator is shown in the attached video. As a result, we are unaware of your specific situation. We tested selection zooming in both Android and Windows platforms and found it to be working as per expected behavior. Now, for your convenience, I have attached a screen record of the simulator for both samples. 

Screen records 


Query #2 
Is the Selection Zoom using the Longpress or LongPressDraggable? Can we change this? 
 
Yes, selection zooming is only possible with long presses and draggable selections. We would like to note out that in prior updates, we described how to zoom in on a selection.  

In Desktop or Simulator – Use the mouse and long press and drag for selection zooming 
Android, IOS or any real device – long press and drag for selection zooming 

This is the chart's default behavior, and we would like to point out that there are no options to change the gesture modes for this. 

If you continue to have problems, please contact us with more information. This will allow us to better examine your situation and provide you with a solution sooner. 
 
Thanks, 
Dharanitharan. P 


PE Peter July 23, 2021 07:01 AM UTC

So far, I am able to use RangController to change the X axis and use MouseWheel to zoom.
However, when I click on the Chart, it resets everything to default view even when I am zoomed in or panned to the side.

Why is this so?


PE Peter July 23, 2021 07:03 AM UTC

Also, what are the things that can block 'Selection Zooming'?


ST Steven Tillson July 24, 2021 12:35 PM UTC

It can block Selection Zooming in your system.

 series: myChartSeries,

                                        onChartTouchInteractionDown: (ChartTouchInteractionArgs args) {

                                          switch (_currentChartSelectionMode) {

                                            case ChartSelectionMode.box:

                                              print(args.position.dx.toString());


This code seems wotking fine for me.


PE Peter July 26, 2021 06:55 AM UTC

I commented out onChartTouchInteractionDown but still cannot get selection zoom working.

I can use wheelzoom to zoom y-axis and also pan.

But I cannot pan x-axis. Every time i click on the chart, it resets back to full chart (full data range)


Any clue what I may be doing wrong here?

Desperately need help,

Many thanks!


DP Dharanitharan Palanisamy Syncfusion Team July 26, 2021 12:53 PM UTC

Hi Peter, 
 
We have analyzed your queries and came up with the following responses. 
 
Query #1 So far, I am able to use RangController to change the X axis and use MouseWheel to zoom.
However, when I click on the Chart, it resets everything to default view even when I am zoomed in or panned to the side. 
 
We reviewed this case and found that the issue is only replicated when using mouse wheel zooming; we apologize for this and we will investigate the situation and include a fix in the next weekly patch release. Until then, we appreciate your patience. 

Query #2 Also, what are the things that can block 'Selection Zooming’? 
 
We are unable to comprehend your query, therefore, please provide additional information. We would also like to point out that in previous updates, we provided a sample with selection zooming; please replicate the issue using those samples to help us analyze and provide a solution to you more quickly. 

Thanks, 
Dharanitharan. P  


PE Peter July 27, 2021 08:14 AM UTC

Thanks for the answers.

Up till now, many things are working and the only thing that is not working for me is Selection Zoom.

I disabled MouseWheelZoom but Selection Zoom still not working.


Here are some check points:


  1. Does Selection Zoom work together with RangeController?
  2. Does Selection Zoom work together with visibleMinimum and visibleMaximum?
  3. Does Selection Zoom work together zoomFactor and zoomPosition?



Hope to hear from you soon. Thank you. 


SK Sriram Kiran Senthilkumar Syncfusion Team July 28, 2021 12:26 PM UTC

Hi Peter, 
  
We have analyzed your scenario regarding the selection zooming still not working even when mouseWheelZoom is disabled and unfortunately, we are unable to reproduce the reported issue at our end. So, we kindly request you to share us with more information in detail on the reported scenario so that it will be helpful in providing the solutions sooner. 
  
We have also created and attached the samples for the mentioned scenarios. So please check the samples and let us know if you have further concerns. 
  
  
  
Regards, 
Sriram Kiran 


Loader.
Up arrow icon