Cumulative Line Chart Error nvd3

Question

I am trying to create cumulative line chart.

But i don't know much about nvd3 or d3 now.

So what point I am missing here ?

I have created jsfiddle,

mine data is

var lineChartData = [
      {
        key : "Passed",
        values :[
          { x : "Module A", y : 10},
          { x : "Module B", y : 12},
          { x : "Module C", y : 14},
          { x : "Module D", y : 2}
        ]
      },
      {
        key : "Failed",
        values :[
          { x : "Module A", y : 2},
          { x : "Module B", y : 3},
          { x : "Module C", y : 0},
          { x : "Module D", y : 4}
        ]
      }
    ];

my chart code is like this

nv.addGraph(function() {
      var chart = nv.models.cumulativeLineChart();



      var d3chart = d3.select('#chart svg')
          .datum(lineChartData)
          .transition().duration(500)
          .call(chart);


      nv.utils.windowResize(chart.update);

      return chart;
    });

i don't know how can I put string on xAxis "Module A", "Module B" and other modules as string only.

There will be two lines "Passed" and "Failed".

What settings I need to put to get the chart.

Answer 1

I think you need to format your x xAxis like this:

chart.xAxis.axisLabel("Modules").tickFormat(function (d) { return lineChartData[0].values[d].x; });