I am using this library: Dimensional Charting to build some relatively standard charts that need CrossFilter functionality.

I have been following the examples but they aren't working for me.

Here is my code:

var dashData = crossfilter(data.report),
dataByHour = dashData.dimension(function(d){ return d3.time.hour(new Date(d.timestamp))}),
totalByHour = dataByHour.group().reduceSum(function(d) { return d.amount }),

dc.barChart("#graphTimeOverview")
    .width(990) // (optional) define chart width, :default = 200
    .height(250) // (optional) define chart height, :default = 200
    .transitionDuration(500) // (optional) define chart transition duration, :default = 500
    .margins({top: 10, right: 50, bottom: 30, left: 40})
    .dimension(dataByHour) // set dimension
    .group(totalByHour) // set group
    .elasticY(true)
    .centerBar(true)
    .gap(1)
    .x(d3.time.scale().domain([new Date(data.report[0].timestamp), new Date(data.report[(data.report.length - 1)].timestamp)]))
    .round(d3.time.hour.round)
    .xUnits(d3.time.hours)
    .renderHorizontalGridLines(true);

dc.renderAll();

I know the crossfilter data is working correctly, here is a sample of the group:

totalByHour:

[ {key:(new Date(1361746800000)), value:6170.17},
  {key:(new Date(1361678400000)), value:3003},
  {key:(new Date(1361581200000)), value:2350.42}, 
  {key:(new Date(1361667600000)), value:1636.19},
    etc... 
]

Unfortunately all this gets me is an empty graph, it seems to pute the y-axis correctly, so it would seem to me that it can read the data, however I never see any bar values:

I am using this library: Dimensional Charting to build some relatively standard charts that need CrossFilter functionality.

I have been following the examples but they aren't working for me.

Here is my code:

var dashData = crossfilter(data.report),
dataByHour = dashData.dimension(function(d){ return d3.time.hour(new Date(d.timestamp))}),
totalByHour = dataByHour.group().reduceSum(function(d) { return d.amount }),

dc.barChart("#graphTimeOverview")
    .width(990) // (optional) define chart width, :default = 200
    .height(250) // (optional) define chart height, :default = 200
    .transitionDuration(500) // (optional) define chart transition duration, :default = 500
    .margins({top: 10, right: 50, bottom: 30, left: 40})
    .dimension(dataByHour) // set dimension
    .group(totalByHour) // set group
    .elasticY(true)
    .centerBar(true)
    .gap(1)
    .x(d3.time.scale().domain([new Date(data.report[0].timestamp), new Date(data.report[(data.report.length - 1)].timestamp)]))
    .round(d3.time.hour.round)
    .xUnits(d3.time.hours)
    .renderHorizontalGridLines(true);

dc.renderAll();

I know the crossfilter data is working correctly, here is a sample of the group:

totalByHour:

[ {key:(new Date(1361746800000)), value:6170.17},
  {key:(new Date(1361678400000)), value:3003},
  {key:(new Date(1361581200000)), value:2350.42}, 
  {key:(new Date(1361667600000)), value:1636.19},
    etc... 
]

Unfortunately all this gets me is an empty graph, it seems to pute the y-axis correctly, so it would seem to me that it can read the data, however I never see any bar values:

• javascript
• d3.js
• crossfilter
• dc.js

• Also just to add in case anyone would ask: There are no SVG elements which represent the bars in the DOM, so its not a styling/visual issue. – ebolyen Commented Apr 9, 2013 at 17:30
• 2 Can you build a jsFiddle? – Christopher Chiche Commented Apr 12, 2013 at 8:25
• There is not enough data on your question to know what's going wrong. Like that I would remend you to use the Chrome javascript console to see if there is an error message. – Christopher Chiche Commented Apr 16, 2013 at 6:07
• I agree, I have also done everything I can this is as much information as I know. At this point I have given up on DC.js and I will just implement my graphs in D3 and CrossFilter natively. – ebolyen Commented Apr 16, 2013 at 14:56
• My point was more to ask you to setup a jsFiddle with what you have for now in order for us to help you on your problem. – Christopher Chiche Commented Apr 16, 2013 at 15:16

2 Answers 2

Maybe the data.report array is not sorted by timestamp (the sample provided is unsorted). In your code, you assume that those values are sorted. You can try using

// Compute the timestamp extent
var timeExtent = d3.extent(data.report, function(d) { return d.timestamp; });

dc.barChart("#graphTimeOverview")
    // more settings here
    .x(d3.time.scale().domain(timeExtent.map(function(d) { return new Date(d); })))
    .round(d3.time.hour.round)
    .xUnits(d3.time.hours)
    .renderHorizontalGridLines(true);

It would be easier to tell what is the problem if you provide a jsFiddle.

I started using dc.js few days ago, so I don't know for sure. But, I think your code should go in

d3.csv("data.csv", function(data) { //your-code }; or d3.json("data.json", function(data) {//your-code}; or jQuery.getJson("data.json", function(data){//your-code});