enter image description here
suppose student has many projects and wants to upload that projects on web(system).
Now system wants to track or keep records of number of projects of that particular student.
Now system gives entire details about the projects of student(user)
like when project was uploaded, which day and month.
This data will be shown in the form of chart (like bubble chart).
There are three parameters
1) Y-axis
include week day's only. days will be constant. It'll not change irrespective of data (like input).
2) X-axis
include months only. months will be constant.It'll not change irrespective of data (like input).
3) Z-axis
include data from database.Data could be anything like number of projects(only digits).
Suppose I'm a student(user) and I upload project on Monday in the month of Jan.
Then on bubble chart it should display number of projects I have uploaded on which days of the week and month.
It is similar to GitHub chart where it gives all the details about the of user activities.
I have no idea from where to start.
I have tried various libraries for charts like chart.js,highchart.js....
I have tried this.
https://jsfiddle.net/h0Lm1jgz/
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Heat Map</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
<script>
Highcharts.chart('container',
{
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 '<b>' + this.series.xAxis.categories[this.point.x] + ' ' +
this.point.value + '</b> projecys uploaded on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
borderWidth: 1,
data: [
[0, 0, 10],
[0, 1, 19],
[0, 2, 8],
[0, 3, 24],
[0, 4, 67],
[1, 0, 92],
[1, 6, 58],
[1, 2, 78],
[1, 3, 117],
[1, 4, 48],
[2, 0, 35],
[2, 1, 15],
[2, 2, 123],
[2, 3, 64],
[2, 4, 52],
[3, 0, 72],
[3, 1, 132],
[3, 2, 114],
[3, 3, 19],
[3, 4, 16],
[4, 0, 38],
[4, 1, 5],
[4, 2, 8],
[4, 3, 117],
[4, 4, 115],
[5, 0, 88],
[5, 1, 32],
[5, 2, 12],
[5, 3, 6],
[5, 4, 120],
[6, 0, 13],
[6, 1, 44],
[6, 2, 88],
[6, 3, 98],
[6, 4, 96],
[7, 0, 31],
[7, 1, 1],
[7, 2, 82],
[7, 3, 32],
[7, 4, 30],
[8, 0, 85],
[8, 1, 97],
[8, 2, 123],
[8, 3, 64],
[10, 4, 84],
[9, 0, 47],
[9, 1, 114],
[9, 2, 31],
[9, 3, 48],
[11, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
</script>
</body>
</html>
code
<!-- highcharts library -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="container">
<div class="card">
<div class="card-body">
<div id="heap_map_chart" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;" id="moreInfo">
</div>
</div>
<script>
$(document).ready(function()
{
requestData();
function requestData()
{
$.ajax(
{
url: '/profile/heap_map_data',
type: 'GET',
success: function(response)
{
console.log(response);
var chart_data = [];
var count = 0;
for(var i = 0, len = response.length; i < len; i++)
{
date_value = response[i].event_start_date;
var d = new Date(date_value);
var year = d.getFullYear();
var month = d.getMonth();
var day = d.getDay();
var actualDay = day -1;
chart_data.push([month,actualDay,response[i].user_id]);
}
console.log("chart_data ==",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' ;
}
},
plotOptions:
{
series:
{
cursor: 'pointer',
point:
{
events:
{
click: function ()
{
var year = 2019;
var month = this.x;
var y_axis_day = this.y;
$.ajax(
{
url: '/profile/heap_map_event_details',
type: "POST",
data: {year:year,month:month},
success: function (response)
{
var $message_list= document.getElementById("moreInfo");
$message_list.innerHTML = '';
for(var i = 0, len = response.length; i < len; i++)
{
var date = new Date(response[i].event_start_date);
var day = date.getDay();
var actualDay = day -1;
actualDay = Number(actualDay)
if(y_axis_day == actualDay)
{
$message_list.innerHTML = $message_list.innerHTML + `<div class="card online_user" ><li class="list-group-item link-class" style="cursor: pointer;"> <div class="d-flex bd-highlight"> <div class="img_cont"><img src="../public/image/${response[i].e_imagepath}" class="rounded-circle user_img"><span class="online_icon offline"></span> </div><div class="user_info">${response[i].event_name}}<br/><small style="color:#F44336"><strong>${response[i].event_start_date} message</strong></small><br/><small>Last seen <small>${response[i].event_end_date}</small></small></div> </div> </li></div>`;
}
}
},
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);
}
});
}
}
}
}
},
series: [
{
data: chart_data,
borderWidth: 1,
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);
}
});
}
})
</script>
API
router.get('/profile/heap_map_data', function(req,res)
{
console.log("No. of time being called 1")
const user_id = req.session.user_id;
Posts.findAll()
.then((data)=>
{
res.send(data);
})
.catch((err)=>
{
res.send(err);
})
})
router.post('/profile/heap_map_event_details', function(req,res)
{
const year = Number(req.body.year);
var month = Number(req.body.month);
month = month + 1;
if(month < 10)
{
month = "0"+month;
}
Posts.findAll({where:{event_start_date:{[Op.endsWith]: '%' + "2019-"+month+"-" +'%'}}})
.then((data)=>
{
console.log(data);
res.send(data);
})
.catch((err)=>
{
res.send(err);
})
})
Related
Heatmap shows index in YAxis instead of Category Name. Is this bug in Highchart?
function getPointCategoryName(point, dimension) {
var series = point.series,
isY = dimension === 'y',
axis = series[isY ? 'yAxis' : 'xAxis'];
return axis.categories[point[isY ? 'y' : 'x']];
}
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: [
'Hello-Yaxis-1',
'Hello-Yaxis-2',
'Hello-Yaxis-3',
'Hello-Yaxis-4',
'Hello-Yaxis-5',
'Hello-Yaxis-6',
'Hello-Yaxis-7',
'Hello-Yaxis-8',
'Hello-Yaxis-9',
'Hello-Yaxis-10',
'Hello-Yaxis-11',
'Hello-Yaxis-12',
'Hello-Yaxis-13',
'Hello-Yaxis-14',
'Hello-Yaxis-15',
'Hello-Yaxis-16',
'Hello-Yaxis-17',
'Hello-Yaxis-18',
'Hello-Yaxis-19',
'Hello-Yaxis-20'
],
title: null,
reversed: true
},
accessibility: {
point: {
descriptionFormatter: function (point) {
var ix = point.index + 1,
xName = getPointCategoryName(point, 'x'),
yName = getPointCategoryName(point, 'y'),
val = point.value;
return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
}
}
},
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 '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91],
[9, 19, 999999]
],
dataLabels: {
enabled: true,
color: '#000000'
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
}
}
}]
}
});
.highcharts-figure,
.highcharts-data-table table {
min-width: 360px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Heatmap showing employee data per weekday. Heatmaps are commonly used to
visualize hot spots within data sets, and to show patterns or correlations.
Due to their compact nature, they are often used with large sets of data.
</p>
</figure>
It's not a bug. Notice that the tickInterval in your case is 2, so the next label should be 'Hello-Yaxis-21' which is not defined - that's why Highcharts render the next value as a count number - it is the default behavior.
See: https://jsfiddle.net/BlackLabel/sqw78ugj/
I need to change the name of a state in this map from the Highmaps map collection. Specifically, I need to change the name of the "Distrito Federal" to "CDMX". In the series data it is this point: ['mx-df', 10]. I've searched around for an answer, but am having trouble understanding how to do it. Anyone out there able to help?
Here's a link to a JSFiddle: https://jsfiddle.net/sstoker/81w2revu/
Here's the HTML:
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/mx/mx-all.js"></script>
<div id="container"></div>
Here's the JavaScript:
// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var data = [
['mx-3622', 0],
['mx-bc', 1],
['mx-bs', 2],
['mx-so', 3],
['mx-cl', 4],
['mx-na', 5],
['mx-cm', 6],
['mx-qr', 7],
['mx-mx', 8],
['mx-mo', 9],
['mx-df', 10],
['mx-qt', 11],
['mx-tb', 12],
['mx-cs', 13],
['mx-nl', 14],
['mx-si', 15],
['mx-ch', 16],
['mx-ve', 17],
['mx-za', 18],
['mx-ag', 19],
['mx-ja', 20],
['mx-mi', 21],
['mx-oa', 22],
['mx-pu', 23],
['mx-gr', 24],
['mx-tl', 25],
['mx-tm', 26],
['mx-co', 27],
['mx-yu', 28],
['mx-dg', 29],
['mx-gj', 30],
['mx-sl', 31],
['mx-hg', 32]
];
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'countries/mx/mx-all'
},
title: {
text: 'Highmaps basic demo'
},
subtitle: {
text: 'Source map: Mexico'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name + }'
}
}]
});
And here's the CSS:
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
You can change the displayed information in tooltip and data label by using formatter function:
series: [{
...,
dataLabels: {
enabled: true,
formatter: function() {
if (this.point['hc-key'] === 'mx-df') {
return 'CDMX';
}
return this.point.name;
}
}
}],
tooltip: {
pointFormatter: function() {
if (this['hc-key'] === 'mx-df') {
return 'CDMX: ' + this.value;
}
return this.name + ' ' + this.value;
}
}
Live demo: https://jsfiddle.net/BlackLabel/hry758v3/
API Reference:
https://api.highcharts.com/highmaps/series.map.dataLabels.formatter
https://api.highcharts.com/highmaps/tooltip.pointFormatter
If I apply scrollbar to the heatmap(by highcharts), then on scrolling the data overlaps with the x axis labels.
Is scrollbar not supported on the heatmap as of now?
Please check jsfiddle for better clarity
$(function () {
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
style: {
fontWeight: 'normal'
}
}
}
},
title: {
text: ''
},
xAxis: {
categories: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
categories: ['AE', 'AQ', 'DF', 'CV', 'XC', 'FG'],
title: null,
min: 0,
max: 5,
scrollbar: {
enabled: true
}
},
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 '<b>' + this.series.yAxis.categories[this.point.y] + '</b> has been awarded <b>
' +
this.point.value + ' $
</b> in <br><b> ' + this.series.xAxis.categories[this.point.x] + '</b>';
}
},
exporting: { enabled: false },
credits: {
enabled: false
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 3432], [0, 1, 32323], [0, 2, 23232], [0, 3, 0], [0, 4, 34064], [0, 5, 324], [0, 6, 33], [1, 0, 8292921], [1, 1, 34234234], [1, 2, 150895], [1, 3, 0], [1, 4, 432432], [1, 5, 312274], [1, 6, 532541], [2, 0, 1253412], [2, 1, 145933], [2, 2, 432423], [2, 3, 0], [2, 4, 2722052], [2, 5, 44284], [2, 6, 34324], [3, 0, 35434257], [3, 1, 0], [3, 2, 267659], [3, 3, 0], [3, 4, 4234320], [3, 5, 342340], [3, 6, 0], [4, 0, 1525929], [4, 1, 34073], [4, 2, 139196], [4, 3, 117], [4, 4, 0], [4, 5, 137038], [4, 6, 61571]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
});
Set overflow to none and crop to true:
plotOptions: {
series: {
dataLabels: {
overflow: 'none',
crop: true,
example: http://jsfiddle.net/zwy3vhts/60/
As it is written in the Title i try to render a heatmap charts using highcharts.
I added a click event to change the color of one point when it is clicked.
But not all coordinates have data. As a result the points are not rendering correctly.
if i try to click the top left rectangle from the datalabel and below the wrong point is being colored.
Is this a bug?
Do i have to provide the whole set of coordinates in my data?
Here is a fiddle example of my problem
error example
(this doesn t apply to all scenarios where you don't the whole set of coordinates in your data. for example this works working example)
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
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 '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
plotOptions: {
heatmap: {
cursor: 'pointer',
allowPointSelect: true,
events: {
click: function (event) {
if (event.point.shapeArgs && event.point.shapeArgs.fill == 'red') {
event.point.update({
color: null,
})
} else {
event.point.update({
color: 'red',
})
}
}
},
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 4, 67], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});});
I need to show bar chart with data labels.
When it is 2d, all is fine.
But when I show it as 3d bar the data labels position get wrong.
The code below:
$('#container').highcharts({
chart: {
type: 'bar',
margin: 75,
options3d: {
enabled: true,
alpha: 35,
beta: 15,
depth: 110
}
},
plotOptions: {
bar: {
depth: 40,
stacking: true,
grouping: false,
groupZPadding: 10,
dataLabels:{enabled:true}
}
},
series: [{
data: [1, 2, 4, 3, 2, 4],
stack: 0
}, {
data: [5, 6, 3, 4, 1, 2],
stack: 0
}, {
data: [7, 9, 8, 7, 5, 8],
stack: 1
}]
});
});
demo:
http://jsfiddle.net/4dccq/277/
Thanks in advance
This is a known issue-
https://github.com/highcharts/highcharts/issues/4160
Meanwhile set alpha and beta to 0 and set stacking to false will solve the problem.
It still be 3d - but with no angle and not stack.
This code work for me-
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
margin: 75,
options3d: {
enabled: true,
alpha: 0,
beta: 0,
}
},
plotOptions: {
bar: {
depth: 40,
stacking: false,
grouping: false,
groupZPadding: 0,
dataLabels:{
enabled:true,
format:'<span style="color:{point.color};"> {point.y:.0f}</span>'
}
}
},
series: [{
data: [1, 2, 4, 3, 2, 4],
stack: 1
}, {
data: [5, 6, 3, 4, 1, 2],
stack: 1
}, {
data: [7, 9, 8, 7, 5, 8],
stack: 2
}]
});
});
Did you mean this???
this is nice solution...
Here's a link!
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
margin: 75,
options3d: {
enabled: true,
alpha: 35,
beta: 15,
depth: 110
}
},
plotOptions: {
bar: {
depth: 40,
stacking: true,
grouping: false,
groupZPadding: 10,
dataLabels:{enabled:true}
}
},
series: [{
data: [1, 2, 4, 3, 2, 4],
stack: 0
}, {
data: [5, 6, 3, 4, 1, 2],
stack: 1
}, {
data: [7, 9, 8, 7, 5, 8],
stack: 2
}]
});
});