I am trying to make a stacked bar chart with NVd3 but unfortunately the x-axis does not show properly. I want to show the year from 1999 to 2014 in the x-axis but this is what i get.
It seems that nvd3 is grouping all the values for the separate years together.
Javascript code
var data1 = [{}],
deaths = 0;
console.log(data1);
d3.csv('data/CENS-R1/ageGroups.csv', function(data) {
for (var i = 0; i < 12; i++) {
// setup a new entry for that age group
data1[i] = {
key: "1",
values: []
}
var v = i * 16;
// go through all the data
for (var j = 0; j < data.length; j++) {
// check if i equals the correct entries
if (0+v <= j && j < 16+v) {
data1[i].key = data[j].Age;
data1[i].values.push(
{
"x": (new Date()).getTime(parseInt(data[j]).Year),
"y": parseInt(data[j].Deaths)
}
);
}
}
}
});
console.log(data1);
nv.addGraph(function() {
var chart = nv.models.multiBarChart();
// format x-axis
chart.xAxis.tickFormat(function(d) { return d3.time.format('%Y')(new Date(d)) });
chart.yAxis
.tickFormat(d3.format(',.1f'));
d3.select('#stacked-chart svg')
.datum(data1)
.transition()
.duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
CSV file sample
CENS-R1,1,1999,1999,4390
CENS-R1,1,2000,2000,4354
CENS-R1,1,2001,2001,4188
Any help would be appreciated.