Problem using DC.js (cross-filter library and d3) - the histogram does not show values

Question

I use this library: Dimensional Charting to create some relatively standard charts that need CrossFilter functionality.

I follow examples, but they do not work 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 that cross-filter data is working correctly, here is an example 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 gives me an empty graph, it seems that it calculates the y axis correctly, so it seems to me that it can read data, however I never see any column values:

Answer 1

Perhaps the data.report array data.report not sorted by timestamp (the provided sample is not sorted). In your code, you assume these 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 say what the problem is if you provide jsFiddle.

Answer 2

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

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});