Cal-HeatMap - How to format date and value in subDomainText cell

Question

I'm trying to include both Date and Value in the same cell using Cal-HeatMap

Here is a fiddle example of what I'm trying to do ....

[https://jsfiddle.net/paulrollings/6L36ajhn/12/][2]

Any advice help greatly appreciated. Thanks Paul

Your jsFiddle has the date and value in the cell. Are you asking how to put them on separate lines? — Mark, Jul 12 '15 at 17:29
Yes that's what I would like to do. Have date and then carriage return and value below all within the same cell. Have tried date + "\r\n" + val also
&013; / — Paul ROLLINGS, Jul 12 '15 at 18:17
I had a quick look. It seems that the text is entered as an SVG text element (in a group in the rect). Line breaks in SVG text are not fun, see e.g. here: http://stackoverflow.com/questions/16701522/how-to-linebreak-an-svg-text-within-javascript ... so I guess your hands are pretty tied. You could fork the repo or file an issue. But first I'd recommend some more research :) Good luck (\n is javascript,
a html tag...) — Pinguin Dirk, Jul 12 '15 at 19:22

score 3 · Accepted Answer · answered Jul 12 '15 at 23:58

You could hack it in after CalHeatMap renders:

// wrap in timeout to let map render
setTimeout(function(){
  var t = d3.selectAll('.subdomain-text') // find all the text blocks
    .text(null); // blank them out
  t.append('tspan')
    .text(function(d){
      return new Date(d.t).getDate(); //append tspan with date
    })
    .attr('x', function(d){
      return d3.select(this.parentNode).attr('x'); // steal parent x value so it stays in place
    });
  t.append('tspan')
    .text(function(d){
      return "€" + d.v; //append tspan with value
    })
    .attr('dy','1.2em')
    .attr('x', function(d){
      return d3.select(this.parentNode).attr('x'); // steal parent x value so it stays in place
    });
}, 100);

Updated fiddle here.

enter image description here

Cal-HeatMap - How to format date and value in subDomainText cell

1 Answers1