Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

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

Closed
lestopher opened this Issue · 6 comments

7 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 referenced this issue from a commit in arlm/nvd3
@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

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
Owner

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.