Heat map with date time as x axis

[Mathangi 0725]

Hi ,

i want to create heat map and i am facing weird issue when doing that . All my points show the same color though they have different values . Can you please help me in fixing the issue ? i am letting the user choose min max and median color and i donot want to set default value to min and max. instead i want highcharts to do that based on the values . Here is my chart options


var heatMapOptions = {
chart: {
type: 'heatmap',
//marginTop: 0,
//marginBottom: 0,
//marginLeft: 0,
//marginRight: 0,
//borderWidth: 0,
//plotBorderWidth: 0,
//backgroundColor: '#e8e8e8',
},
tooltip: {
borderWidth: 0,
borderRadius: 0,
backgroundColor: "rgba(255,255,255,0)",
shadow: false,
useHTML: true,
formatter: function () {
return ("<span><b>End Time : </b>" + Highcharts.dateFormat('%m/%d/%Y %l:%M:%S %p', this.point.x) + " <br/> <b> Power Generated :</b>" + this.point.value +
" <br/> <b> Device Name :</b>" + this.point.name + "</span > ");
}
},
plotOptions: {
heatmap: {
// Markers were turned off in my case in plotOptions.series, so heatmap also used it and the colors were not rendered
marker: { enabled: true }
}
},
yAxis: {
categories: [],
// className: 'highcharts-heatmap-yaxis-grid',
//alternateGridColor: '',
labels: {
enabled: true


},
tickLength: 0,
gridLineWidth: 2,
// minPadding: 0,
//maxPadding: 0,
//startOnTick: false,
//endOnTick: false,
//tickWidth: 1,
//min: 0,
//max: 15,
reversed: true

},
series: [{
// specific options for this series instance
borderWidth: 5,
colsize: 24 * 36e5,
rowsize: 1,
keys: ['x', 'y', 'value'],
dataLabels: { // Skip showing data labels for heat map
enabled: false,
color: '#000000'
},
data: []
//className: 'highcharts-heatmap-custom-series'
}],
colorAxis: {
//stops: [
// [0, minColor], //'#E6532E'],
// [0.41, medianColor], //'#fffbbc'],
// [0.71, maxColor] //'#9DFF9D']
//],
//stops: [
// [0, '#3060cf'],
// [0.5, '#fffbbc'],
// [0.9, '#c4463a'],
// [1, '#c4463a']
//],
labels: {
format: '{value} '
},
startOnTick: false,
endOnTick: false,
className: 'highcharts-heatmap-coloraxis',
min: null,
max:null
},


legend: {
enabled: true,
align: 'right',
layout: 'vertical',
//verticalAlign: 'bottom',
//margin: 0,
//y: 16,
//x: 10,
//borderWidth: 0
},
xAxis: {
tickPixelInterval: 150,
type: 'datetime',

gridLineWidth: 1,
minorGridLineColor: '#E0E0E0',
minorGridLineWidth: 2,
minorTickLength: 0,
minorTickInterval: 24 * 3600 * 1000 ,// every day
lineWidth: 0,
showFirstLabel: true,
showLastLabel: true,
tickmarkPlacement: 'on',
labels: {
staggerLines: 1,
overflow: 'justify',
enabled: true
},
dateTimeLabelFormats: { // don't display the dummy year
millisecond: '%b %e %l:%M:%S %p',
second: '%l:%M:%S %p',
minute: '%l:%M %p',
hour: '%l:%M %p',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%Y',
year: '%Y'
}
}

};

return heatMapOptions;

[dominik.c]

Hello Mathangi 0725!

We appreciate you reaching out to us!

I put your code into an online editor and added some sample data and it seems to work fine. The points have different colors depending on their values. Could you verify it and tell me if it works OK for you?

Demo: https://jsfiddle.net/BlackLabel/203uye58/

Best regards!

[Mathangi 0725]

Thanks Dominic , i will definitely try and update you and i realized it was because of my values which was causing this issue .

[dominik.c]

Hi again!

All right, in case of any further questions feel free to reach me.

Regards!

[Mathangi 0725]

Hi i am back again with a query. i want to add categories to y axis which i was able to achieve however categories are string values and it is not showing up on heat map instead only y values are showing . Not sure how to overcome this. is there a way to pass string value in place of "y" point in data . we can use above example itself example {"4":"AAA","5":"BBB"} . Y axis shows 4 and 5 . however i want to show "AAA" & BBB. Thanks

[Mathangi 0725]

i have x axis as datetime and tried to add y axis as categories. however it is not working as expected

[dominik.c]

Hi again!

Unfortunately, according to our API colorAxis can only be linear or logarithmic. It can't be a categories axis.
Link: https://api.highcharts.com/highcharts/colorAxis.type

However, you can use formatter function to decide what labels should be displayed on the axis. For example like that: https://jsfiddle.net/BlackLabel/y91orbp0/

Best regards!

[Mathangi 0725]

Hi , I did a small change in the way i want the graph to get displayed . however i face a weird issue when i pass json string as data instead of an array
Fr eg if i pass data as data: [
["SMA 2200 2",1629248400000,6.24],
["SMA 2200 2",1629252000000,0.00],
["SMA 2200 2",1629255600000,0.00],
["SMA 2200 2",1629259200000,0.00],
["SMA 2200 2",1629262800000,0.00],
["SMA 2200 2",1629266400000,0.00],
["SMA 2200 3",1629183600000,0.00],
["SMA 2200 3",1629187200000,0.00],
["SMA 2200 3",1629190800000,0.00],
["SMA 2200 3",1629194400000,0.00],
["SMA 2200 3",1629198000000,0.00],
["SMA 2200 3",1629201600000,0.00],
["SMA 2200 3",1629205200000,6.26], it works and shows color code but when i try to pass
{x:"SMA 2200 2",y:1629248400000,value:6.24},
{x:"SMA 2200 2",y:1629252000000,value:0.00},
{x:"SMA 2200 2",y:1629255600000,value:0.00},
{x:"SMA 2200 2",y:1629259200000,value:0.00},
{x:"SMA 2200 2",y:1629262800000,value:0.00},
{x:"SMA 2200 2",y:1629266400000,value:0.00},
{x:"SMA 2200 3",y:1629183600000,value:0.00},
{x:"SMA 2200 3",y:1629187200000,value:0.00},
{x:"SMA 2200 3",y:1629190800000,value:0.00},
{x:"SMA 2200 3",y:1629194400000,value:0.00},
{x:"SMA 2200 3",y:1629198000000,value:0.00},
{x:"SMA 2200 3",y:1629201600000,value:0.00},
{x:"SMA 2200 3",y:1629205200000,value:6.26},
{x:"SMA 2200 3",y:1629208800000,value:158.29},
{x:"SMA 2200 3",y:1629212400000,value:556.34},
{x:"SMA 2200 3",y:1629216000000,value:1100.14},
{x:"SMA 2200 3",y:1629219600000,value:1643.76},
{x:"SMA 2200 3",y:1629223200000,value:2041.78},
{x:"SMA 2200 3",y:1629226800000,value:2187.51},
{x:"SMA 2200 3",y:1629230400000,value:2041.75},
{x:"SMA 2200 3",y:1629234000000,value:1643.70},
{x:"SMA 2200 3",y:1629237600000,value:1099.91},
{x:"SMA 2200 3",y:1629241200000,value:556.16},
{x:"SMA 2200 3",y:1629244800000,value:158.19},
{x:"SMA 2200 3",y:1629248400000,value:6.24},
{x:"SMA 2200 3",y:1629252000000,value:0.00},
{x:"SMA 2200 3",y:1629255600000,value:0.00},
{x:"SMA 2200 3",y:1629259200000,value:0.00},
{x:"SMA 2200 3",y:1629262800000,value:0.00},
{x:"SMA 2200 3",y:1629266400000,value:0.00},
{x:"SMA 2200 4",y:1629183600000,value:0.00},
{x:"SMA 2200 4",y:1629187200000,value:0.00},
{x:"SMA 2200 4",y:1629190800000,value:0.00},
{x:"SMA 2200 4",y:1629194400000,value:0.00},
{x:"SMA 2200 4",y:1629198000000,value:0.00},
{x:"SMA 2200 4",y:1629201600000,value:0.00},
{x:"SMA 2200 4",y:1629205200000,value:6.26},
{x:"SMA 2200 4",y:1629208800000,value:158.29},
{x:"SMA 2200 4",y:1629212400000,value:556.34},
{x:"SMA 2200 4",y:1629216000000,value:1100.14},
{x:"SMA 2200 4",y:1629219600000,value:1643.76},
{x:"SMA 2200 4",y:1629223200000,value:2041.78},
{x:"SMA 2200 4",y:1629226800000,value:2187.51},
{x:"SMA 2200 4",y:1629230400000,value:2041.75},
{x:"SMA 2200 4",y:1629234000000,value:1643.70},
{x:"SMA 2200 4",y:1629237600000,value:1099.91},
{x:"SMA 2200 4",y:1629241200000,value:556.16},
{x:"SMA 2200 4",y:1629244800000,value:158.19},
{x:"SMA 2200 4",y:1629248400000,value:6.24} this is not plotting right . i am unable to figure out where am i doing wrong .

JSFiddle : https://jsfiddle.net/26aoLscb/1/

[dominik.c]

Hi again!

The solution is quite simple. The x value of a point can't be the string, it has to be a number. 0 represents the first category from your array, 1 represents the second category from your array, etc.

Demo: https://jsfiddle.net/BlackLabel/rzmnxq56/

Best regards!

[Mathangi 0725]

Thanks for all your replies . I have a scenario where I have numbers from 1-10 , but I might not choose all the numbers and I am seeing break in heat map because of this . PS numbers will be x axis

[sebastian.h]

Hi Mathangi 0725,

Now I support your issue, could you explain in general terms what you want to achieve?

Best regards.