user4556747
user4556747

Reputation:

dc.js linechart not showing anything

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.

Upvotes: 2

Views: 1441

Answers (1)

Gordon
Gordon

Reputation: 20120

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:

  1. fixed the dates, which had invalid syntax. (Made up my own because I wasn't sure what you meant there.)
  2. make a pass over the data to parse the dates using dateformat.parse()
  3. call chart.render()
  4. removed the argument to group.reduceCount(), which does not take any arguments
  5. (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!

Upvotes: 4

Related Questions