Related
Attached is an image of the problem I'm currently having.
Attached is an example of the issue manually created with JSFiddle
https://jsfiddle.net/ekjrLsz2/
My goal is to have each of the blocks be next to each other without all the space in-between like the default demos for the heatmap show.
I can get it to work correctly if the data is going 1 by 1, for example; 1,2,3,4,5,6
But if the data is going 5,10,15,20, etc... then you get what you see in my attached image.
So to be more clear the X direction is going 1 by 1 in my demo image and shows without spacing, the Y direction however has the large spacing since the data does not have numbers 21,22,23,24 or the space inbetween every 5 so to speak.
Below is the code I use to generate the chart.
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
Highcharts.chart('heatmap-container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Report Data'
},
xAxis: {
//categories: ['1%', '2%', '3%', '4%', '5%', '6%', '7%', '8%', '9%', '10%'],
title: {text:$('#x-values').val()},
//showEmpty:true,
},
yAxis: {
categories: ['5', '10', '15', '20', '25'],
title: {text:$('#y-values').val()},
reversed: false,
//visible: true,
//showEmpty:true,
},
colorAxis: {
max: goodColorVal,
min: badColorVal,
reversed: false,
tickInterval: 1,
//min: -150,
//minColor: '#FFFFFF',
//maxColor: '#00FF00',//Highcharts.getOptions().colors[4]
stops: [
[0.0,'#FF0000'],
[0.5,'#FFFFFF'],
[1.0,"#00FF00"]]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280,
reversed:true
},
tooltip: {
headerFormat: '',
pointFormat: `<b style="text-transform:capitalize;">${$("#x-values option:selected").text()}</b>:{point.x:,.2f} - <b style="text-transform:capitalize;">${$("#y-values option:selected").text()}</b>:{point.y:,.2f} - <b style="text-transform:capitalize;">${$("#z-values option:selected").text()}</b>:{point.value:,.2f}`
// 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: 'Report Data For Input 1',
borderWidth: 1,
//data: [[0, 0, 10], [0, 1, 19], [0, 2, 9], [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]],
data: arraydata, //[[0,0,-87],[1,0,22],[2,0,33],[3,0,55]],
dataLabels: {
enabled: false,
color: '#000000'
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
}
}
}]
}
});
I have tried pointInterval and tickInterval with no luck so far.
The simplest way to have your points next to each other (without any spaces) is to give them x attributes without skipping any number, e.g 1,2,3,4...
Why don't you try to do it this way?
Demo:
https://jsfiddle.net/BlackLabel/39vx468s/
To skip the empty spaces between points you can use breaks functionality.
API references:
https://api.highcharts.com/highcharts/xAxis.breaks
Demo:
https://jsfiddle.net/BlackLabel/et4kryvz/
xAxis: {
breaks: [{
from: 0.5,
to: 1.5,
breakSize: 0
}]
}
There is also another solution, which uses colsize and rowsize properties. Thanks to that you can avoid using the breaks altogether this way and it even works with floating-point data.
Demo: https://jsfiddle.net/87tL3ogh/1/
As you can see, the first row and the last column are separated from the rest by a larger space.
There is also a fine horizontal grey line under the first row.
How can I achieve that result ?
Fiddle
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
marginLeft: 300,
marginRight: 170,
plotBorderWidth: 0,
},
plotOptions: {
series: {},
heatmap: {
// shared options for all heatmap series
borderColor: '#ffffff',
borderWidth: 100
}
},
title: {
text: ''
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov'],
opposite: true,
},
yAxis: {
categories: ['Human Resources 1', 'Human Resources 2', 'Human Resources 3', 'Human Resources 4', 'Human Resources'],
title: null,
labels: {
align: 'left',
x: -200
},
},
colorAxis: {
dataClasses: [{
from: -1,
to: 0,
color: '#cccccc',
name: 'N/A'
}, {
from: 0,
to: 10,
color: '#4cd093ff',
name: 'Very Low Impact'
}, {
from: 0,
to: 20,
color: '#b4e788ff',
name: 'Low Impact'
}, {
from: 20,
to: 50,
color: '#fff89dff',
name: 'Medium Impact'
}, {
from: 50,
to: 100,
color: '#ffa271ff',
name: 'High Impact'
}, {
from: 100,
color: '#f46160ff',
name: 'Very High Impact'
}]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
squareSymbol: false,
itemMarginTop: 30,
symbolRadius: 0,
symbolHeight: 40,
symbolWidth: 5,
useHTML: true,
itemStyle: {
"color": "#333333",
"cursor": "pointer",
"fontSize": "12px",
"textOverflow": "ellipsis"
}
},
tooltip: {
formatter: function() {
return '<b>In ' + this.series.xAxis.categories[this.point.x] + '</b> impact of <br><b>' +
this.point.value + '</b> for <b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Sales per employee',
// rowsize: 0.5,
borderWidth: 2,
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]
],
dataLabels: {
enabled: false,
color: '#000000'
}
}, ]
});
#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
<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>
<div id="container"></div>
You can achieve this result using xAxis.breaks, yAxis.plotLines and Highcharts.SVGRenderer to render a rectangle that covers the break on the xAxis. Check the demo and code posted below.
Code:
chart: {
events: {
render: function() {
var chart = this,
xAxis = chart.xAxis[0],
x = xAxis.toPixels(8.5),
y = chart.plotTop,
width = (xAxis.toPixels(1) - xAxis.toPixels(0.5)) * 0.6,
element;
if (chart.customElements) {
chart.customElements.forEach(function(elem) {
elem.destroy();
});
}
chart.customElements = [];
element = chart.renderer.rect(x, y, width, chart.plotHeight).attr({
fill: '#fff',
zIndex: 100
}).add();
chart.customElements.push(element);
}
}
},
xAxis: {
breaks: [{
breakSize: 0.6,
from: 8.5,
to: 9
}]
},
yAxis: {
plotLines: [{
value: 3.5,
width: 5,
color: '#fff',
zIndex: 100
}, {
value: 3.5,
width: 1,
color: '#ccc',
zIndex: 101
}]
}
Demo:
https://jsfiddle.net/BlackLabel/16e3o8jk/
API reference:
https://api.highcharts.com/highcharts/xAxis.breaks
https://api.highcharts.com/highcharts/yAxis.plotLines
https://api.highcharts.com/highcharts/chart.events.render
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
I've a heat map using Highcharts where I'm facing some issues with text clippings.
When I add a label on the colorAxis the text gets clipped:
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0],
labels: {
format: '{value} test test test'
},
}
I've only added the colorAxis.labels.format property.
See my example here:
http://jsfiddle.net/dennismadsen/7sp8ddpq/1/
It's based/forked on this official Highchart sample:
http://jsfiddle.net/highcharts/4aqhB/
HighCharts does have its quirks in the legend layout. You have to explicitly set the width, i.e.
legend: {
...
width: 140,
...
},
Found a way to make it dynamic, based on a post by TorsteinHonsi on GitHub. The code basically measures the width of the label and redraws the chart. See if it suits your needs.
$(function () {
var leg = 'Whatever';
var aChart = new Highcharts.Chart({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 40,
renderTo: 'container'
},
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],
labels: {
format: '{value} ' + leg,
style: {
textOverflow: "clip",
overflow: "visible",
whiteSpace: "nowrap"
}
},
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 320
},
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>';
}
},
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]],
dataLabels: {
enabled: true,
color: 'black',
style: {
textShadow: 'none'
}
}
}]
});
Highcharts.Legend.prototype.update = function (options) {
this.options = Highcharts.merge(this.options, options);
this.chart.isDirtyLegend = true;
this.chart.isDirtyBox = true;
this.chart.redraw();
};
aChart.legend.update({
width: 50 + $('.highcharts-axis-labels tspan').outerWidth()
});
});
I am working with high charts, I have a set of controls on a web page that allows the user to select months and locations. The issue is if they select a location that has no data. So lets say they select January and Hawaii but there is no data for Hawaii in January. Nothing will be displayed at all, but I would like the axis to appear along with the labels.
NOTE: I am trying to create a heatmap so I don't want to see the minimun color when there is no data.
A value of null seems to work. You can change your tooltip to not display if the value is null too: http://jsfiddle.net/SheldonNeilson/95um4x0q/1/
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
$(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: Highcharts.getOptions().colors[0],
maxColor: '#FFFFFF'
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
if(this.point.value == null){
return 'No data' ;
}else{
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>';
}
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, null], [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]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
});
I'm using Jquery Flot to plot my charts, and now I want to pass a specific one to Highchart.
This is my Chart using Jquery Flot
var data1 = [
[gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
[gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 15]];
var data2 = [
[gd(2013, 1, 1), 3], [gd(2013, 2, 1), 5], [gd(2013, 3, 1), 3], [gd(2013, 4, 1), 11],
[gd(2013, 5, 5), 4], [gd(2013, 6, 1), 13], [gd(2013, 7, 1), 9], [gd(2013, 8, 1), 5],
[gd(2013, 9, 1), 2], [gd(2013, 10, 1), 3], [gd(2013, 11, 1), 2], [gd(2013, 12, 1), 1]];
var data2014 = {
label: "Receitas 2014",
data: data1,
xaxis: 1
};
var data2013 = {
label: "Receitas 2013",
data: data2,
xaxis: 2
};
$("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
data2014, data2013
],
{
series: {
lines: {
show: false,
fill: true
},
splines: {
show: true,
tension: 0.4,
lineWidth: 1,
fill: 0.4
},
points: {
radius: 2,
show: true
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#d5d5d5",
borderWidth: 1,
color: '#d5d5d5'
},
colors: ["#1ab394", "#464f88"],
xaxes: [{
mode: "time",
tickSize: [1, "month"],
tickLength: null,
colors: ["#838383", "#838383"],
timeformat: "%b",
max: (new Date("2014/12/1")).getTime()
}, {
ticks: false
}],
yaxis: {
ticks: 4
},
legend: {
backgroundOpacity: 0.5,
noColumns: 1,
position: "nw",
color: "#000000 !important",
}
}
);
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
I'm trying convert this chart, to a highchart but I'm a little bit confusing because in highchart a spline is a type while in Jquery Flot its an option.
How far I did
var data1 = [
[gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
[gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 15]];
var data2 = [
[gd(2013, 1, 1), 3], [gd(2013, 2, 1), 5], [gd(2013, 3, 1), 3], [gd(2013, 4, 1), 11],
[gd(2013, 5, 5), 4], [gd(2013, 6, 1), 13], [gd(2013, 7, 1), 9], [gd(2013, 8, 1), 5],
[gd(2013, 9, 1), 2], [gd(2013, 10, 1), 3], [gd(2013, 11, 1), 2], [gd(2013, 12, 1), 1]];
$('#flot-dashboard-chart').highcharts('StockChart', {
rangeSelector: {
inputEnabled: $('#flot-dashboard-chart').width() > 480,
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
colors: ['#1ab394'],
plotOptions: {
area: {
color: '#1ab394',
fillColor: '#1ab394'
}
},
series: [{
name: 'AAPL Stock Price',
data: data1,
type: 'areaspline',
threshold: null,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}]
});
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
But is very different the result. I'm reading the API for more information, but some options are in different places.
Can someone help me plot a graph using highchart ?
UPDATE
I'm getting close
CODE
$(function () {
var data1 = [
[gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
[gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 15]];
var data2 = [
[gd(2013, 1, 1), 3], [gd(2013, 2, 1), 5], [gd(2013, 3, 1), 3], [gd(2013, 4, 1), 11],
[gd(2013, 5, 5), 4], [gd(2013, 6, 1), 13], [gd(2013, 7, 1), 9], [gd(2013, 8, 1), 5],
[gd(2013, 9, 1), 2], [gd(2013, 10, 1), 3], [gd(2013, 11, 1), 2], [gd(2013, 12, 1), 1]];
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Average fruit consumption during one week'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
colors: ['#1ab394', '#464f88'],
plotOptions: {
areaspline: {
fillOpacity: 0.4
}
},
series: [{
name: 'Receitas 2014',
data: [[1, 4], [2, 8], [3, 4], [4, 10], [5, 4], [6, 16], [7, 15]]
}, {
name: 'Receitas 2013',
data: [[1, 3], [2, 5], [3, 3], [4, 11], [5, 4], [6, 13], [7, 9], [8, 5], [9, 2], [10, 3], [11, 2], [12, 1]]
}]
});
});
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
Why don't you just set the categories of the xAxis to an array containing the months as follows :
xAxis: {
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
}
And then set your data using simple arrays :
var data1 = [4,8,4,10,4,16,15];
var data2 = [3,5,3,11,4,13,9,5,2,3,2,1];
Maybe that's not what you need, but take a look at the result and tell me what you think: http://jsfiddle.net/yohanrobert/T3Dpf/1/
EDIT
If you still want to use dates within your data arrays, what you could do is to create a xAxis with type set to 'datetime' for the first series like this:
{
type: 'datetime',
dateTimeLabelFormats: {
month: '%b' // Display months as labels ( 'Jan', 'Feb', ...)
},
showLastLabel: false, // If not set to false, displays 'Jan' at the end of the xAxis
tickInterval: 24 * 3600 * 1000 * 30.4 // Displays tick for each month
}
and then add one hidden xAxis for each new series:
{
type: 'datetime',
labels: {
enabled: false // Remove the label
},
tickWidth: 0, // Remove the ticks
lineWidth: 0 // Remove the axis line
}
Finally, you will need to set the extremes for the these series to go from January to December.
Here is an example with three series: http://jsfiddle.net/yohanrobert/T3Dpf/3/
This might not be the easiest way though.