NVD3 stacked bar chart
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<div id="NVD3Chart"><svg></svg></div>
CSS
#NVD3Chart { height: 400px}
JavaScript
var data = [{
"key" : "1",
"values" : [ [ "Jan '19 S", 190000000 ],[ "Jan '19 U", 150000000 ],[ "Feb '19 S", 112000000 ],[ "Feb '19 U", 115000000 ],[ "Mar '19 S", 132000000 ],[ "Mar '19 U", 99000000 ] ]
}, {
"key" : "2A",
"values" : [ [ "Jan '19 S", 152000000 ],[ "Jan '19 U", 105000000 ],[ "Feb '19 S", 132000000 ],[ "Feb '19 U", 99000000 ],[ "Mar '19 S", 132000000 ],[ "Mar '19 U", 99000000 ] ]
}, {
"key" : "2B",
"values" : [ [ "Jan '19 S", 190000000 ],[ "Jan '19 U", 100000000 ],[ "Feb '19 S", 162000000 ],[ "Feb '19 U", 145000000 ],[ "Mar '19 S", 132000000 ],[ "Mar '19 U", 99000000 ] ]
},{
"key" : "Non",
"values" : [ [ "Jan '19 S", 128000000 ],[ "Jan '19 U", 660000000 ],[ "Feb '19 S", 192000000 ],[ "Feb '19 U", 125000000 ],[ "Mar '19 S", 132000000 ],[ "Mar '19 U", 99000000 ] ]
}]
// NVD3 chart
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarChart()
.duration(300)
.margin({bottom: 100, left: 70})
.rotateLabels(60)
.stacked(true)
.showControls(false)
.groupSpacing(0.1)
.x(function (d) { return d[0] })
.y(function (d) { return d[1] });
chart.reduceXTicks(false).staggerLabels(true);
chart.xAxis;
chart.yAxis;
chart.dispatch.on('renderEnd', function(){
nv.log('Render Complete');
});
d3.select('#NVD3Chart svg').datum(data).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
var keys = d3.nest()
.key(function(d) { return (d.key) })
.rollup(function (v) {
return d3.keys(v[0]).filter(function(p, i){return i}) //filter out the heading
.reduce(function(s, p){ //sum each of the other members
//p is the category being summed
return (s[p] = d3.sum(d3.values(v[0][p][0])), s);
}, {});
})
.map(data);
console.log(keys);