Creating a categorical bar chart from csv file in c3.js
Question
I have code for a simple bar chart using c3.js:
<!DOCTYPE html>
<html lang="en">
<head>
<title>C3</title>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
data: {
url: 'data/output.csv'
type: 'bar'
}
});
</script>
</body>
</html>
The file output.csv looks like this:
A,B,C,D
25,50,75,100
And the graph ends up looking like this:
which is all of the data in one group.
What I'd want to do is producing the following, without hard coding the data, but rather, getting it from the CSV file like the first example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>C3</title>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
bar: {
width: 15
},
padding: {
left: 60
},
data: {
x: 'Letter',
columns:
[
['Letter', 'A','B','C','D'],
['value', 25,50,75,100]
],
type: 'bar',
onclick: function(e) { console.log(ylist[e.x]);a = this;}
},
axis: {
x: {
type: 'category'
}
},
legend: {
show: false
}
});
</script>
</body>
</html>
which would give a graph that looks like this:
Here is a jFiddle link.
My main issue is not knowing if there is a way to split the CSV file into categories, since it seems like c3.js will always put a CSV file into a time series.
1 answers
solution1
1 ACCPTED 2016-06-13 08:39:59
C3 uses the first line in your csv as a header line and then returns a set of objects like {A:25},{B:50} which C3 will find difficult/impossible to use in the way you'd like.
Instead parse the csv outside the chart using D3's parseRows function. Then prepend a row descriptor which C3 can use to know which bit of the file does what.
https://jsfiddle.net/bm57gye5/2/
// This is a separate bit of html which is explained below
<pre id="data">
A,B,C,D
25,50,75,100
</pre>
// Actual javascript
var unparsedData = d3.select("pre#data").text();
var data = d3.csv.parseRows( unparsedData );
data[0].splice (0,0,"Letter");
data[1].splice (0,0,"Data");
console.log ("data", data);
var chart = c3.generate({
bar: {
width: 15
},
padding: {
left: 60
},
data: {
columns: data,
x: "Letter",
type: 'bar',
onclick: function(e) { console.log(ylist[e.x]);a = this;}
},
axis: {
x: {
type: 'category'
}
},
legend: {
show: false
}
});
To access the csv from a url (in the jsfiddle I just reference the data as part of the html) to feed into csv.parseRows you'll need to use d3.text and a callback as so:
d3.text("data/output.csv", function(unparsedData)
{
var data = d3.csv.parseRows(unparsedData);
... parsing / c3 chart generation continues on here as above ...
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.