c3js / c3js/c3

When loading from CSV, cannot define X axis column

Open
#1,030 1 comment 0 reactions 0 assignees View on GitHub
C-feature-request
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.