Reputation: 141
I have been trying to implement heatmap calendar in DC.js following this - reference
Below are the code details -
var chartExample = {
initChart : function(experiments) {
console.log(experiments);
var ndx = crossfilter(experiments), chart = dc.heatMap("#test"), runDim = ndx
.dimension(function(d) {
//console.log("dim " + d.Run + " " + d.Expt);
return [ +d.Run, +d.Expt ];
}), runGroup = runDim.group().reduceSum(function(d) {
//console.log("speed " + d.Speed)
return +d.Speed;
});
chart.width(45 * 20 + 80).height(45 * 5 + 40).dimension(runDim).group(
runGroup).keyAccessor(function(d) {
return +d.key[0];
}).valueAccessor(function(d) {
return +d.key[1];
}).colorAccessor(function(d) {
return +d.value;
}).title(
function(d) {
return "Run: " + d.key[0] + "\n" + "Expt: " + d.key[1]
+ "\n" + "Speed: " + (d.value) + " km/s";
}).colors(
[ "#ffffd9", "#edf8b1", "#c7e9b4", "#7fcdbb", "#41b6c4",
"#1d91c0", "#225ea8", "#253494", "#081d58" ])
.calculateColorDomain();
chart.render();
},
initData : function() {
var data = [ {
Expt : 1,
Run : 1,
date :28/01/15,
Speed : 1233,
}, {
Expt : 1,
Run : 2,
date :16/02/15,
Speed : 150,
}, {
Expt : 1,
Run : 3,
date :18/03/15,
Speed : 850,
}, {
Expt : 3,
Run : 4,
date :13/04/15,
Speed : 852,
}, {
Expt : 1,
Run : 5,
date :23/05/15,
Speed : 1000,
} ];
chartExample.initChart(data);
}
};
chartExample.initData();
I want to display the calendar heatmap in the similar format as in - d3 js calendar heatmap but unable to parse the months and date and show them as labels. I am just a beginner in dc.js. Can anyone please guide regarding this. Any help would be appreciated. Thankyou
Upvotes: 1
Views: 203