When loading from CSV, cannot define X axis column
- Dominant language
- JavaScript
- Stars
- 9.3k
- Forks
- 1.4k
- Avg merge
- 6d 16h
- Merged PRs (30d)
- 1
Description
I got inspired to look into c3, and got inspired by these two fiddles:
http://jsfiddle.net/maxklenk/k9Dbf/3/ - http://jsfiddle.net/maxklenk/k9Dbf/3/
I got it working.
``` javascript
var chart = c3.generate({
bindto: '#chart',
data: {
json: [{
date: '2014-01-01 07:00:00',
upload: 200,
download: 200,
total: 400
}, {
date: '2014-01-01 07:30:00',
upload: 100,
download: 300,
total: 400
}, {
date: '2014-01-01 08:00:00',
upload: 300,
download: 200,
total: 500
}, {
date: '2014-01-01 09:30:00',
upload: 400,
download: 100,
total: 500
}],
keys: {
x: 'date',
value: ['upload', 'download']
},
xFormat: '%Y-%m-%d %H:%M:%S',
type: 'spline'
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%m/%d %H:%M'
}
}
}
});
```
I extended my boundaries as I want to load this data from external source that looks like this:
``` csv
date,upload,download
2014-01-01 07:00:00,200,111
2014-01-01 07:30:00,500,222
2014-01-01 07:45:00,400,333
```
And ended up with this code after reading a bit about loading data:
``` javascript
var chart = c3.generate({
bindto: '#chart',
data: {
url: '/data.csv',
keys: {
x: 'date',
value: ['upload', 'download']
},
xFormat: '%Y-%m-%d %H:%M:%S',
type: 'spline'
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%m/%d %H:%M'
}
}
}
});
```
But this results in an uncaught error: Uncaught Error: x is not defined for id = "date".
I went back to the original code, and from the console in my browser I did **chart.load({url: '/data.csv'})** and the new data set loaded successfully.
I didn't get it to work, so either I'm doing something wrong or there is a bug.
**N.B.**
As I workaround I transformed the to json format instead, and added **data.mimeType: 'json',** to the data options, and it loads data, and works as expected. Working example when loading a json file instead of a csv file:
``` javascript
var chart = c3.generate({
bindto: '#chart',
data: {
url: '/data.json',
mimeType: 'json',
keys: {
x: 'date',
value: ['upload', 'download']
},
xFormat: '%Y-%m-%d %H:%M:%S',
type: 'spline'
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%m/%d %H:%M'
}
}
}
});
```
Contributor guide
Assessment
This issue has not been assessed yet.