Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Performance Issues with Tooltip #39

Closed
sukhcha-in opened this issue Jul 9, 2019 · 0 comments
Closed

Performance Issues with Tooltip #39

sukhcha-in opened this issue Jul 9, 2019 · 0 comments

Comments

@sukhcha-in
Copy link

sukhcha-in commented Jul 9, 2019

Charts are working fine and smoothly when spots are having smaller values.

Issues happens when spots are having larger integers, Try to show Tooltip with code below and it will hang the app.

Device: Samsung Galaxy S10+

Here's my rough code:

import 'dart:convert';

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class ChartPage extends StatefulWidget {
  @override
  _ChartPageState createState() => _ChartPageState();
}

class _ChartPageState extends State<ChartPage> {
  var format = DateFormat("d MMM");
  int highPrice = 0;

  List<Color> gradientColors = [
    Color(0xffF3A183),
    Color(0xffEC6F66),
  ];

  @override
  Widget build(BuildContext context) {
    var rawResult =
        '{ "status": true, "title": "Apple iPhone X (64GB) - Silver:Amazon:Electronics", "store": "Amazon", "myData": "1555698600:74000,1555785000:74000,1555871400:74000,1555957800:74000,1556044200:74000,1556130600:74000,1556217000:74000,1556303400:74000,1556389800:74000,1556476200:74000,1556562600:74000,1556649000:73950,1556735400:73950,1556821800:69999,1556908200:69999,1556994600:69999,1557081000:69999,1557167400:69999,1557253800:73999,1557340200:73999,1557426600:73999,1557513000:73999,1557599400:73999,1557685800:73999,1557772200:73999,1557858600:73999,1557945000:91900,1558031400:91900,1558117800:73999,1558204200:73999,1558290600:69999,1558377000:69999,1558463400:69999,1558549800:69999,1558636200:69999,1558722600:69999,1558809000:69999,1558895400:66499,1558981800:66499,1559068200:66499,1559154600:66499,1559241000:66499,1559327400:66499,1559413800:73799,1559500200:69999,1559586600:69999,1559673000:69999,1559759400:69999,1559845800:69999,1559932200:69999,1560018600:69999,1560105000:68999,1560191400:68999,1560277800:68999,1560364200:68999,1560450600:68999,1560537000:69999,1560623400:69999,1560709800:66499,1560796200:66499,1560882600:66499,1560969000:66499,1561055400:66499,1561141800:69999,1561228200:69999,1561314600:66499,1561401000:66499,1561487400:66499,1561573800:66499,1561660200:66499,1561746600:66499,1561833000:66499,1561919400:66499,1562005800:66499,1562092200:66499,1562178600:68999,1562265000:68999,1562351400:68999,1562437800:68999,1562524200:68999", "avg_price": "70,699", "low_price": "66,499", "curr_price": "68,999", "productUrl": "https:\/\/www.amazon.in\/Apple-iPhone-Silver-64GB-Storage\/dp\/B0711T2L8K\/", "drop_chance": "26" }';
    var result = json.decode(rawResult);
    var priceDataRaw = result["myData"].split(",");
    double totalPrices = priceDataRaw.length.toDouble();
    List<String> dates = new List(priceDataRaw.length);
    List<FlSpot> prices = new List(priceDataRaw.length);
    for (var i = 0; i < priceDataRaw.length; i++) {
      var singleRawPrice = priceDataRaw[i];
      var priceArr = singleRawPrice.split(":");
      var date = new DateTime.fromMillisecondsSinceEpoch(
          int.parse(priceArr[0]) * 1000);
      var hoomanDate = format.format(date);
      dates[i] = hoomanDate;
      if (double.parse(priceArr[1]).floor() > highPrice) {
        highPrice = double.parse(priceArr[1]).floor();
      }

      prices[i] = FlSpot(double.parse(i.toString()), double.parse(priceArr[1]));
    }
    int priceSpaceTop = (highPrice / 5).floor();
    double maxPrice = (priceSpaceTop + highPrice).toDouble();

    return Scaffold(
      appBar: AppBar(
        title: Text(result["title"]),
      ),
      body: SingleChildScrollView(
        child: SizedBox(
          width: double.infinity,
          height: 200.0,
          child: Container(
            child: Padding(
              padding: const EdgeInsets.only(right: 10.0, left: 10.0, top: 24),
              child: FlChart(
                chart: LineChart(
                  LineChartData(
                      gridData: FlGridData(
                        show: false,
                        drawHorizontalGrid: false,
                        getDrawingVerticalGridLine: (value) {
                          return const FlLine(
                            color: Color(0xff37434d),
                            strokeWidth: 1,
                          );
                        },
                        getDrawingHorizontalGridLine: (value) {
                          return const FlLine(
                            color: Color(0xff37434d),
                            strokeWidth: 0,
                          );
                        },
                      ),
                      titlesData: FlTitlesData(
                        show: true,
                        horizontalTitlesTextStyle:
                            TextStyle(color: Color(0xff000000), fontSize: 8),
                        getHorizontalTitles: (value) {
                          return "";
                        },
                        verticalTitlesTextStyle: TextStyle(
                          color: Color(0xff000000),
                          fontSize: 8,
                        ),
                        getVerticalTitles: (value) {
                          return "";
                        },
                        verticalTitlesReservedWidth: 25,
                        verticalTitleMargin: 8,
                        horizontalTitleMargin: 8,
                      ),
                      borderData: FlBorderData(show: false),
                      minX: 0,
                      maxX: totalPrices,
                      minY: 0,
                      maxY: maxPrice,
                      lineBarsData: [
                        LineChartBarData(
                          spots: prices,
                          isCurved: true,
                          colors: gradientColors,
                          barWidth: 1.5,
                          isStrokeCapRound: false,
                          dotData: FlDotData(
                            show: false,
                            dotColor: Colors.black.withOpacity(0.2),
                          ),
                          belowBarData: BelowBarData(
                            show: true,
                            colors: gradientColors
                                .map((color) => color.withOpacity(0.3))
                                .toList(),
                          ),
                        ),
                      ],
                      lineTouchData: LineTouchData(
                          touchTooltipData: TouchTooltipData(
                        tooltipBgColor: Colors.white.withOpacity(0.8),
                      ))),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

JSON with Smaller values for testing (Works just fine and smooth):

{ "status": true, "title": "Destination Success: Discovering the Entrepreneurial Journey:Amazon:Kindle Store", "store": "Amazon", "myData": "1507633169:64.72,1510191470:64.72,1513258319:64.72,1514037780:64.72,1515516055:64.72,1516978145:64.72,1518226927:64.72,1519370596:64.72,1520566714:64.15,1527515383:67.33,1529294384:78.76,1534952637:81.69,1538572111:81.67,1550820561:73.93,1552158657:73.54,1552714165:73.54,1555313399:71.89,1555856888:71.89,1556240207:71.89,1556811021:71.89,1557485399:72.15,1558860933:72.42,1561360193:72.26,1562529376:71.13", "avg_price": "70", "low_price": "64", "curr_price": "71", "productUrl": "https:\/\/www.amazon.in\/Destination-Success-Discovering-Entrepreneurial-Journey-ebook\/dp\/B07499SX9S\/", "drop_chance": "42" }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant