Heatmap values not showing


#1

I am trying to plot a heatmap as below. The data passed to the heatmap looks correct but when I put the cursor on the heatmap it doesn’t show me the value of the color (see figure below). Am I missing something?

const timeChartDimension = crossfilter.dimension(['c5_datetime','loc'])
const timeChartGroup = timeChartDimension.group().reduceAvg("speed")
heatChart = dc
      .heatMap(parent)
      .width(w)
      .height(h)
      .dimension(timeChartDimension)
      .group(timeChartGroup)
      .keyAccessor(function(d){return d.key0[0].value})
      .valueAccessor(function(d){return d.key1})
      .colorAccessor(function(d){return Math.floor(d.val)})   
      .yBorderRadius(0)
      .xBorderRadius(0)
      .binParams({
        timeBin:'day',
        // numBins: 288, // 288 * 5 = number of minutes in a day
        binBounds: [timeChartBounds.minimum, timeChartBounds.maximum]
        
      })

image


#2

Hi. Can you log your keys here and see if something is undefined, empty or null?
.valueAccessor(function(d){console.log(d.key1); return d.key1})


#3

for the key1 this is what i get. I don’t see any null or empty values.

image

for key0 this is what I get

image


#4

Can you try to add a formatter and log what’s going in it?

dc
.heatMap(parent)
.valueFormatter((value, key) => {console.log(value, key); return value})


#6

The .valueFormatter returns nothing. Not sure if I am doing it right. see below.

heatChart = dc
  .heatMap(parent)
  .width(w)
  .height(h)
  .dimension(timeChartDimension)
  .group(timeChartGroup)
  .valueFormatter((value, key) => {console.log(value, key); return value})
  .keyAccessor(function(d){return d.key0[1].value})
  .valueAccessor(function(d){return d.key1})
  .colorAccessor(function(d){return Math.floor(d.val)})  
  .yBorderRadius(0)
  .xBorderRadius(0)