c3
c3 copied to clipboard
c3js
Time series graph, overlapping bars
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 } });
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)
@Codewolf I don't think so, a work around is to fill the gaps with null values.
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?
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.
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.
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.
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.
It's been too long since I dived into c3js code I can't help you on that :)
@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 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.
