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

How to display data correctly in heatmap

Hi,

I wanted to use the heatmap control but from example and documentation I don't really get how to correctly assign the data.

I have the following scenario: The heatmap should show on Y-Axis the Years (ex. 2012-2022) and on the X-Axis the Months (Jan-Dec), and then show for each month in the specific year how many books a user read.

I tried this setup:

<ejs-heatmap renderingMode="@DrawType.Auto" theme="Bootstrap5Dark" height="300px" id="readingHistory" dataSource="@Model.ReadingHistoryData">
    <e-heatmap-titlesettings text="Heat map showing the distribtion of reading volumes by year and month." textStyle="@(new { size = "15px", fontWeight="500" , fontStyle="Normal" })"></e-heatmap-titlesettings>
    <e-heatmap-yaxis minimum="2012" maximum="2022"></e-heatmap-yaxis>
    <e-heatmap-xaxis labels="monthLabels"></e-heatmap-xaxis>
    <e-heatmap-palettesettings type="Fixed" emptyPointColor="white">
        <e-palettes>
            <e-palette value="0" color="@ColorTranslator.ToHtml(Color.White)"></e-palette>
            <e-palette value="2" color="@ColorTranslator.ToHtml(Color.DarkGreen)"></e-palette>
            <e-palette value="5" color="@ColorTranslator.ToHtml(Color.LightBlue)"></e-palette>
            <e-palette value="10" color="@ColorTranslator.ToHtml(Color.RoyalBlue)"></e-palette>
            <e-palette value="20" color="@ColorTranslator.ToHtml(Color.DarkBlue)"></e-palette>
        </e-palettes>
    </e-heatmap-palettesettings>
    <e-heatmap-legendsettings position="Bottom" width="20%" showLabel="true" alignment="Near" labelDisplayType="None" enableSmartLegend="true"></e-heatmap-legendsettings>
</ejs-heatmap>

And the data was:

var monthLabels = Enumerable.Range(1,12).Select(x =>newDateTime(DateTime.Now.Year, x,1).ToString("MMM")).ToArray();
public int[,] ReadingHistoryData=
{
{2,9,2,11,11,8,2,5,0,0,0,0},
{0,0,0,0,0,0,0,0,0,0,0,1033},
{0,0,0,0,0,4,3,0,0,0,0,0},
{0,0,0,0,0,4,3,0,0,0,0,0},
{0,0,0,0,0,4,3,0,0,0,0,0},
{0,0,0,0,0,4,3,0,0,0,0,0},
{0,0,0,0,0,4,3,0,0,0,0,0},
{0,0,0,0,0,4,3,0,0,0,0,0},
{0,0,0,0,0,4,3,0,0,0,0,0},
{0,0,0,0,0,4,3,0,0,0,0,0},
{0,0,0,0,0,4,3,0,0,0,0,0},
};

Where each array represents a year,and each element in the array the number of read books forthis month.

From the examples on GitHub and the Demo-Sites I can't figure out what I'm doing wrong.


4 Replies 1 reply marked as answer

IR Indumathi Ravi Syncfusion Team December 30, 2022 02:19 PM UTC

Hi Pascal,


In the provided code snippet, the “minimum” and “maximum” values are set in numeric format. For your scenario, the minimum and maximum property values must be set in the date time format. Since you are trying to set year and month in the HeatMap axis, you need to set “valueType” property as “DateTime” and customize the labels with “labelFormat” and “intervalType” properties in the y-axis. Now, we can render Heatmap chart component as per your requirement. Please find the code snippet for the same below.

 

Code Snippet:

@{

    var monthLabels = Enumerable.Range(1, 12).Select(x => new DateTime(DateTime.Now.Year, x, 1).ToString("MMM")).ToArray();

    var minimum = new DateTime(2012, 1, 1);

    var maximum = new DateTime(2022, 1, 1);

}

<div>

    <ejs-heatmap renderingMode="@DrawType.Auto" theme="Bootstrap5Dark" height="300px" id="readingHistory" dataSource="ReadingHistoryData">

        //..

        <e-heatmap-yaxis minimum='minimum' maximum='maximum' valueType='DateTime' intervalType="Years" labelFormat="yyyy"></e-heatmap-yaxis>

        //..

       //..

    </ejs-heatmap>

</div>

 

You can find the modified sample from the below link.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/HeatMapCore574142407

 

 

NoteIf this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

 

Regards,

Indumathi R.


Marked as answer

PA Pascal replied to Indumathi Ravi December 30, 2022 06:22 PM UTC

Thank you Indumathi Ravi, that worked, but there's still one issue: The December is not rendered. Do you have any idea how to fix this? According to the generated EJ2 JavaScript, the heatmap's X-Axis' labels are known to be "Jan"-"Dez"*. But the generated SVG doesn't show the December label, as well as it does not appear in your picture.


*X-Axis settings (generated by Syncfusion)
"xAxis": { "increment": 1.0, "labelRotation": 0.0, "labels": [ "Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez" ], "maxLabelLength": 35.0 }




PA Pascal December 31, 2022 02:12 AM UTC

Ah, I see what the problem was, the dataSource didin't had 12 arrays so dec wasn't shown, I misunderstooed how the array had to be, I thought that each array is a year, but each array represents a column, not a row. Okay, then I get it.


Again, thank you very much for hinting me to the problem, Indumathi Ravi, and I'll hope that you'll have a good start in the new year.



IR Indumathi Ravi Syncfusion Team January 4, 2023 04:16 AM UTC

Hi Pascal,


We are glad to know that the issue is resolved. Please let us know if you need any further assistance.


Loader.
Up arrow icon