On-click event display data on heap map in highcharts - express

Question

This image contains details about the number of projects was uploaded by the particular user
I am using heapmap highchart to display project details of a user.
on Y-axis => represents week of the days which ranges from 0 to 6
eg. Mon = 0, Tue= 1,....Sun=6
on X-axis => represents months, which ranges from 0 to 11
eg. Jan = 0, Feb = 1, ... Dec = 11
Data format
X Y Data
[0 ,1 , 3]
Suppose, 3 projects was uploaded by a user on monday in the month of January.
When I click on that 3 on heap map then it should display a pop box,
which should include project name,date and time
eg. Project Name : image recognition
Date : Uploaded on Jan 4,2019
Time : 10:04:00
In this I have hardcoded the data.
https://jsfiddle.net/k9hyfjmL/
This code retrieve data from mysql database and populates on heap map, which indicates number of projects was uploaded by a user.
$(document).on('click', '.click_once', function()
{
$.ajax(
{
url: '/profile/heap_map_data',
type: 'GET',
success: function(response)
{
var chart_data = [];
var skip_1st_data = 1;
var take_Data_upto = 0;
for (var i = 0, len = response.length; i < len; i++)
{ if(skip_1st_data == 1)
{
skip_1st_data = 2;
}
else{
take_Data_upto = take_Data_upto + 1;
chart_data.push(response[i]);
if(take_Data_upto == 31)
{
break;
}
}
}
console.log(chart_data)
Highcharts.chart('heap_map_chart',
{
chart:
{
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1,
},
title:
{
text: 'Project Details'
},
xAxis:
{
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
},
yAxis:
{
categories: ['Mon','Tue','Wed','Thur','Fri','Sat','Sun'],
title: null
},
colorAxis:
{
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend:
{
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip:
{
formatter: function ()
{
return + this.point.value + ' <b> project was uploaded on ' + this.series.xAxis.categories[this.point.x] + ' date, 2019' + '<br /> click to view more' ;
}
},
series: [
{
borderWidth: 1,
data: chart_data,
dataLabels:
{
enabled: true,
color: '#000000'
}
}]
});
},
error : function(jqXHR, textStatus, errorThrown)
{
console.log('jqXHR:');
console.log(jqXHR);
console.log('textStatus:');
console.log(textStatus);
console.log('errorThrown:');
console.log(errorThrown);
alert(errorThrown);
}
});
});

Answer 1

You can use point.events.click function to display some more information in another HTML element:
series: [{
point: {
events: {
click: function() {
document.getElementById('moreInfo').innerText =
'value: ' + this.value;
}
}
},
...
}]
Live demo: https://jsfiddle.net/BlackLabel/p261zg9d/
API Reference: https://api.highcharts.com/highcharts/series.heatmap.point.events.click