Question

I have the following line chart: http://jsfiddle.net/cp3fV/2/

var data = [
{
    "days_to_expiry": 0, 
    "close": "7.1120000000"
}, 
{
    "days_to_expiry": 1, 
    "close": "8.4580000000"
}, 
{
    "days_to_expiry": 2, 
    "close": "7.2830000000"
}, 
{
    "days_to_expiry": 3, 
    "close": "12.2820000000"    
}, 
{
    "days_to_expiry": 4, 
    "close": "7.1820000000"
}
]


nv.addGraph(function() {
  var chart = nv.models.lineChart()
                .margin({left: 100, right:50})
                .useInteractiveGuideline(true) 
                .transitionDuration(350) 
                .showLegend(false)
                .showYAxis(true) 
                .showXAxis(true)
                //.forceY([0, 19])
                .y(function (d) { return d.close })
                .x(function (d) { return d.days_to_expiry })

  ;
  console.log(data);

  chart.xAxis
      .axisLabel('Date')
      .ticks(10);

  chart.yAxis
      .axisLabel('Close')
      .tickFormat(d3.format('.03f'));

  var testData = [{key:"Test", color: '#2ca02c', values: data}];

  d3.select('#chart svg')
      .datum(testData)
      .call(chart);

  nv.utils.windowResize(function() { chart.update() }); // Update on resize
  return chart;
});

I just want to order the Y axis from minimum to maximum. It works fine if all the values are <10

I know I can use forceY(min, max) but I don't want to calculate the minimum every time(I'm planning to use AJAX to update the chart)

Was it helpful?

Solution

It works if you use the numbers as numbers and not as strings:

data.forEach(function(d) { d.close = +d.close; });

Complete example here.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top