C3js, Papaparse, Parse CSV to C3js - csv

Question

I've been trying to parse a CSV file with Papaparse4 to use it on charts created with C3js, but I can't get it to work.
I want to be able to load different CSV files, so I'm using a file input, the file gets parsed (I can see it on the console), but I can't load the data to the chart.
You can test it here: http://jsfiddle.net/Honzo_Nebro/mv6eomf4/
function handleFileSelect(evt) {
var file = evt.target.files[0];
Papa.parse(file, {
header: true,
dynamicTyping: true,
complete: function(results) {
data = results;
console.log(data);
var chart = c3.generate({
bindto: '#chart',
size: {
height: 359
},
json: data,
});
}
});
}
$(document).ready(function() {
$("#csv-file").change(handleFileSelect);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="csv-file" name="files" />
<div id="chart"></div>

Answer 1

So, with lots of insights from a friend we came to this. It seems to not be working on this snippet, but it does on jsfiddle, I may have misplaced something http://jsfiddle.net/Honzo_Nebro/mv6eomf4/3/
function handleFileSelect(evt) {
var file = evt.target.files[0];
Papa.parse(file, {
header: true,
dynamicTyping: true,
complete: function(results) {
console.log(results.data);
//Create an empty array and fill it with the headers
var values = [];
$.each(results.data[0], function(key, value) {
values.push(key);
});
var chart = c3.generate({
bindto: '#chart',
size: {
height: 359
},
data: {
json: results.data,
keys: {
//assign the array to the value property
value: values,
},
type: 'donut',
},
unload: true,
legend: {
postion: 'bottom',
},
tooltip: {
format: {
value: function(name, ratio, id, index) {
ratio2 = ratio * 100;
var text = name + ", (" + ratio2.toFixed(1) + "%)";
return name;
}
}
}
});
}
});
}
<script src="https://rawgit.com/mholt/PapaParse/master/papaparse.min.js"></script>
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="csv-file" name="files" />
<div id="chart"></div>