How to convert NVD3 histograms to graphical area diagrams?

Question

My plnkr .

My NVD3 chart is currently based on their linePlusBarChart .

The problem is that in my real application I actually have a lot more data about the tick of the bar (4000+), so the bars become super thin and hard to see, so I need to use the line graph instead. (This is not obvious in my plnkr example because it uses a small fake sample size for the histogram.)

Has anyone else tried to do this? Include bars in line graph?

code:

var data = [{
  "key": "Price",
  "color": "#4C73FF",
  "values": [
    [1443621600000, 71.89],
    [1443619800000, 75.51],
    [1443618000000, 68.49],
    [1443616200000, 62.72],
    [1443612600000, 70.39],
    [1443610800000, 59.77]
  ]
}, {
  "key": "Quantity",
  "bar": true,
  "values": [
    [1136005200000, 1],
    [1138683600000, 2],
    [1141102800000, 1],
    [1143781200000, 0],
    [1146369600000, 1],
    [1149048000000, 0]
  ]
}];

nv.addGraph(function() {
  var chart = nv.models.linePlusBarChart()
    .margin({
      top: 20,
      right: 40,
      bottom: 50,
      left: 40
    })
    .x(function(d, i) {
      return i
    })
    .y(function(d) {
      return d[1]
    })
    .color(d3.scale.category10().range());

  chart.xAxis.tickFormat(function(d) {
    var dx = data[0].values[d] && data[0].values[d][0] || 0;
    // return time in hours:
    return d3.time.format('%I:%M')(new Date(dx));
  });

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

  chart.y2Axis
    .tickFormat(function(d) {
      return '$' + d3.format(',f')(d)
    });

  chart.bars.forceY([0]);
  chart.lines.interactive(false);
  chart.height(300);

  d3.select('#chart svg')
    .datum(data)
    .transition().duration(500)
    .call(chart);

  chart.update();
  nv.utils.windowResize(chart.update);

  return chart;
});

Answer 1

NVD3 multiChart (example), //. :

• yAxis1 , yAxis2 - .
• "1" y: lines1, bars1, stack1.
• forceY, 1,8.1. y- yDomain1 yDomain2.

, - (NVD3 1.8.1), , () () :

var data = [{
  "key": "Price",
  "type": "line",
  "yAxis": 2,
  "values": [
    [1443621600000, 71.89],
    [1443619800000, 75.51],
    [1443618000000, 68.49],
    [1443616200000, 62.72],
    [1443612600000, 70.39],
    [1443610800000, 59.77],
  ]
}, {
  "key": "Quantity",
  "type": "area",
  "yAxis": 1,
  "values": [
    [1136005200000, 1],
    [1138683600000, 2],
    [1141102800000, 1],
    [1143781200000, 0],
    [1146369600000, 1],
    [1149048000000, 0],
  ]
}];

data = data.map(function(series) {
  series.values = series.values.map(function(d) {
    return {
      x: d[0],
      y: d[1]
    }
  });
  return series;
});

nv.addGraph(function() {
  var chart = nv.models.multiChart()
    .margin({
      top: 20,
      right: 40,
      bottom: 50,
      left: 40
    })
    .yDomain1([0, 10])
    .yDomain2([0, 100]) // hard-coded :<
    .interpolate("linear") // don't smooth out the lines
    .color(d3.scale.category10().range());

  chart.xAxis.tickFormat(function(d) {
    return d3.time.format('%I:%M')(new Date(d));
  });
  chart.yAxis1.tickFormat(d3.format(',f'));
  chart.yAxis2.tickFormat(function(d) {
    return '$' + d3.format(',f')(d)
  });

  chart.lines2.interactive(false); // line chart, right axis

  d3.select('svg#chart')
    .datum(data)
    .transition().duration(500).call(chart);

  chart.update();
  nv.utils.windowResize(chart.update);
  return chart;
});

text {
  font: 12px sans-serif;
}
svg {
  display: block;
}
html,
body,
svg#chart {
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
}

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

Hide result