xFormat cannot parse unixtime

[ogmw]

=====my html
var chart = c3.generate({
data: {
x: 'date',
url: 'test.csv'
},
axis: {
x : {
type : 'timeseries',
tick : {
format : "%m-%d %H:%M"
}
}
},
zoom: {
enabled: true
}
});
========test.csv
date, eth0-rx, eth0-tx, eth1-rx, eth1-tx
1417622461000, 37, 2, 68, 33
1417622522000, 39, 2, 57, 23
1417622581000, 41, 3, 61, 23

[ogmw]

i fixed it myself.
modify c3.js as follow:

c3_chart_internal_fn.parseDate = function (date) {
    var $$ = this, parsedDate;
    if (date instanceof Date) {
        parsedDate = date;
    } else if (typeof date === 'number') {
        parsedDate = new Date(date);
    } else if (typeof date === 'string' && /\d{13}/.test(date)) {
        parsedDate = new Date(parseInt(date));
    } else {
        parsedDate = $$.dataTimeFormat($$.config.data_xFormat).parse(date);
    }
    if (!parsedDate || isNaN(+parsedDate)) {
        window.console.error("Failed to parse x '" + date + "' to Date object");
    }
    return parsedDate;
};

[aendra-rininsland]

I just tried doing this without modifying C3 and couldn't manage to get it to parse unixtime. It doesn't help D3's time formatting doesn't provide such an option.

Considering a very possible use case for C3 is building charts from server logfiles, having some ability to parse unixtime would be helpful. I see one of two options:

1. Change parseDate as per above that so that if the string is a simple integer, it assumes it's unixtime in either milliseconds or seconds (don't know which is preferable)
2. Allow xFormat to take a callback, similar to how the axis.x.tick.format works

@masayuki0812 Any thoughts?

[masayuki0812]

Thanks for your reporting. This is because the date values are string when loading from url and unixtime is already supported. So, I fixed with same way as @ogmw wrote. I'll release this fix in the next version v0.4.8. Thanks.

[masayuki0812]

v0.4.8 has been released, so please let me close.

[0o-de-lally]

Is this documented somewhere in the reference? I am unable to get json data working with unix time.
For example:
{name: 'www.site1.com', data: 500, time: 1436744429891}

I'm using chart.load:

keys: {
 value: ['data'],
 x:['time']
 }

and:

axis:{
 x:{
 type: 'timeseries'
 }
},

[aendra-rininsland]

@keyscores Here's a fiddle showing it in use.

Key things:

• You should set tick format using a D3 date string.
• When using JSON with chart.load, you need to also specify keys.
• Using JSON chart.load will totally replace chart contents; if you want the chart to update to accommodate the new data, you need to include it in the loaded JSON.

[0o-de-lally]

Thanks Andrew its very clear now. Can I suggest adding this to the official docs? Lucas Geiger

[aendra-rininsland]

@keyscores Most definitely, definitely took me a minute to figure it out. Please comment on the above issue if you find documentation lacking anywhere else! Thanks!

[NullVoxPopuli]

the fiddle errors. Is there an updated example? I have javascript formatted times (with ms)

I also have multiple axes, here is my code:

    let model = this.get('model');
    let incomes = model.get('incomes');
    // these start out as unixtimes
    let registrationTimes = model.get('registrationTimes');
    let incomeTimes = model.get('incomeTimes');
    let registrations = model.get('registrations');
    let regTimes = [];
    let incTimes = [];


    registrationTimes.forEach(function (e) {
      regTimes.push(new Date(e * 1000));
    });

    incomeTimes.forEach(function (e) {
      incTimes.push(new Date(e * 1000));
    });

    let data = {
      xs: {
        Registrations: 'x1',
        Income: 'x2',
      },
      columns: [
        ['x1'].concat(regTimes), ['x2'].concat(incTimes), [
          'Registrations',
        ].concat(registrations), ['Income'].concat(incomes),
      ],
      axes: {
        Registrations: 'y',
        Income: 'y2',
      },
    };

    let config = {
      bindto: 'income-registrations-chart',
      size: {
        height: 700,
      },
      zoom: {
        enabled: true,
        rescale: true,
      },
      grid: {
        x: {
          show: true,
        },
      },
      axis: {
        y: {
          label: 'Total Number of Registrants',
        },
        y2: {
          show: true,
          label: 'Revenue',
          tick: {
            format: d3.format('$,'),
          },
        },
        x: {
          type: 'timeseries',
          tick: {
            culling: {
              max: 100,
            },
            count: 20,
            fit: true,
            rotate: 45,
            format: '%Y-%m-%d %H:%M:%S',
            // format: function (x) { return new Date(x).toString(); },
          },
        },
      },
    };

    this.set('config', config);
    this.set('data', data);

and then using ember-c3

{{c3-chart data=data config=config}}

I'm using:

c3: 0.4.11
d3: 3.5.16

[NullVoxPopuli]

got it working: http://jsfiddle.net/DerNalia/kfz2eb60/