We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

TreeMap not reflecting datasouce refresh

Hi, im trying to make a Treemap reflect the new data.

I know the data is refreshing correctly as other charts using the data are rendering correctly.

This is the sftreemap

<SfTreeMap ID="TreemapTherapeuticAreaName" @ref="TreemapTherapeuticAreaName" DataSource="@TreeMapComplaintsTherapeuticArea(null,null,null,null)" Height="100%"

                                           WeightValuePath="ComplaintCount"

                                           TValue="TreeMap_Complaints_Brand"

                                           Palette='new string[] {"#0077b3", "#29b6f6", "#ab47bc", "#ffc107", "#5c6bc0", "#009688"}'>


                                    <TreeMapLevels>


                                        <TreeMapLevel GroupPath="Therapeutic_Area_Name">

                                            <TreeMapLevelBorder Color="black" Width="0.5">

                                            </TreeMapLevelBorder>

                                        </TreeMapLevel>


                                    </TreeMapLevels>

                                </SfTreeMap>

and this is the code

       //treemap on click filter charts to BrandTypeName or brand, depending on the axis of the chart

        protected async System.Threading.Tasks.Task clickTreeMapBrandType(ItemClickEventArgs args)

        {

            IDictionary<string, object> itemData = args.Item as IDictionary<string, object>;

            if (itemData != null)

            {


                var selectedBrandTypeName = itemData.ContainsKey("BrandType_Name") ? itemData["BrandType_Name"].ToString() : null;

                filterSelectedBrandTypeName = selectedBrandTypeName;

                // Update the data source of each chart with the filtered data

                var filteredDataBrandType = TreeMapComplaintsTherapeuticArea(selectedBrand, selectedBrandTypeName, selectedTherapeuticalArea, selectedYearMonth);

                Treemap.DataSource = filteredDataBrandType;

                AreaChart.DataSource = filteredDataBrandType;

                HistChart.DataSource = filteredDataBrandType;

                SBar.DataSource = filteredDataBrandType;

                TreemapTherapeuticAreaName.DataSource = filteredDataBrandType;




                // Refresh each chart to render the updated data

                await Treemap.RefreshAsync();

                await AreaChart.RefreshAsync();

                await HistChart.RefreshAsync();

                await SBar.RefreshAsync();

                StateHasChanged();

                await TreemapTherapeuticAreaName.RefreshAsync();


                NotificationService.Notify(new NotificationMessage() { Severity = NotificationSeverity.Info, Summary = $"done" });

            }

        }




1 Reply

SA Sabari Anand Senthamarai Kannan Syncfusion Team April 24, 2023 10:02 AM UTC

Hi Bruno,


When we analyzed the provided code snippet, we noticed that some of the methods, variables and data source are missing in the sample code. However, we have re-created the reported scenario and tried to update the data source dynamically. For updating the data source dynamically, we need to declare the data source as a “ObservableCollection” data type instead of “List” data type. The “ObservableCollection” data type will automatically refresh the TreeMap component once the data is updated in it. Using the “ObservableCollection” data type, you can filter, add, remove, or modify the data in the data source. Please find the sample and video, for demonstrating the same, below.


Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp21793515480

Video Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/treemap-1070375209


Please let us know if the above solution meets your requirement. If not, please modify the above sample and share it with us to replicate the reported issue.


Loader.
Live Chat Icon For mobile
Up arrow icon