Animate x axis for realtime time based data.
- Dominant language
- Dart
- Stars
- 7.6k
- Forks
- 2k
- Avg merge
- 9d 1h
- Merged PRs (30d)
- 2
Description
I have data where the X value is a timestamp. I would like my data to animate across the graph as the time changes.
In the follow example `data` contains 60 elements each with the `timestamp` (X value) 1 second apart. Every second a new value is shifted on top and the last value is dropped.
```dart
LineChart(
LineChartData(
lineBarsData: [
LineChartBarData(
spots: [for (final node in data) FlSpot(node.timestamp.toDouble(), node.rawValue)],
)
],
titlesData: FlTitlesData(
bottomTitles: SideTitles(
reservedSize: 22,
showTitles: true,
interval: 20000,
),
),
maxX: DateTime.now().millisecondsSinceEpoch.toDouble(),
minX: DateTime.now().subtract(Duration(seconds: 60)).millisecondsSinceEpoch.toDouble(),
),
swapAnimationDuration: Duration(seconds: 1), // Data updated once every second
);
```
Every second instead of each point animating to the new position (1 second or 1000 units to the left) they animate to the value of the next node in the list. This results in an odd jumping animation instead of the desired smooth scrolling.
https://user-images.githubusercontent.com/1530025/116978716-f025e380-ac78-11eb-823d-4beb7b7f087e.mov
Contributor guide
Research direction
Start with the LineChart configuration and animation settings shown in the issue, especially swapAnimationDuration, minX, maxX, and the timestamp-based FlSpot values. Compare the current point-to-point animation with the requested behavior; done means a realtime series scrolls smoothly as each new value arrives without the visible jumping.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- dart, flutter
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100