CODEWITHSUNDEEP
javascriptd3.jsdc.jscrossfilter
IronWaffleMan
IronWaffleMan

Reputation: 2692

dc.js graph won't show line and y axis values

Working off the example here, I'm using my own dataset in a csv to attempt to display a simple line graph. However, no matter how I create the 'groups' for the lineChart, it won't show any actual line on the graph, nor any y values on the axis. I'm parsing the time correctly because the brush works as expected on the graph and the x axis has the proper time labels.

d3.csv('weatherLogMod.csv', function(data) {
        var parseDate = d3.time.format("%Y/%m/%d %H:%M");

        data.forEach(function(d) {
            d.absHumidity = ((6.112 * Math.exp((17.67 * +d.Temperature)/(+d.Temperature + 243.5)) * 2.1674 * +d.Humidity.replace(/[",%]/g, ''))/(273.15 + +d.Temperature));
            d.date = parseDate.parse(d.Time);
            d.warmth = +d.Temperature;
        });

        var instance = crossfilter(data);

        var dateDim = instance.dimension(function(d) { return d.Time; });
        var tempGroup = dateDim.group().reduceSum(function(d) {return d.warmth;});
        var minDate = dateDim.bottom(1)[0].date;
        var maxDate = dateDim.top(1)[0].date;

        var tempChart = dc.lineChart("#chart-line-hitsperday"); 
        tempChart
            .width(500).height(200)
            .dimension(dateDim)
            .group(tempGroup)
            .x(d3.time.scale().domain([minDate,maxDate])); 

        dc.renderAll();
    });

I can't find what I'm doing wrong; in the console, doing tempGroup.all() gives me an array full of temperature-date value:keys, so it seems like it should be working? Here's a screenshot of my problem.

Upvotes: 0

Views: 693

Answers (1)

IronWaffleMan
IronWaffleMan

Reputation: 2692

After some trial and error I figured it out; 

var dateDim = instance.dimension(function(d) { return d.Time; });

should be:

var dateDim = instance.dimension(function(d) { return d.date; });

and it works fine.

Upvotes: 1

Related Questions