Question 76966 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter sort, map, reduce List of map

Hey so I have this this sample List data from api, and im trying to show it to fl_charts

[
{"type": "expense", "amount": 250, "paymentDate": "22-02-2022"},
{"type": "income", "amount": 350, "paymentDate": "22-02-2022"},
{"type": "expense", "amount": 150, "paymentDate": "22-02-2022"},
{"type": "expense", "amount": 450, "paymentDate": "22-03-2022"},
{"type": "income", "amount": 650, "paymentDate": "22-03-2022"},
{"type": "expense", "amount": 650, "paymentDate": "22-05-2022"},
{"type": "income", "amount": 650, "paymentDate": "22-05-2022"},
{"type": "income", "amount": 650, "paymentDate": "22-05-2022"}
]

I was able to show/reflect it on fl charts

                      LineChartBarData(
                        spots: currentScenario?.transactions
                            .where((element) => element['type'] == 'income')
                            .map((e) {
                          return FlSpot(
                              DateTime.parse(e['paymentDate']).month
                                  as double,
                              e['amount']);
                        }).toList(),
                       ),
                      LineChartBarData(
                        spots: currentScenario?.transactions
                            .where((element) => element['type'] == 'expense')
                            .map((e) {
                          return FlSpot(
                              DateTime.parse(e['paymentDate']).month
                                  as double,
                              e['amount']);
                        }).toList(),
                       )

Now what i want to do is only show in chart the total for each month, I tried using fold but i get the total of all not within each month, I think im doing it wrong tho, any hints?

Tags:

2

Answers


  1. 0 
    void main() {
  var data = [
    {"type": "expense", "amount": 250, "paymentDate": "22-02-2022"},
    {"type": "income", "amount": 350, "paymentDate": "22-02-2022"},
    {"type": "expense", "amount": 150, "paymentDate": "22-02-2022"},
    {"type": "expense", "amount": 450, "paymentDate": "22-03-2022"},
    {"type": "income", "amount": 650, "paymentDate": "22-03-2022"},
    {"type": "expense", "amount": 650, "paymentDate": "22-05-2022"},
    {"type": "income", "amount": 650, "paymentDate": "22-05-2022"},
    {"type": "income", "amount": 650, "paymentDate": "22-05-2022"}
  ];
  List<Transactions> transactions = [];
  Set<int> eachMonth = {};

  void parsJsonDataToModel() {
    for (var value in data) {
      transactions.add(Transactions.fromJson(value));
    }
  }

  void geEachMonthsFromData(List<Transactions> transactions) {
    for (var element in transactions) {
      eachMonth.add(element.formattedPaymentDate!.month);
    }
  }

  void getTotalOfAmountMonthWise() {
    for (var month in eachMonth) {
      print(
          "Month: $month : Total: ${transactions.where((element) => element.formattedPaymentDate!.month == month).fold<int>(0, (previousValue, element) => previousValue += element.amount!)}");
    }
  }

  parsJsonDataToModel();
  geEachMonthsFromData(transactions);
  getTotalOfAmountMonthWise();
}

class Transactions {
  Transactions({
    required this.type,
    required this.amount,
    required this.paymentDate,
  });

  String? type;
  int? amount;
  String? paymentDate;
  DateTime? formattedPaymentDate;

  Transactions.fromJson(Map<String, dynamic> json) {
    type = json['type'];
    amount = json['amount'];
    paymentDate = json['paymentDate'];
    formattedPaymentDate = DateFormat("dd-MM-yyyy").parse(json['paymentDate']);
  }
}
    Login or Signup to reply.
  2. 0

    Copy and Pest this Code and check it:

    LineChartBarData(
  spots: currentScenario?.transactions
      .where((element) => element['type'] == 'income')
      .groupBy((e) => DateFormat("dd-MM-yyyy").parse(json['paymentDate'].month)
      .map((month, transactions) {
        return FlSpot(
            month.toDouble(),
            transactions.map((e) => e['amount']).reduce((a, b) => a + b));
      })
      .values
      .toList(),
),
LineChartBarData(
  spots: currentScenario?.transactions
      .where((element) => element['type'] == 'expense')
      .groupBy((e) => DateFormat("dd-MM-yyyy").parse(json['paymentDate'].month)
      .map((month, transactions) {
        return FlSpot(
            month.toDouble(),
            transactions.map((e) => e['amount']).reduce((a, b) => a + b));
      })
      .values
      .toList(),
)

    In this code, the transactions are first filtered by type, then grouped by month using groupBy method, and then the total amount is calculated for each group using reduce method.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search