C3js, Papaparse, Parse CSV to C3js

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>

Just a hunch, but you might need results.data. (Why are you making a `data` variable anyway? Just use `results`.) — Matt, May 07 '15 at 19:20
That was really helpful, right now c3js loads blank data, but recognizes the number of columns, so it's a matter of putting the correct values. Thanks a lot! — Honzo_Nebro, May 08 '15 at 09:35

Honzo_Nebro · Accepted Answer · 2015-05-08T13:23:13.510

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>

C3js, Papaparse, Parse CSV to C3js

1 Answers1