I am using nvd3.js to create a multibyte chart. Here is my code:
$(function() {
$.get('/charts/objects_created/')
.done(function(resp) {
init_graphs(resp);
});
function init_graphs(data) {
nv.addGraph(function() {
var chart = nv.models.multiBarChart();
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d));
});
chart.yAxis.tickFormat(d3.format(',d'));
d3.select('.chart#recent_activity svg')
.datum(data)
.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
}
});
and here is my data:
[
{
"values":[
{
"y":3,
"x":"04/05/2013"
},
{
"y":1,
"x":"04/11/2013"
},
{
"y":3,
"x":"04/12/2013"
}
],
"key":"Apples"
},
{
"values":[
{
"y":3,
"x":"04/05/2013"
},
{
"y":1,
"x":"04/12/2013"
},
{
"y":0,
"x":"04/11/2013"
}
],
"key":"Oranges"
}
]
It looks wonderfully grouped:

but fail:

As you can see, the last stack is incorrect; oranges are placed in the middle of the apple section. In addition, although it is difficult to notice, there is 1 pixel strip for 0 oranges in the second column, located at 3 along the y axis.
Can someone see what I'm doing wrong, or is there an error with nvd3?
Thank!
source
share