c3js › Timeseries x values not evenly spaced

Question

I am having an issue with the labels assigned to the values of my graph.

The graph is a timeseries. I add values using the \'columns\' property of c3js.

I

Answer 1

I tried all of the answers suggested, but none gave me what I wanted. The closest was Partha's answer, however, selecting category as your chart type creates an unsightly padding on the left and right of the graph.

The solution that worked best for me was to exclude labels from my graph and instead work with an indexed graph. From there, I manually format each index to the proper date using the format function.

Here's a simplified version of the original poster's code:

var d = (30 * 24 * 3600); // last 30 days

var array_times = [1414540800, 1414627200, 1414627200 + d, 1414627200 + 2 * d, 1414627200 + 3 * d, 1456528117];
var array_values = [67, 66.22, 68, 68, 68, 77];

var labelWeight = 'weight in kg';

var window_period = (30 * 24 * 3600); // last 30 days


function dateToString(e) {
    var date = new Date(e * 1000);
    return date.toDateString().substring(4);
}


var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [
          // Notice that I removed the datetimes from here
          [labelWeight].concat(array_values)
        ],
        type: 'area'
    },
    point: {
        r: 6
    },
    legend: {
        show: false
    },
    grid: {
        x: {
            show: true
        },
        y: {
            show: true
        }
    },
    axis: {
        x: {
            label: {
                text: 'Time [days]'
            },
            type: 'indexed',
            tick: {
                rotate: 90,
                // I reference array_times manually here to 
                // convert the index to a user-friendly label 
                format: function (index) {
                    return dateToString(array_times[index]);
                }
            }
        }
    }
});

Working fiddle: http://jsfiddle.net/uop61zLc/1/

Answer 2

Set tick.fit to false can make the ticks be positioned according to x value of the data points.

http://c3js.org/reference.html#axis-x-tick-fit

axis: {
  x: {
    tick: {
      fit: true
    }
  }
}

Here's the sample from official site http://c3js.org/samples/axes_x_tick_fit.html

Answer 3

c3js allows you to specify what ticks will appear on x axis.

Under axis/x/tick I added this -

values: [1413936000, 1414195200,1414454400,1414713600,1414972800,1415232000],

I converted your dates in three day intervals with the epoch converter.

Here's the reference for solution.

I can only assume if the gridlines don't match these three day ticks then they were pushing into a new day every nth tick - hence your issue. Alternatively, you can place gridlines manually.

Here's the code for x axis.

        x: {
            label: {
                text: 'Time [days]'
            },
            type: 'timeseries',
            tick: {
                values: [1413936000, 1414195200,1414454400,1414713600,1414972800,1415232000],
                fit: false,
                //count: 29,
                rotate: -75,
                multiline: false,
                format: function (e, d) {
                    return dateToString(e);
                }
            },
            height: 100
        },

Answer 4

I also faced the problem.Here is how I have resolved. Use the x-axis as category and not timeseries, and manipulate the corresponding tick format to look as if it is timeseris.

I have simplified the prob to make it generic.

Problem (irregular spacing):

var chart = c3.generate({
            data: {
                x: 'xtime',
                xFormat: '%Y-%m-%d-%H-%M-%S',
                columns: [
                    ['xtime', '2015-05-20-05-10-13', '2015-05-20-05-11-13', '2015-05-21-06-10-13'],
                    ['value', 30, 50, 20]
                ]
            },
            size: {
                height: 300,
                width: 600
            },
            axis: {
                x: {
                    type: 'timeseries',
                    // type: 'category',
                    tick: {
                        // format: function(x) {
                        //     var dateSubs = this.api.categories()[x].split('-'),
                        //         newDate = new Date(dateSubs[0], dateSubs[1], dateSubs[2], dateSubs[3], dateSubs[4], dateSubs[5], 0);
                        //
                        //     return newDate.toLocaleString();
                        // }

                         format: '%e-%b-%Y %H:%M'
                    }
                }
            }
        });

    <link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<div id="chart"></div>

Solution :

var chart = c3.generate({
            data: {
                x: 'xtime',
                xFormat: '%Y-%m-%d-%H-%M-%S',
                columns: [
                    ['xtime', '2015-05-20-05-10-13', '2015-05-20-05-11-13', '2015-05-21-06-10-13'],
                    ['value', 30, 50, 20]
                ]
            },
            size: {
                height: 300,
                width: 600
            },
            axis: {
                x: {
                    // type: 'timeseries',
                    type: 'category',
                    tick: {
                        format: function(x) {
                            var dateSubs = this.api.categories()[x].split('-'),
                                newDate = new Date(dateSubs[0], dateSubs[1], dateSubs[2], dateSubs[3], dateSubs[4], dateSubs[5], 0);
                        
                            return newDate.toLocaleString();
                        }

                         // format: '%e-%b-%Y %H:%M'
                    }
                }
            }
        });

<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<div id="chart"></div>