dc.js linechart not showing anything

Question

I am using dc.lineChart to generate a line chart to show frequenct VS time. The following is my code

var freqchart=dc.lineChart("#chart1");
var ndx=crossfilter(data);
var countByTime=ndx.dimension(function (d) {

                return d.time;

        });

        var dateformat=d3.time.format("%m-%d-%Y");
        var freqbyTimeGroup = countByTime.group()
                .reduceCount(function(d) { return d.time; });
    freqchart.width(400).height(200).transitionDuration(500)
        .dimension(countByTime).group(freqbyTimeGroup)
        .elasticY(true).x(
                d3.time.scale().domain([d3.min(data,function(d){return d.time}),d3.max(data,function(d){return d.time})])).on("filtered", onFilt).yAxisLabel("Frequency").xAxisLabel('Time');

But I am getting the following blank thing without any graph. enter image description here Why can't I view the graph. What sort of change needed in my graph. I wan to show total events in a particular time period. There are many detectors giving response at the same time. I want to show the count of these detectors at a particular time.

Can you create a fiddle? It's hard to troubleshoot without a simple self contained example — Gordon
The first thing to check is that your group is returning the data your expect and not NaNs etc — Gordon
Probably my group is returning NaNs. But why does it happen? I am confused what change is needed. — user4556747
Can you see this link and help me to proceed. jsfiddle.net/y18LkwLt — user4556747
I have not added external resource for dc.js and d3.js in the jsfiddle — user4556747

Gordon Gordon · Accepted Answer · 2015-04-09T16:50:19

I made a number of changes to your fiddle and got it to work.

Here is my fork: http://jsfiddle.net/gordonwoodhull/6e67uzfn/11/

Some of the changes I made:

fixed the dates, which had invalid syntax. (Made up my own because I wasn't sure what you meant there.)
make a pass over the data to parse the dates using dateformat.parse()
call chart.render()
removed the argument to group.reduceCount(), which does not take any arguments
(probably the clue you were looking for) call .xUnits(d3.time.days) - this call is required so that dc.js knows what ticks to create on the x axis.

You will want to match the granularity of your xUnits with the granularity you use for date bins. You specify the bin granularity when you define the dimension or group, e.g. if you want to bin by days,

    var countByTime = data.dimension(function(d) { return d3.time.day(d.time); });

Otherwise it will use the exact time values, which are down to the millisecond and might not bin up at all.

Hope this helps!

dc.js linechart not showing anything

1 Answers