Selection zooming not working and Pinch Zoom only zoom in vertically

[Peter]

Hi

I am using SfCartesianChart and FastLineSeries with the following details:

_rangeDateMin = _dateMin; // = _dateMinStatic;

_rangeDateMax = _dateMax; // = _dateMaxStatic;

_dateValues = SfRangeValues(_dateMin, _dateMax);

_rangeController = RangeController(start: _dateValues.start, end: _dateValues.end);

int _scrollingDelta = 5;

late double _zoomFactor = 1.0;

late double _zoomPostion = 1.0;

late DateTimeAxis _chartDateTimeAxis = setChartDateTimeAxis(

myVisibleMin: _dateMin,

myVisibleMax: _dateMax,

myMinStatic: _dateMin,

myMaxStatic: _dateMax,

scrollingDelta: _scrollingDelta,

rangeController: _rangeController,

plotBands: _plotBands,

zoomFactor: _zoomFactor,

zoomPostion: _zoomPostion,

);

late ZoomPanBehavior _zoomPanBehavior = getZoomPanBehavior(

enablePanning: false,

enableSelectionZoom: true,

enableMouseWheelZoom: false,

);

late TrackballBehavior _trackballBehavior = getTrackBallBehavior(

enable: (_isTrackBalltipSettings && _myChartSeries.length != 0),

measurementUnit: measurementUnitAbbrev[_selectedMeasurementUnitIndex].toString(),

zoomFactor: _zoomFactor,

);

ChartSelectionMode _currentChartSelectionMode = ChartSelectionMode.box;

_chartDateTimeAxis = setChartDateTimeAxis(

myVisibleMin: _dateMin, //_dateMinStatic,

myVisibleMax: _dateMax, //_dateMaxStatic,

myMinStatic: _dateMin, //_dateMinStatic,

myMaxStatic: _dateMax, //_dateMaxStatic,

scrollingDelta: _scrollingDelta,

rangeController: _rangeController,

plotBands: _plotBands,

zoomFactor: _zoomFactor,

zoomPostion: _zoomPostion,

);

SfCartesianChart mySfCartesianChart = buildChart(

myChartTitle:

myProject.value.projectId.toString() == "" ? "Empty" : myProject.value.projectName.toString(),

myYAxisTitle: 'Diff Pressure (${measurementUnitList[_selectedMeasurementUnitIndex].toString()})',

myPrimaryXAxis: _chartDateTimeAxis,

myListChartSeries: _myChartSeries,

myListChartAnnotation: _chartAnnotations,

myListPlotBand: _plotBands,

mySeriesColors: seriesColors,

myZoomPanBehavior: _zoomPanBehavior,

myTrackballBehavior: _trackballBehavior,

myDateMin: _dateMin,

myDateMax: _dateMax,

myRangeDateMin: _rangeDateMin,

myRangeDateMax: _rangeDateMax,

myRangeController: _rangeController,

myZoomFactor: 1.0,

myZoomPosition: 1.0,

myCrosshairBehavior: _crosshairBehavior,

myFunctionOnZoomEnd: (ZoomPanArgs args) {

print(args.currentZoomFactor);

print(args.currentZoomPosition);

_zoomFactor = args.currentZoomFactor;

_zoomPostion = args.currentZoomPosition;

},

myFunctionOnActualRangeChanged: (ActualRangeChangedArgs args) {

// Do nothing?

},

);

There are no errors. The above is just a snippet . I am facing the following issues:

1. The memory usage becomes very high with just an average number of data points
2. I can't get Selection Zoom to work at all. Can't draw a box and zoom in with the mouse cursor
3. When I use Pinch Zoom, only the Y axis is zoomed. X Axis remains the same.
   
   

Hope someone can help me! Thank you! 

[Lokesh Palani]

Hi Peter,

Query 1: The memory usage becomes very high with just an average number of data points

The following are the key points that can be used to boost the performance of the chart when there is a need to plot high volume data.

• Load and store the required data points in the initState method itself, and then set the data points to the chart series.

• Use NumericAxis or DateTimeAxis instead of CategoryAxis.

• When there are large number of points to load in line series, you can use FastLineSeries series instead of LineSeries.

• Instead of enabling data markers and labels when there are large number of data points, you can use Trackball to view the point information.

• Set series animationDuration as 0 to disable the animation while loading large number of data points.

• Use updateDataSource method while updating dynamic data points instead of calling setState. For more details refer ug -  https://help.syncfusion.com/flutter/cartesian-charts/methods#updatedatasource.

• Use On-demand loading while rendering large data points, it can be used to load more data to the chart when the visible range reaches the end on dragging in the chart.  https://help.syncfusion.com/flutter/cartesian-charts/on-demand-loading

Query 2: I can't get Selection Zoom to work at all. Can't draw a box and zoom in with the mouse cursor

When using enableSelectionZooming and enablePanning, priority is given to enablePanning. You can use enableSelectionZooming after panning in the chart. This will help you draw a box and zoom in with the mouse cursor.

Query 3:  When I use Pinch Zoom, only the Y axis is zoomed. X Axis remains the same.

We have validated your query and checked in the mobile device using the enablePinching property. It was working correctly on our end. By default, the zoomMode in ZoomPanBehavior is set to both the x and y axis. Therefore, we kindly request that you share more information with us along with screen recordings so that we can better assist you.

Regards,

Lokesh.

[Peter]

Hi

Thanks for the response.

Q1: I am still exploring the following:

• Load and store the required data points in the initState method itself, and then set the data points to the chart series

• Use updateDataSource method while updating dynamic data points instead of calling setState. For more details refer ug -  https://help.syncfusion.com/flutter/cartesian-charts/methods#updatedatasource.

• Use On-demand loading while rendering large data points, it can be used to load more data to the chart when the visible range reaches the end on dragging in the chart.  https://help.syncfusion.com/flutter/cartesian-charts/on-demand-loading

The rest I already implemented.

 

Q2: Even I enableSelectionZooming and disable enablePanning, I still cannot draw a box and zoom with mouse cursor. I do notice every time I click on the chart, my 

I encountered a different problem now. The bottom DateTime X-axis is incorrect when I zoom.

Please see the below attached video for the demo.

When Zoomed out to see the whole chart, it is ok. But when zoomed and clicked, the x-axis revert to zoomed out labels,

Attachment: vt_zoom_xaxis.mov_45a07fb1.zip

[Lokesh Palani]

Hi Peter,

We have analyzed your query and checked the attached video. We have also checked the reported issue when the enableSelectionZooming is set to true and the enablePanning is set to false. It was working fine on our end. Unfortunately, we were not able to reproduce the reported issue. Therefore, we kindly request you to try to replicate the reported issue in the attached test sample below and revert to us so that we can assist you better.

Regards,

Lokesh.

Attachment: chart_182800_671626ab.zip

[Peter]

Hi Lokesh

The video showed a different issue.

It is regarding the bottom datetime axis.

When zoomed out, it is accurate. When zoom in and you click the chart, it becomes the same as zoomed out values. What creates this weird behavior?

[Lokesh Palani]

Hi Peter,

We have checked the attached video. Please confirm whether you are using DateTimeAxis or DateTimeCategoryAxis. We have also analyzed the code snippet where you customized the Axis. Please share the code for the customized Axis. We have attached a test sample related to your issue. Have you checked the reported issue in that sample?  Please check and  let us know if you require any further assistance.

Regards,

Lokesh.

[Peter]

DateTimeAxis

axes: <ChartAxis>[

// NumericAxis DateTimeAxis

DateTimeAxis(

name: 'yAxisZero',

plotOffset: 0,

autoScrollingDeltaType: DateTimeIntervalType.hours,

interval: 10,

crossesAt: 0,

minimum: myDateMin,

maximum: myDateMax,

visibleMinimum: myRangeDateMin,

visibleMaximum: myRangeDateMax,

zoomFactor: myZoomFactor,

zoomPosition: //_zoomPostion,

(myZoomPosition < 0)

? 0

: (myZoomPosition > 1)

? 1

: myZoomPosition,

rangeController: myRangeController,

axisLine: AxisLine(

color: colorChart,

dashArray: [5, 5],

width: 3,

)

),

],

DateTimeAxis _chartDateTimeAxis = DateTimeAxis(

name: "primaryXAxis",

autoScrollingMode: AutoScrollingMode.end,

interactiveTooltip: InteractiveTooltip(enable: interactiveTooltipEnable),

plotOffset: 0,

visibleMinimum: myVisibleMin,

visibleMaximum: myVisibleMax,

majorTickLines: MajorTickLines(size: 3, width: 2, color: Colors.red),

rangeController: rangeController,

minimum: myMinStatic,

maximum: myMaxStatic,

plotBands: plotBands,

isVisible: true,

zoomFactor: zoomFactor,

zoomPosition: zoomPosition,

);

DateTimeCategoryAxis

I can't find any reference to DateTimeCategoryAxis

[Lokesh Palani]

Hi Peter,

We have attempted to reproduce the reported issue but have been unsuccessful. We are unable to proceed without additional information, and therefore cannot find a feasible solution. We kindly request that you reproduce the issue in the attached test sample so that we may better assist you.

Regards,

Lokesh.

Attachment: chart_182800_testedsample_9ed99de2.zip