Spandana
Spandana

Reputation: 141

Heatmap calendar dc.js

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

Answers (0)

Related Questions