tmroyal / chart.heatmap

A heat map plugin for chart.js

Chart.HeatMap.js (No longer being maintained!)

HeatMap library and plug-in for Chart.js. This library is no longer being maintained.

Thank you to anyone who has expressed interest in this project. It was an early attempt by myself to create a javascript library, but life happened (as it has a tendency to do) immediately after I released this. I have since been far away from the javascript ecosystem (and programming in general), and therefore I no longer (10/9/2019) even have the qualifications to evaluate pull requests. Perhaps one day...

Thank you to all who attempted to contribute to this project, and sorry for not being able to integrate your pull requests.

Better Alternatives

https://github.com/kurkle/chartjs-chart-treemap

https://github.com/kurkle/chartjs-chart-matrix

See also: chartjs/Chart.js#4627

Documentation

Documentation is available here.

Installation

Bower

bower install Chart.HeatMap.js

NPM

npm install chart.heatmap.js

Github

The built distributions are also available in the dst folder in the source repository at Github.

Usage

Ensure that you use the file from the dst directory.

For the standalone version, which requires no dependencies:

<script src="dst/Chart.HeatMap.S.js"></script>

For the plug-in, which requires Chart.js

<script src="Chart.js"></script>
<script src="dst/Chart.HeatMap.js"></script>

License

MIT license

chart.heatmap's Issues

Can the labels be clickable?

Hello,

Thank you for tis plugging is really easy to use. I am trying now to customize a bit, and wanted to know if the labels can be make as a link so it can redirect to a different page?

Thanks

Ivan

Update showLabel option?

Is there a way to update the showLabel attribute to change from false to true (and vice-versa) using a button? Whilst I was able to find the ability to add and remove data from the set, update the heatmap's options isn't clear. Thanks

Raw Github

Shouldn't this be an option for your library? It doesn't seem to be working.

<script src ="https://raw.github.com/tmroyal/Chart.HeatMap/blob/master/dst/Chart.HeatMap.S.min.js"></script>
<canvas id="heatmap" width="800" height="400"></canvas>
					<script>
						var ctx = document.getElementById('heatmap').getContext('2d');
						var newChart = new Chart(ctx).HeatMap(data, options);
						var data = {
							labels = ['0h','1h','2h','3h','4h','5h','6h','7h','8h','9h','10h','11h'],
							datasets = [
							{
								label: 'Monday',
								data: [8, 6, 5, 7, 9, 8, 1, 6, 3, 3, 8, 7]
							},
							{
								label: 'Tuesday',
								data: [6, 8, 5, 6, 5, 5, 7, 0, 0, 3, 0, 7]
							},
							{
								label: 'Wednesday',
								data: [8, 5, 6, 4, 2, 2, 3, 0, 2, 0, 10, 8]
							},
							{
								label: 'Thursday',
								data: [4, 0, 7, 4, 6, 3, 2, 4, 2, 10, 8, 2]
							},
							{
								label: 'Friday',
								data: [1, 0, 0, 7, 0, 4, 1, 3, 4, 5, 1, 10]
							}
						]
						};
					</script>

Heatmap Custom Color per Boxes

We are using the library which we are using for chart.heatmap.S.min.js for Heatmap. All thing we are figured out just need two things.

1. X axis Label
2. Y axis Label
3. Custom Color on each Boxes

Can u suggest a hack to resolve the above issues

Do we have typings available for this library? I need support for Angular 7

Do we have typings available for this library? I need support for Angular 7

Heatmap breaks when rendering colors

Every now and then the function getGradientColor throws an exception.
For example this happens with the following data.

{
	"labels": ["00:00", "00:00"],
	"datasets": [{
		"label": "2018",
		"data": [-4.135, -4.437]
	}]
}

See fiddle

Change label position and rotation

Hello there,

it would be neat to have an option to change the position of the labels, e.g. have the y-axis labels on the right side and the x-axis labels at the top. Furthermore, an option to manually input a value by which labels on the x-axis should rotate would be very helpful as well.

Cheers,
Christian

Error if data is only 0's, 1's, and 2's

If your data is only 0's, 1's, and/or 2's, the chart errors out. See example in this jsfiddle

exception in getGradientColor function

I used this color array:

colors: [
'#6D1600', '#6F1D00', '#722400', '#742C00', '#763500', '#793D00', '#7B4600', '#7D4F00', '#805800', '#826200', '#846C00', '#877600', '#898000',
'#8B8B00', '#858E00', '#7F9000', '#789200', '#719500', '#699700', '#619900', '#599C00', '#519E00', '#48A100', '#3FA300', '#36A500', '#2CA800',
'#23AA00', '#18AC00', '#0EAF00', '#03B100', '#00B307', '#00B612', '#00B81D', '#00BA29', '#00BD35', '#00BF42', '#00C14E', '#00C45B', '#00C669',
'#00C876', '#00CB84', '#00CD92', '#00D0A1', '#00D2AF', '#00D4BE', '#00D7CE', '#00D5D9', '#00C9DB', '#00BEDE', '#00B2E0', '#00A6E2', '#009AE5',
'#008DE7', '#0080E9', '#0073EC', '#0066EE', '#0058F0', '#004AF3', '#003CF5', '#002DF7', '#001EFA', '#000FFC', '#0000FF'],

There was an exception in getGradientColor function when iIndex1 was equal to 65 while the array length is 63.

To fix it by adding this line:
if (iIndex > colors.length - 1) { iIndex = colors.length - 1; }

After this line:
var iIndex = Math.floor(fIndex);

Warning: Plug-in abandoned

I have ceased development on this plugin. Thank you to everyone who expressed an interest. Please see the repository main page for possible alternatives.

Legend Panel

var options = {legend: {
display: false,
position: 'left',
},
};
var ctx = document.getElementById('heatmap').getContext('2d');
var newChart = new Chart(ctx).HeatMap(data, options);

Typescript version

unsupport scaleLabel??

I configured the source as shown below, but I do not see the scaleLabel.

Could you explain it?

var newChart = new Chart(ctx).HeatMap(data, {
responsive: true,
maintainAspectRatio: false,
colors: [
'rgba(255, 255, 255, 1.0)'
,'rgba(0, 128, 0, 1.0)'
]
,scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Wall Time'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'CPU Num'
}
}]
}
});

Change cells space

Hello,
Is it possible to delete the spaces between the cells inside the heatmap?

Thanks.

Update for Chart js 2.0

Update for Chart js 2.0