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.
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
Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.
Regards,
Indumathi R.
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 }
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.
Hi Pascal,
We are glad to know that the issue is resolved. Please let us know if you need any further assistance.