Doesn't work with big data

[andyngdz]

Currently,
I'm fetching the data from this API (https://api.coincap.io/v2/assets/bitcoin/history?interval=d1)

I created a FlSpot with these values:
FlSpot(2757.4283650019844275, 1501718400000.1)

The chart doesn't work and the app stops working as well.

[andy1xx8]

I'm having the same issue too.
It doesn't work with a big value.

[sukhcha-in]

@andynguy3n @tauitdnmd I was having similar issue, when large data is passed app becomes unresponsive and might crash too.
Instead of passing values directly to chart calculate the percentage of each value between 0-100 then use it in fl_chart.

[Dhuliang]

Same issue

[imaNNeo]

Sore for delay, I've tried with the values that you said:

And it works just fine!

May I ask you use the latest version of fl_chart, and check it again?

[imaNNeo]

It's gonna be closed if I don't get any answer in a day because I tested it and it works in new versions.

[andyngdz]

Thanks @imaNNeoFighT ,
I'll test it again soon.

[imaNNeo]

Unfortunately, I'm gonna close it soon

[andyngdz]

Hi @imaNNeoFighT

I think with this number it doesn't work
1506124800000.0

Since the Unix timestamp is int, I covert to double by using this function

  List<FlSpot> listSpots() => this.data.map((assetData) {
        return FlSpot(
          assetData.time.roundToDouble(),
          double.parse(assetData.priceUsd),
        );
      }).toList();

Then try with 5 items

  @override
  Widget build(BuildContext context) {
    return FlChart(
      chart: LineChart(
        LineChartData(
          lineBarsData: [
            LineChartBarData(
                spots: listSpots().take(5).toList(),
                isCurved: true,
                isStrokeCapRound: false)
          ],
        ),
      ),
    );
  }

[imaNNeo]

Hi guys, I know your problem, but not sure what could we do,
I think you guys can scale down your values to fix this problem, is it works?

[andyngdz]

Thanks. I'll try. Have a good day.

[18601673727]

For minY: 70833.02 and maxY: 116880.3, I have this chart with 12 dots, x ranges from 1 to 12, render with LineChart got result like this:

@imaNNeoFighT Please help...

[imaNNeo]

Hi @18601673727
What's the problem?

[18601673727]

Hi @18601673727 What's the problem?

The line just looks too art-y don't you think sir?

[imaNNeo]

Sorry I didn't understand.

[18601673727]

Sorry I didn't understand.

I mean I'm expecting the line to be still "singe-directioned" not twisted when y value of the dots get greater than certain value or by any other circumstances.

[imaNNeo]

Can you give me your simplified code to reproduce?

[RodolfoSilva]

I think you can use this class to help you scale the values to keep the number inside the range configured to fl_chart.

class ScaleLinear {
  ScaleLinear({
    required this.domainMin,
    required this.domainMax,
    required this.rangeMin,
    required this.rangeMax,
  })  : targetRange = rangeMax - rangeMin,
        domainRange = domainMax - domainMin;

  final num targetRange;
  final num domainRange;
  final num domainMin;
  final num domainMax;
  final num rangeMin;
  final num rangeMax;

  double calc(num value) {
    return (value - domainMin) * targetRange / domainRange + rangeMin;
  }

  double invert(num value) {
    return (value - rangeMin) * domainRange / targetRange + domainMin;
  }
}


void main() {
  final y = ScaleLinear(
    domainMin: 4500,
    domainMax: 10000,
    rangeMin: 1,
    rangeMax: 10,
  );

  print(y.calc(10000)); // 10
  print(y.calc(8000)); // 6.7272727272727275
  print(y.calc(4500)); // 1
  // Invert
  print(y.invert(10)); // 10000
  print(y.invert(6.7272727272727275)); // 8000
  print(y.invert(1)); // 4500
}

[catteneo]

Hi guys, I know your problem, but not sure what could we do, I think you guys can scale down your values to fix this problem, is it works?

Could you elaborate on what exactly is this problem?
Stumbled upon it, and had to use some scaling strategy too