syncfusion / flutter-examples

This repository contains the Syncfusion Flutter UI widgets examples and the guide to use them.
Other
1.98k stars 778 forks source link

SfCartesianChart - updateDataSource not working as intended #871

Open servetoz opened 1 month ago

servetoz commented 1 month ago

Bug description

Hi,

I'm trying to plot real-time data comes from a sensor with updateDataSource method. As in the provided code, I add and remove 1k new data points each second, so data count stays same. However, as you can see in the video, newly added data is not being drawn and after couple of seconds the graph becomes empty.

Thanks.

Steps to reproduce

  1. Run provided code.

Code sample

Code sample ```dart void main() { runApp(const MainApp()); } class MainApp extends StatefulWidget { const MainApp({super.key}); @override State createState() => _MainAppState(); } class _MainAppState extends State { late List _chartData; late ChartSeriesController _seriesController; late Random _random; int _index = 0; Timer? timer; @override void initState() { super.initState(); _random = Random(); _chartData = []; for (int i = 0; i < 10000; i++) { _chartData.add( ChartSampleData( x: _index, y: _random.nextInt(1000), ), ); _index++; } Timer.periodic(const Duration(milliseconds: 1000), _updateDataSource); } void _updateDataSource(Timer timer) { // if (_chartData.length > 124000) { // _chartData.clear(); // _targetValue = 3000; // _index = 0; // } for (int i = 0; i < 1000; i++) { _chartData.removeAt(0); _chartData.add( ChartSampleData( x: _index, y: _random.nextInt(1000), ), ); } _seriesController.updateDataSource(addedDataIndexes: _getIndexes(1000), removedDataIndexes: List.generate(1000, (index) => index)); print('Data length: ${_chartData.length} added: ${_getIndexes(10)} removed: ${List.generate(10, (index) => index)}'); } List _getIndexes(int length) { final int startIndex = _chartData.length - length; final List indexes = List.generate(length, (index) => startIndex + index); return indexes; } @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: SfCartesianChart( primaryXAxis: NumericAxis(), primaryYAxis: NumericAxis(), series: >[ FastLineSeries( dataSource: _chartData, xValueMapper: (ChartSampleData data, _) => data.x, yValueMapper: (ChartSampleData data, _) => data.y, onRendererCreated: (ChartSeriesController controller) { _seriesController = controller; }, color: Colors.accents[_random.nextInt(14)], ), ], ), ), ); } } class ChartSampleData { final num? x; final num? y; ChartSampleData({ required this.x, required this.y, }); } ```

Screenshots or Video

Screenshots / Video demonstration https://github.com/user-attachments/assets/1ffb6581-e1c5-42be-8684-18594c0824d3

Stack Traces

Stack Traces No error. Console log: [12] I/flutter (18061): Data length: 10000 added: [9990, 9991, 9992, 9993, 9994, 9995, 9996, 9997, 9998, 9999] removed: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

On which target platforms have you observed this bug?

Android

Flutter Doctor output

Doctor output ```console [√] Flutter (Channel stable, 3.24.0, on Microsoft Windows [Version 10.0.22621.4169], locale de-DE) • Flutter version 3.24.0 on channel stable at C:\flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 80c2e84975 (10 weeks ago), 2024-07-30 23:06:49 +0700 • Engine revision b8800d88be • Dart version 3.5.0 • DevTools version 2.37.2 [√] Windows Version (Installed version of Windows is version 10 or higher) [√] Android toolchain - develop for Android devices (Android SDK version 35.0.0) • Android SDK at C:\Users\servet\AppData\Local\Android\sdk • Platform android-35, build-tools 35.0.0 • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java • Java version OpenJDK Runtime Environment (build 17.0.11+0--11852314) • All Android licenses accepted. [√] Android Studio (version 2024.1) • Android Studio at C:\Program Files\Android\Android Studio • Flutter plugin can be installed from: https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 17.0.11+0--11852314) [√] VS Code (version 1.94.0) • VS Code at C:\Users\servet\AppData\Local\Programs\Microsoft VS Code • Flutter extension version 3.98.0 [√] Connected device (1 available) • SM S916B (mobile) • IP • android-arm64 • Android 14 (API 34) [√] Network resources • All expected network resources are available ```
Kaviyarasansf4298 commented 1 month ago

Hi @servetoz ,

We have validated your sample, and we can confirm that the mentioned behavior is replicated on our side when using the addedDataIndexes and removedDataIndexes of the updateDataSource method with a large set of data points. This occurs because the data points stored in the data source have been removed, resulting in an empty data source and therefore the series has not been displayed.

However, we recommend that you use the updatedDataIndexes argument of the updateDataSource method instead of adding and then removing them using both the addedDataIndexes and removedDataIndexes arguments. By using this updatedDataIndexes, you can update or modify the data source of the chart based on the indexes directly in the chart.

If you have any further questions or need assistance with other features, please don’t hesitate to reach out.

Sample: gh_871.zip

Regards, Kaviyarasan Arumugam.