lineWithFocusChart force Y

lineWithFocusChart force Y

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
<div id="chart">
  <svg></svg>
</div>

CSS

#chart svg {
  height: 400px;
}

JavaScript

nv.addGraph(function() {
  var myData = data();
  var chart = nv.models.lineWithFocusChart();

  chart.xAxis
    .tickFormat(d3.format(',f'));

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

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

  // Set the yMax to the chart
  var yMax = getYMax(myData);
  //chart.forceY([0, yMax]);
  chart.lines.forceY([0, yMax])
  chart.lines2.forceY([0, yMax])
 
  d3.select('#chart svg')
    .datum(myData)
    .transition().duration(500)
    .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});

function getYMax(d) {
  var yMax = 0;

  for (var i = 0; i < d.length; i++) {
    for (var x = 0; x < d[i]['values'].length; x++) {
      var value = d[i]['values'][x]['y'];
      if (value != null)
        if (Number(value) > yMax) yMax = Number(value);
    }
  }
  
  // Return the yMax rounded upward:
  return Math.ceil(yMax + 2);
}

function data() {
  return stream_layers(3, 10 + Math.random() * 200, .1).map(function(data, i) {
    return {
      key: 'Stream' + i,
      values: data
    };
  });
}

/* Inspired by Lee Byron's test data generator. */
function stream_layers(n, m, o) {
  if (arguments.length < 3) o = 0;

  function bump(a) {
    var x = 1 / (.1 + Math.random()),
      y = 2 * Math.random() - .5,
      z = 10 / (.1 + Math.random());
    for (var i = 0; i < m; i++) {
      var w = (i / m - y) * z;
      a[i] += x * Math.exp(-w * w);
    }
  }
  return d3.range(n).map(function() {
    var a = [],
      i;
    for (i = 0; i < m; i++) a[i] = o + o * Math.random();
    for (i = 0; i < 5; i++) bump(a);
    return a.map(stream_index);
  });
}

/* Another layer generator using gamma distributions. */
function stream_waves(n, m) {
  return d3.range(n).map(function(i) {
    return d3.range(m).map(function(j) {
      var x = 20 * j / m - i / 3;
      return 2 * x * Math.exp(-.5 * x);
    }).map(stream_index);
  });
}

function stream_index(d, i) {
  return {
    x: i,
    y: Math.max(0, d)
  };
}