Cannot get smooth realtime line

[lentzou]

Hello there,

I'm looking for a realtime line chart and I found your example: here

Unfortunately I cannot get a smooth line after removing the first element like you do.
And I'm asking myself why you doing a timer on 40 milliseconds.

See my example on Android

IMG_1013_Trim.mp4

Here with an another library

IMG_1014.mov

Can you help me out ?
Regards

[imaNNeo]

It would be nice if you can reproduce it in a main.dart file.
Then I can help you directly.

Thanks!

[lentzou]

Here we go my dude

      import 'dart:async';
      import 'dart:math';
      
      import 'package:flutter/material.dart';
      import 'package:fl_chart/fl_chart.dart';
      
      class VectorsDataModel {
        final double date;
        final double vector;
        final Color segmentColor;
      
        VectorsDataModel(this.date, this.vector, this.segmentColor);
      }
      
      void main() => runApp(MyApp());
      
      class MyApp extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
          return MaterialApp(
            title: 'Welcome to Flutter',
            home: Demo(),
          );
        }
      }
      
      class Demo extends StatefulWidget {
        @override
        _DemoState createState() => _DemoState();
      }
      
      class _DemoState extends State<Demo> {
        bool _isStart = false;
        double _step = 0.05;
        double _timeElapsed = 0;
        Timer _cleanTabPeriodic;
      
        List<VectorsDataModel> _tabVectors = [VectorsDataModel(0, 0, Colors.black)];
      
        void _start() {
          _isStart = true;
          _cleanTabPeriodic = Timer.periodic(Duration(milliseconds: 40), (timer) {
            while (_tabVectors.length > 100) _tabVectors.removeAt(0);
            double _vectorResult = Random().nextInt(100).toDouble();
            setState(() {
              _tabVectors
                  .add(VectorsDataModel(_timeElapsed, _vectorResult, Colors.black));
            });
            _timeElapsed += _step;
          });
        }
      
        void _stop() {
          _isStart = false;
          _cleanTabPeriodic.cancel();
      
          _timeElapsed = 0;
      
          setState(() {
            _tabVectors.clear();
            _tabVectors = [VectorsDataModel(0, 0, Colors.black)];
          });
        }
      
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Column(
              children: [
                Expanded(
                  child: LineChart(
                    LineChartData(
                      minX: _tabVectors.first.date,
                      lineTouchData: LineTouchData(enabled: false),
                      clipData: FlClipData.all(),
                      gridData: FlGridData(
                        show: true,
                      ),
                      lineBarsData: [
                        LineChartBarData(
                          spots: _tabVectors
                              .map((tabVector) =>
                                  FlSpot(tabVector.date, tabVector.vector))
                              .toList(),
                          dotData: FlDotData(
                            show: false,
                          ),
                          colors: _tabVectors
                              .map((tabVector) => Color(tabVector.segmentColor.value))
                              .toList(),
                          barWidth: 2,
                          isCurved: false,
                        ),
                      ],
                      titlesData: FlTitlesData(
                        show: true,
                        bottomTitles: SideTitles(
                          showTitles: false,
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      IconButton(
                          icon: Icon(Icons.play_circle_fill),
                          iconSize: 50.0,
                          onPressed: () => _isStart ? null : _start()),
                      Padding(padding: EdgeInsets.all(8.0)),
                      IconButton(
                          icon: Icon(Icons.loop),
                          iconSize: 50.0,
                          onPressed: () => _isStart ? _stop() : null),
                    ],
                  ),
                ),
              ],
            ),
          );
        }
      }

Thanks to you !

[lentzou]

Hey,

Any update ?

[imaNNeo]

Hey!
Try disabling swap animation like the below code:

child: LineChart(
  LineChartData(),
  swapAnimationDuration: Duration.zero,
),

[chaeni332]

hello
I am looking at the data well. Have you solved it?
help help help help help help
child: LineChart(
LineChartData(),
swapAnimationDuration: Duration.zero,
),
I got an error when I added it.
The named parameter 'swapAnimationDuration' isn't defined.

[chaeni332]

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:math';

class VectorsDataModel {
final double date;
final double vector;
final Color segmentColor;

VectorsDataModel(this.date, this.vector, this.segmentColor);
}

class Demo extends StatefulWidget {
@OverRide
_DemoState createState() => _DemoState();
}

class _DemoState extends State {
bool _isStart = false;
double _step = 0.05;
double _timeElapsed = 0;
late Timer _cleanTabPeriodic;
int dddddic = 0;

List _tabVectors = [VectorsDataModel(0, 0, Colors.black)];

void _start() {
_isStart = true;
_cleanTabPeriodic = Timer.periodic(Duration(milliseconds: 40), (timer) {
while (_tabVectors.length > 100) _tabVectors.removeAt(0);
//if(_tabVectors.length > 100) _tabVectors.removeAt(0);
double _vectorResult = Random().nextInt(100).toDouble();
print(_tabVectors.length);
setState(() {
_tabVectors
.add(VectorsDataModel(_timeElapsed, _vectorResult, Colors.black));
});
_timeElapsed += _step;
});
}

void _stop() {
_isStart = false;
_cleanTabPeriodic.cancel();

_timeElapsed = 0;

setState(() {
  _tabVectors.clear();
  _tabVectors = [VectorsDataModel(0, 0, Colors.black)];
});

}

@OverRide
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(
child: LineChart(
LineChartData(
minX: _tabVectors.first.date,
lineTouchData: LineTouchData(enabled: false),
clipData: FlClipData.all(),
gridData: FlGridData(
show: true,
),
lineBarsData: [
LineChartBarData(
spots: _tabVectors
.map((tabVector) =>
FlSpot(tabVector.date, tabVector.vector))
.toList(),
dotData: FlDotData(
show: false,
),
color: Colors.cyanAccent,
//_tabVectors
// .map((tabVector) => Color(tabVector.segmentColor.value))
// .toList(),
barWidth: 2,
isCurved: false,
),
],
titlesData: FlTitlesData(
show: true,
// bottomTitles: SideTitles(
// showTitles: false,
// ),
),
),
swapAnimationDuration: Duration.zero,

          //swapAnimationDuration: Duration.zero,
        ),
      ),
      Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            IconButton(
                icon: Icon(Icons.play_circle_fill),
                iconSize: 50.0,
                onPressed: () => _isStart ? null : _start()),
            Padding(padding: EdgeInsets.all(8.0)),
            IconButton(
                icon: Icon(Icons.loop),
                iconSize: 50.0,
                onPressed: () => _isStart ? _stop() : null),
          ],
        ),
      ),
    ],
  ),
);

}
}