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/