realtime update treemap chart when a item change

[hanh2fpts]

hello, i have a list object realtime change. how to treemap chart update when my object change?
anyone knows. thanks !

[sfHariHaraSudhan]

Hi @hanh2fpts,

You can achieve the mentioned requirement by using the setState method or ValueNotifier to update the SfTreemap whenever the data source of the collection changes. If we use setState to update the treemap, the entire widget will be rebuilt. However, if we use ValueNotifier, only the widget wrapped inside the builder property of the ValueListenableBuilder will be rebuilt.

Kindly refer the code snippet below:

class _MainAppState extends State<MainApp> {
  late List<SocialMediaUsers> _source;
  ValueNotifier<int> count = ValueNotifier(0);
  late List<String> countries;
  late List<double> users;
 
  @override
  void initState() {
    _source = <SocialMediaUsers>[
      const SocialMediaUsers(
        country: 'India',
        usersInMillions: 51.4,
      ),
      const SocialMediaUsers(
        country: 'USA',
        usersInMillions: 47.11,
      ),
      const SocialMediaUsers(
        country: 'Japan',
        usersInMillions: 43.3,
      ),
      const SocialMediaUsers(
        country: 'Germany',
        usersInMillions: 40.65,
      ),
      const SocialMediaUsers(
        country: 'France',
        usersInMillions: 38.54,
      ),
      const SocialMediaUsers(
        country: 'UK',
        usersInMillions: 33.93,
      ),
    ];
    countries = [
      'Russia',
      'China',
      'Australia',
      'Brazil',
      'Dubai',
      'Bangladesh',
      'Pakistan',
      'Sri Lanka',
      'Iran',
      'Afghanistan',
    ];
    users = [
      71.65,
      65.43,
      41.97,
      67.43,
      53.38,
      11.87,
      09.76,
      08.33,
      22.10,
      04.71,
    ];
    super.initState();
  }
 
  @override
  Widget build(BuildContext context) {
    Timer.periodic(
      const Duration(seconds: 2),
      (Timer timer) {
        if (count.value < countries.length) {
          _source.add(
            SocialMediaUsers(
              country: countries[count.value],
              usersInMillions: users[count.value],
            ),
          );
          count.value = count.value + 1;
        }
      },
    );
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 400,
          width: 400,
          child: ValueListenableBuilder(
            valueListenable: count,
            builder: (BuildContext context, int? value, Widget? child) {
              return SfTreemap(
                dataCount: _source.length,
                weightValueMapper: (int index) {
                  return _source[index].usersInMillions;
                },
                levels: [
                  TreemapLevel(
                    groupMapper: (int index) {
                      return _source[index].country;
                    },
                    labelBuilder: (BuildContext context, TreemapTile tile) {
                      return Text(tile.group);
                    },
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}
 
class SocialMediaUsers {
  const SocialMediaUsers({
    required this.country,
    required this.usersInMillions,
  });
 
  final String country;
  final double usersInMillions;
}

Also attached the sample and recording below for your reference and you can modify the sample according to your needs. If you have further queries, please get back to us.

Regards,
Hari Hara Sudhan. K.
_501609.zip
501609.zip

[hanh2fpts]

Hi @sfHariHaraSudhan
Thanks for your support. Sorry about the unclear question, my problem is : my list object not change about length, data.count not change, only value of object changed. So, my treemap chart not updated in my view.
Do you have any suggestions regarding this issue?
This is my code :

class AssetsReport extends StatefulWidget {
  const AssetsReport({Key? key}) : super(key: key);

  @override
  State<AssetsReport> createState() => _AssetsReportState();
}

class _AssetsReportState extends State<AssetsReport> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBarWidget(context: context, titlePage: ''),
      body: BlocProvider(
        create: (context) => AssetsReportBloc()..add(FetchDataEvent()),
        child: BlocBuilder<AssetsReportBloc, AssetsReportState>(
          builder: (context, state) {
            if (state is FetchDataSuccess) {
              var listStock = state.watchList;
              return ChangeNotifierProvider(
                /// object QuoteEntity is taken automatically and changes over time - sorry about my bad english :))
                  create: (context) => listStock[0],
                  child: Consumer<QuoteEntity>(builder: (context, value, child) {
                    return _buildAnimationTreemapChart(listStock);
                  }));
            }
            return const Center(
              child: CircularProgressIndicator(),
            );
          },
        ),
      ),
    );
  }
}
SfTreemap _buildAnimationTreemapChart(List<QuoteEntity> listStock) {
  return SfTreemap(
    layoutDirection: TreemapLayoutDirection.topLeft,
    dataCount: listStock.length,
    levels: [
      TreemapLevel(
        groupMapper: (int index) {
          return listStock[index].stockCode;
        },
        colorValueMapper: (tile) => Color(listStock[tile.indices[0]].changeColorHome),
        labelBuilder: (BuildContext context, TreemapTile tile) {
          return ChangeNotifierProvider(
            create: (context) => listStock[tile.indices[0]],
            child: Consumer<QuoteEntity>(
              builder: (context, value, child) {
                return Center(
                  child: Wrap(
                    alignment: WrapAlignment.center,
                    crossAxisAlignment: WrapCrossAlignment.center,
                    spacing: 5,
                    children: [
                      Text(
                        tile.group,
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 12,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                      Text(
                        listStock[tile.indices[0]].changePricePct,
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 12,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
          );
        },
        tooltipBuilder: (BuildContext context, TreemapTile tile) {
          return Padding(
            padding: const EdgeInsets.all(10),
            child: Text('StockCode: ${tile.group}\nQuantity: ${NumberFormat('#,##0', 'en_US').format(tile.weight)}',
                style: const TextStyle(color: Colors.white)),
          );
        },
      ),
    ],
    weightValueMapper: (index) {
      return listStock[index].totalQttyValue;
    },
  );
}

[sfHariHaraSudhan]

Hi @hanh2fpts,

Sorry for the inconvenience.

We would like to inform you that currently, SfTreemap widget will be updated properly only when the dataCount of the SfTreemap changes. You can update the SfTreemap widget with real time data by adding or removing the data points of the SfTreemap but there is no option to update the SfTreemap while refreshing values only without changing the data count of the SfTreemap. Because the value of the tile will be updated only if the data count of the old widget and the data count of the new updated widget is not same.

However, we are currently trying to achieve the mentioned requirement using the Unique key and also seeking for any alternative solution to provide possible solution from our end. We will share further details within one business day on 20 September 2023. We appreciate your patience until then.

Regards,
Hari Hara Sudhan. K.

[hanh2fpts]

Hi @sfHariHaraSudhan,
I have discussed this with you through Syncfusion support, so I will close this topic now.
Thank you for your support.

[HanDo-DIG]

Sorry, is this problem fixed? I am trying to update (treemaplevel 2) when there is an item changed, my list object not change about length, please reply me, thank you

[ManiKesavaraj]

Hi @HanDo-DIG,

We’d like to clarify a point regarding the feature request for dynamic updates to the treemap datasource without changing the data count. This feature has already been logged in our feedback portal.

We will prioritize features for each release based on demand and priority, so this feature may be available in one of our upcoming releases. You can also track the status of the feature with the feedback provided.

FR Link: Provide dynamic update support for treemap datasource without changing the data count in Flutter | Feedback Portal

We implemented a workaround by using a unique key to force the widget to rebuild. By assigning a new key each time, the SfTreemap, completely rebuilds, ensuring that all updated values are reflected, even if the data count remains unchanged.

child: SfTreemap(
                 // Use the unique key to force rebuild when data values change
                 key: _treemapKey,
                 dataCount: _data.length,
                 },
   …
);

We have shared a sample workaround based on your needs that you can modify. If you have any further queries, please feel free to reach out to us.

gh_1396_demo.mp4

gh_1396.zip

Regards,
Naveen K.