0
votes

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. Graph

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.

1
Can you put your code in a fiddle so someone can help with your code easily.shabeer90

1 Answers

0
votes

So apparently my function for parsing the date was wrong. instead of creating a new date with "x": (new Date()).getTime(parseInt(data[j]).Year) i used the Date.parse() function and that seemed to work.