nvd3 not loading json - d3.js

Question

I've done a nvd3 graphic, but it does not load the json.
What changes do I have to do in nvd3? I'm a little lost... sorry.
nv.addGraph(function() {
var chart = nv.models.lineChart();
var fitScreen = false;
var width = 600;
var height = 400;
var zoom = 1;
chart.useInteractiveGuideline(true);
chart.xAxis
.tickFormat(d3.time.format("%Y%m%d").parse);
//.tickFormat(d3.format(',r'));
chart.yAxis
.axisLabel('Alumnos')
.tickFormat(d3.format(',.2f'));
d3.select('#chart1 svg')
.attr('perserveAspectRatio', 'xMinYMid')
.attr('width', width)
.attr('height', height)
.datum(datos);
setChartViewBox();
resizeChart();
// These resizes both do the same thing, and require recalculating the chart
//nv.utils.windowResize(chart.update);
//nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });
nv.utils.windowResize(resizeChart);
d3.select('#zoomIn').on('click', zoomIn);
d3.select('#zoomOut').on('click', zoomOut);
function setChartViewBox() {
var w = width * zoom,
h = height * zoom;
chart
.width(w)
.height(h);
d3.select('#chart1 svg')
.attr('viewBox', '0 0 ' + w + ' ' + h)
.transition().duration(500)
.call(chart);
}
function zoomOut() {
zoom += .25;
setChartViewBox();
}
function zoomIn() {
if (zoom <= .5) return;
zoom -= .25;
setChartViewBox();
}
// This resize simply sets the SVG's dimensions, without a need to recall the chart code
// Resizing because of the viewbox and perserveAspectRatio settings
// This scales the interior of the chart unlike the above
function resizeChart() {
var container = d3.select('#chart1');
var svg = container.select('svg');
if (fitScreen) {
// resize based on container's width AND HEIGHT
var windowSize = nv.utils.windowSize();
svg.attr("width", windowSize.width);
svg.attr("height", windowSize.height);
} else {
// resize based on container's width
var aspect = chart.width() / chart.height();
var targetWidth = parseInt(container.style('width'));
svg.attr("width", targetWidth);
svg.attr("height", Math.round(targetWidth / aspect));
}
};
return chart;
});
And the json is:
[
{
"date": "20140701",
"Baja": 0,
"No admitido": 3851,
"Pre-inscrito": 0,
"Admitido": 0,
"En reserva": 0,
"Alta": 0,
"Inactivo": 0
},
{
"date": "20140701",
"Baja": 0,
"No admitido": 3851,
"Pre-inscrito": 2468,
"Admitido": 0,
"En reserva": 0,
"Alta": 0,
"Inactivo": 0
}
]
I was looking for it but all I found is to modify the json. I did it, but it did not work. I prefer to preserve this json format if it is possible, it simplifies the process at all for me.
Thank u so much!

Answer 1

Mira creo que esto es lo que quieres :3
var chart = c3.generate({
data: {
json: datos,
keys: {
x : 'date', // it's possible to specify 'x' when category axis
value: ['Baja', 'No admitido', 'Pre-inscrito', 'Admitido', 'En reserva', 'Alta', 'Inactivo']
}
}
});
http://codepen.io/CristianG540/pen/bNegqV