How to populate an xAxis with DateTime valueType through JSON cell dataSource?

[Kelly Stuard]

Trying to make something similar to GitHub's contribution heat map. The documentation has a great demo here:

https://ej2.syncfusion.com/angular/documentation/heatmap-chart/axis#limiting-labels-in-date-time-axis

It does exactly what I want, except it's populated through Array Table Binding and I'd like to adapt it to JSON Cell Binding.

I attempted to do so, here:

https://stackblitz.com/edit/angular-jumcd9-4wjxkf?file=app.component.html,app.component.ts

It only shows data points that are on the same weekday as the first data point. Removing the `increment: 7` that is the cause of it results in the data points cascading to the right, instead of being stacked.

Any guidance you can offer on how to replicate the documented example from one binding type to another? I have complete control on how the dataSource JSON is produced.

[Kelly Stuard]

After posting this, I found a solution; however poor.

https://stackblitz.com/edit/angular-jumcd9-3xhtwe?file=app.component.html,app.component.ts

Setting the date of each data point to the day of the week of the first data point in the list makes it "look" correct. Will have to figure out some way to massage the actual data into this format.

[Indumathi Ravi]

Hi Kelly,

When we set the JSON data in the HeatMap component for the DateTime axis, we are facing an issue in mapping the data with the x-axis using “minimum” and “maximum” properties. However, we have considered this as a defect and logged a defect report for the same. The fix will be included in our weekly patch release, which is expected to be available by the end of May 2023. You can track the status of the bug using below feedback link.

https://www.syncfusion.com/feedback/43532

[Indumathi Ravi]

Hi Kelly,

We have included the fix in this version(21.2.8). Please update the version of “ej2-heatmap” and “ej2-angular-heatmap” packages in your application to resolve the reported issue. Please find the package links below.

https://www.npmjs.com/package/@syncfusion/ej2-heatmap
https://www.npmjs.com/package/@syncfusion/ej2-angular-heatmap

Meanwhile, we can achieve your scenario of displaying the requested data from the data source by setting “minimum” and “maximum” properties in the x-axis to demonstrate the same and it can be found from the below link.

https://stackblitz.com/edit/angular-tjpgkv?file=src%2Fapp.component.html,src%2Fapp.component.ts

Please let us know if you need any further assistance.