Heatmap Chart Datasource doesn't work on the latest version

[Amanda]

Hello,

Recently I updated the Syncfusion Blazor NuGet from version 18.4.47 to version 19.3.0.56 and the Heatmap chart at my page doesn’t work.

The Heatmap’s Data source that I was using was of type ObservableCollection<ObservableCollection<int>>

Now it seems that there is a problem with it and although my Data source is not null Visual Studio throws a null exception an I can only display my HeatMap if the Datasource is an array.

The way that I use to fill my ObservableCollection is

• First declared the property at my Razor page

• Then on the OnInitialized method I call the function FillHeatMapTEMP which fills the ObservableCollection with random data

My code is below:

public ObservableCollection<ObservableCollection<int>> DataSource { get; set; } = new ObservableCollection<ObservableCollection<int>>();

 protected override void OnInitialized()
{
          DataSource = FillHeatMapTEMP();
}
​
 private ObservableCollection<ObservableCollection<int>> FillHeatMapTEMP()
        {
            try
            {
                var list = new ObservableCollection<ObservableCollection<int>>();
                var listInside = new ObservableCollection<int>();


                for (int i = 1; i <7; i++)
                {
                    listInside.Add(i);
                }


                for (int i = 0; i < 61; i++)
                {
                    list.Add(listInside);
                }


                return list;
            }
            catch (Exception ex)
            {
                return new ObservableCollection<ObservableCollection<int>>();
            }
        }

So I want to ask you:

1. The HeatMap's Datasource must only be an array ?
2. If not could you show an example where the Datasource of the Heatmap chart is an ObservableCollection.

Thanks in advance.

[Keerthana Rajendran]

Hi Amanda,

Thanks for contacting Syncfusion support.

We checked your reported scenario to bind ObservableCollection as HeatMap data source. Please convert the required data source to array as done in the following code.

<SfHeatMap DataSource="@Orders.ToArray()">

                <HeatMapTitleSettings Text="Most Visited Destinations by International Tourist Arrivals">

                    <HeatMapTitleTextStyle Size="15px" FontWeight="500" FontStyle="Normal"></HeatMapTitleTextStyle>

                </HeatMapTitleSettings>

                <HeatMapDataSourceSettings IsJsonData="true" AdaptorType="AdaptorType.Cell" XDataMapping="RowId" YDataMapping="ColumnId" ValueMapping="Value"></HeatMapDataSourceSettings>

                <HeatMapXAxis Labels="@XLabels"></HeatMapXAxis>

                <HeatMapYAxis Labels="@YLabels"></HeatMapYAxis>

                <HeatMapPaletteSettings>

                    <HeatMapPalettes>

                        <HeatMapPalette Color="#DCD57E"></HeatMapPalette>

                        <HeatMapPalette Color="#A6DC7E"></HeatMapPalette>

                        <HeatMapPalette Color="#7EDCA2"></HeatMapPalette>

                        <HeatMapPalette Color="#6EB5D0"></HeatMapPalette>

                    </HeatMapPalettes>

                </HeatMapPaletteSettings>

                <HeatMapCellSettings ShowLabel="true" Format="{value} M">

                    <HeatMapCellBorder Width="1" Radius="4" Color="White"></HeatMapCellBorder>

                </HeatMapCellSettings>

            </SfHeatMap>

@code{

public ObservableCollection<ObservableDatas> ObservableData { get; set; }

List<ObservableDatas> Orders = new List<ObservableDatas>() { };

protected override void OnInitialized()

{

ObservableDatas d = new ObservableDatas();

d.RowId = "Austria";

d.ColumnId = "2010";

d.Value = "30";

Orders.Add(d);

d = new ObservableDatas();

d.RowId = "Austria";

d.ColumnId = "2011";

d.Value = "60";

Orders.Add(d);

d = new ObservableDatas();

d.RowId = "China";

d.ColumnId = "2010";

d.Value = "40";

Orders.Add(d);

d = new ObservableDatas();

d.RowId = "China";

d.ColumnId = "2011";

d.Value = "55";

Orders.Add(d);

}

string[] XLabels = new string[] { "Austria", "China" };

string[] YLabels = new string[] { "2010", "2011" };

}

}

We have attached a sample for your reference in the following link.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/HeatMap-datasource-1688074127

Please let us know if you need further assistance.

Regards,

Keerthana R.