My Stacked Area Chart is up and running smoothly using NVD3.js. You can view it in action on this working jsfiddle link.
var volumeData = [{"key":"Hit","values":[[1.3781628E12,12],[1.3782492E12,9],[1.3783356E12,9],[1.378422E12,4],[1.3785084E12,2],[1.3785948E12,3],[1.3786812E12,6],[1.3787676E12,5],[1.378854E12,1],[1.3789404E12,5],[1.3790268E12,1],[1.3791132E12,3],[1.3791996E12,0],[1.379286E12,2],[1.3793724E12,0]]},{"key":"Miss","values":[[1.3781628E12,3],[1.3782492E12,3],[1.3783356E12,1],[1.378422E12,12],[1.3785084E12,4],[1.3785948E12,7],[1.3786812E12,10],[1.3787676E12,13],[1.378854E12,14],[1.3789404E12,8],[1.3790268E12,5],[1.3791132E12,2],[1.3791996E12,3],[1.379286E12,11],[1.3793724E12,6]]}];
(function(data){
var colors = d3.scale.category20();
keyColor = function(d, i) {return colors(d.key)};
var chart;
nv.addGraph(function() {
chart = nv.models.stackedAreaChart()
.x(function(d) { return d[0] })
.y(function(d) { return d[1] })
.color(keyColor);
chart.xAxis.tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });
chart.yAxis.tickFormat(d3.format('d'));
d3.select('#graph svg')
.datum(data)
.transition().duration(0)
.call(chart);
//nv.utils.windowResize(chart.update);
return chart;
});
})(volumeData);
I have a plan to include an "average" line for each series within the visible x-range. The calculations are not an issue, but I'm unsure how to display the line on the graph.
Would it be possible with nvd3.js, or would I need to switch to d3 for this task?