lazy loading issue on DateTimeAxis

[Zhu]

Hi,

I was trying to add lazy loading to my project, following your article of How to lazily load more data to the chart (SfCartesianChart) ?

I'm using DateTimeAxis (instead of NumericAxis in the acticle) as primaryXAxis, so I changed oldAxisVisibleMin and oldAxisVisibleMax from double? to DateTime?

Though, when I run it, it always complain as below:

Exception has occurred.

_CastError (type 'int' is not a subtype of type 'DateTime' in type cast)

at this line: oldAxisVisibleMin = args.visibleMin as DateTime;

I tried to add "as DateTime" to the end of it, can't solve.

Any ideas?

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Zhu,

In the onActualRangeChanged callback, the visibleMin and visibleMax values are in milliseconds, and it's type of integer. Therefore you need to declare the oldAxisVisibleMin and oldAxisVisibleMax fields as integers alone and no need to convert the argument value to DateTime since the argument value is an integer. We have prepared the sample and provided it below for your reference.

Regards,

Yuvaraj.

Attachment: f180661_2a8611c7.zip

[Zhu]

Hi， Yuvaraj，

I tried to use 'int' or 'num', both works, no such exception now.

Now, I can update data, but can't show the new data in the chart, have to refresh the chart by switch to home then switch back to my app.

Seems it don't support Pinching? do pinching would triger it too.

Any ideas ?

Regards,

Zhu

[Yuvaraj Gajaraj]

Hi Zhu,

Query #1: Now, I can update data, but can't show the new data in the chart, have to refresh the chart by switch to home then switch back to my app.

To refresh the data in a view, swipe right to left after the circular progress bar animation is complete. The new data will then come into view, and there will be no need to switch pages to refresh the data. Please refer to the sample shared below for more information.

 

Query #2: Seems it don't support Pinching? do pinching would triger it too

Pinching will not trigger lazy loading. The lazy loading workaround is implemented with the help of the loadMoreIndicatorBuilder callback and you can get the swipe direction in this callback and update the data based on the direction of the swipe.

If you have any further queries please get back to us.

Regards,

Yuvaraj. 

Attachment: f180661_3d32c37c.zip

[Zhu]

Hi， Yuvaraj，

About Query #1:

Something different: in my app, SfCartesianChart is wrapped in a FutureBuilder, as you recommended, remember?

I guess it have conflict with the Future<void>.delayed in _updateView(),  any idea on this?

About Query #2:

You are right, probably because of 2 fingers does not touch the screen in same time when doing pinch.

Regards,

Zhu

[Yuvaraj Gajaraj]

Hi Zhu,

In the shared sample also, we have used the Future<void>.delayed method to update the data in the chart, and we are not aware of your requirement. So, we request you to share more information on your requirement in detail along with screenshots or screen recordings. Also please try to reproduce the reported issue in the previously attached sample, so that it will help us assist you in a better way.

Regards,

Yuvaraj.

[Zhu]

Hi， Yuvaraj，

Attached is the test app and files should be put in phone.

Regards,

Zhu

[Zhu]

Retry for sending files.

Attachment: test1lazy_c4acff7b.zip

[Zhu]

Sending another file.

Attachment: phone_files_215c69cf.zip

[Yuvaraj Gajaraj]

Hi Zhu,

We have checked the shared sample and we couldn't able run the sample due to the invalid data points in the shared files. We kindly request you provide proper data points to reproduce an issue along with screenshots or screen recordings so that it will help us assist you in a better way.

Regards,

Yuvaraj.

[Zhu]

Hi, Yuvaraj,

The phone data files looks good to me.

Note: need to extract them to /data/user/0/com.example.test1/files/ to run the app.

Attached are 2 pictures showing how it looks like when running.

Regards,

Zhu

Attachment: pics_2b7f797f.zip

[Yuvaraj Gajaraj]

Hi Zhu,

In the latest version of Android, it's not possible to access the application folder using the file explorer. Therefore, we loaded the file using assets and attempted to reproduce the issue. However, we were unable to reproduce the issue and found that the chart always rendered with y-values of 0. So, we kindly request you to share a sample in a runnable state, which is more helpful to us to assist you in a better way. We have also shared the sample below for your reference.

Screenshot:

Regards,

Yuvaraj.

Attachment: f180661_6b628565.zip

[Zhu]

Hi, Yuvaraj,

I checked the file you prvided, turns out it's not an issue of data files, but a tiny error in the code.

I'd fixed it, please see attachment.

Regards,

Zhu

Attachment: test1lazy_1_fb8a558a.zip

[Yuvaraj Gajaraj]

Hi Zhu,

We have checked the shared sample and found that after the initial rendering, you have added and updated the same x value, so that is a reason for the chart looks not being updated. We have modified your sample and added a data with new x value each time and added a separate controller for each series then only it gets updated. We have shared the sample below for your reference, you can modify it as per your requirement.

Code snippet:

// Initialize the ChartSeries controller

late ChartSeriesController seriesController1;

late ChartSeriesController seriesController2;

late ChartSeriesController seriesController3;

late ChartSeriesController seriesController4;

LineSeries<PMData, DateTime>(

onRendererCreated: (controller) {

seriesController1 = controller;

},

),

LineSeries<PMData, DateTime>(

onRendererCreated: (controller) {

seriesController2 = controller;

},

),

LineSeries<PMData, DateTime>(

onRendererCreated: (controller) {

seriesController3 = controller;

},

),

LineSeries<PMData, DateTime>(

onRendererCreated: (controller) {

seriesController4 = controller;

},

)

void _updateData() async {

await ppData(1);

isLoadMoreView = true;

seriesController1.updateDataSource(

addedDataIndexes: getIndexes(dataLength));

seriesController2.updateDataSource(

addedDataIndexes: getIndexes(dataLength));

seriesController3.updateDataSource(

addedDataIndexes: getIndexes(dataLength));

seriesController4.updateDataSource(

addedDataIndexes: getIndexes(dataLength));

}

void loadData(int x) {

for (var i = 0; i < dataLength; i++) {

dt = pmData.isEmpty

? DateTime(y, m, d, h, min, s)

: pmData.last.dt.add(Duration(seconds: 1));

}

}

Screenshot:

Regards,

Yuvaraj.

Attachment: _f180661_e270b6d9.zip

[Zhu]

Hi,  Yuvaraj,

This works, great!

Another question, what if people need to check earlier data? 

I understand that would need to make some changes according to ChartSwipeDirection, on like _updateView and _updateData, but not clear on how to change the getIndexes part, how to do that?

Regards,

Zhu.

[Yuvaraj Gajaraj]

Hi Zhu,

We are working on preparing a feasible workaround sample to achieve your requirement, We will update you the further details tomorrow. We appreciate your patience until then.

Regards,

Yuvaraj.

[Zhu]

Hi, Yuvaraj,

Great, looking forward to it.

Thank you in advance.

Regards,

Zhu

[Yuvaraj Gajaraj]

Hi Zhu,

We have modified the sample like update the data from both sides with the help of the swipe direction, when swiping from left to right the data will be added at the start of the chart and if swipe from right to left the data will be added from the end of the chart. We have shared the modified application below for your reference.

Screenshot:

Regards,

Yuvaraj.

Attachment: f180661_a5c62da0.zip

[Zhu]

Hi, Yuvaraj,

Oh, that's simple, actually, I tried that before but there was a multi-load issue.. for my code only

Anyway, I can't figure it out without your help, thank you.

Best Regards,

Zhu.

[Yuvaraj Gajaraj]

Most Welcome. Kindly get back to us if you have further queries. We are always happy to assist you.