[Line Chart] How to create an ordinal/discrete xAxis? #29

Closed
lestopher opened this Issue Jan 9, 2013 · 7 comments

Projects

None yet

8 participants

@lestopher

I thought that I could set scale of the axis by doing the following:

  var chart;
  var xScale = d3.scale.ordinal()
                  .domain(_.map(seriesDef[0].values, function(d) {
                    return d.x;
                  }))
                  // .rangeBands([0, seriesDef[0].values.length - 1]);


  nv.addGraph(function() {
    chart = nv.models.lineChart();

    chart.x(function(d, i) { return String(d.x); })
         .y(function(d) { return d.y; });

    chart.xAxis.scale(xScale);

    chart.yAxis
      .tickFormat(d3.format(',.2f'));

    d3.select(that.chartElement.find('svg')[0])
        .datum(seriesDef)
      .transition().duration(500)
        .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
  });

Here's what seriesDef looks like:

{
  "area": false,
  "key": "Total Amount By Term",
  "values":
    [
      {
        "x": "199520",
        "y": 1119707
      },
      {
        "x": "199510",
        "y": 1253042
      },
      {
        "x": "199610",
        "y":  868849
      },
      {
        "x": "199540",
        "y": 50
      },
      {
        "x": "199430",
        "y":  6803
      },
      {
        "x": "199810",
        "y":  1850
      },
      {
        "x": "200820",
        "y":  30
      }
    ]
}

The xAxis still ends up looking like an interval
nvd3linechart

Any suggestions?

@j0hnsmith

I'm having a similar problem, I want an x axis with a d3.time.scale() scale, I thought I could do what you've done to set the axis scale but it doesn't work.

@arlm arlm pushed a commit to arlm/nvd3 that referenced this issue Feb 5, 2013
@bobmonteverde bobmonteverde Issue #29 removing deprected bar example 5beda82
@mikekhristo

Any update on the original question?

@dgorissen

Similar question here. Eventually posted a question on SO: http://stackoverflow.com/questions/17296938/nvd3-scatter-plot-with-ordinal-scale

@ccarse
ccarse commented Oct 16, 2013

Anyone know how to do this?

@jrgriffiniii

Many thanks to @dgorissen for the work-around. Just mentioning that this would be ideal to support within NVD3 core for future releases.

@robinfhu
Member
robinfhu commented Feb 9, 2015

Don't use an ordinal scale.

Instead, set chart.x(function(d,i){ return i;})
And then in the chart.xAxis.tickFormat function, return the label you want to show depending on the index.

@robinfhu robinfhu closed this Feb 9, 2015
@kevalbhatt

@robinfhu worked for me thanx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment