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

Can't access heat map selected cell's values?

Hello, I've spent many hours trying to get the heat map selected cell to work. Here's how I have it setup. I've tried calling methods on the heatmap, trying to access fields of args, trying different events in the heatmap object such as cellClicked and have went through all the documentation and forum posts on the internet and nothing works. I got this same exact situation to work on treeview and grid, although they had more documentation to help me.

var heatmap = new ej.heatmap.HeatMap({
cellSettings: {
showLabel: true,
},
xAxis: {
labels: ['0', '500', '1000', '1500', '2000',
'2500', '3000', '3500', '4000']
},
yAxis: {
labels: ['0', '1000', '2000', '3000', '4000', '5000'],
},
dataSource: heatmapData,
legendSettings: {
position: 'Right',
showLabel: true,
height: "150"
},
showTooltip:true,
allowSelection: true,
enableMultiSelect: false,
cellSelected: heatmapClicked
}, '#heatmap');
function heatmapClicked(args) {
console.log(args.Value);
}

1 Reply

IR Indumathi Ravi Syncfusion Team April 4, 2023 02:00 PM UTC

Hi Zachary,


When we analyzed the provided code snippet, we came to know that the “Value” property from the event argument of the “cellSelected” event is incorrect. You can access the selected cell values by using the property “args.data[0].value” in the event argument of “cellSelected” event. You can access the clicked cell value by using the “args.value” property in the “cellClick” event in the HeatMap component  Please find the code snippet for the same below.


Code Snippet:

var heatmap = new ej.heatmap.HeatMap({

  //..

  //..

  cellSelected: heatmapClicked,

  cellClick: heatmapCellClicked,

});

heatmap.appendTo('#container');

 

function heatmapClicked(args) {

  console.log(

    'Selected cell value using cellSelected event = ',

    args.data[0].value

  );

}

 

function heatmapCellClicked(args) {

  console.log('Selected cell value using cellClick event = ', args.value);

}


You can find the sample from the below link.

https://stackblitz.com/edit/yeb7gn-978hts?file=index.js


Please let us know if the above solution meets your requirement.


Loader.
Up arrow icon