Time series graph, overlapping bars

[vishal-kony]

Why the bars of my timeseries graph are overlapping?

here's my code..

var chart = c3.generate({
bindto: '#chart',
data: {
x: 'date',
xFormat: '%m/%d/%y %I:%M %p',
json: final_data,
keys: {
x: 'date',
value: values
},
type: 'bar',
groups: val
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%b %d',
centered: true,
fit: true
}
}
},
zoom: {
enabled: true
},
color: {
pattern: colors
}
});

[panthony]

Very likely a duplicate of #1329

[Codewolf]

Sorry to resurrect a dead (albeit open) ticket, but is there any update on this as is still an issue on the latest stable version (c3 0.4.15)

[panthony]

@Codewolf I don't think so, a work around is to fill the gaps with null values.

[Codewolf]

so, to clarify: i would need to programmatically (either client or server side) identify the bounds (datetime upper and lower) and manually fill in any date gaps with a 'null' or '0' value?

Surely that would then display the dates with a value of 0 which isn't correct as nothing (value wise) actually happened on those dates?

[panthony]

Yes, find the bounds and fill the gaps with either null or 0 depending on what you are displaying, 0 does not always means null.

Before:
https://jsfiddle.net/mcd6ucge/31/

After:
https://jsfiddle.net/mcd6ucge/306/

Note that if you fill with 'null', yes the date is displayed on X axis, but no, they are not displayed with a value of 0, there is nothing on hover for this date.

[Codewolf]

I see, the main issue with this is if a large date range is created (for example 1 year) and only a few of those dates have values i would end up with a (mostly) empty graph and unreadable dates on the X axis coupled with very thin (~1 or 2 px depending on graph width) bars.

[panthony]

Regardless of this bug, the date seems to be evenly distributed on the X axis so it would not be any different. You would still have large empty space between each bars.

With a lot of date, not all ticks have a date displayed, I'm using this workaround and here is an exemple:

If you do not care about an evenly distributed serie, maybe you could simply use a "category" x axis instead of a timeseries.

[Codewolf]

Do we know roughly around what line or function the 'timeseries' type calculations are made?

If so i could possibly look into the spacing issues etc as part of the development cycle for my current project.

[panthony]

It's been too long since I dived into c3js code I can't help you on that :)

[rkrabek]

@Codewolf It looks like the bar width is calculated in the function getBarW on line 53 of shape.bar.js

It seems to work properly if it is a category chart instead of a timeseries chart (In my use case I don't need the ticks to fit to the data so axis.x.tick.fit = false for me) and the difference between the two is the value returned by axis.tickInterval() on line 293 of c3.axis.js. tickInterval does a calculation with tickOffset if it's a category chart else it calculates tickInterval with this:

length = axis.g.select('path.domain').node().getTotalLength() - outerTickSize * 2;
interval = length / axis.g.selectAll('line').size();

[fullofcaffeine]

Any news here? I'm facing the same issue.

[Codewolf]

@fullofcaffeine i moved positions to a backend position so havent been able to keep track of this issue, but by the looks of the messages @rgbkrk commited a fix on 14th March. It may be worth downloading his patch.

[Benji81]

Still the issue in 0.6.12 (timeseries with gapes in data).

[rgoupil]

Bump, the issue persists for us in 0.7.18 😢