Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

xFormat cannot parse unixtime #805

Closed
ogmw opened this issue Dec 5, 2014 · 10 comments
Closed

xFormat cannot parse unixtime #805

ogmw opened this issue Dec 5, 2014 · 10 comments
Labels
C-bug Category: This is a bug resolved maybe

Comments

@ogmw
Copy link

ogmw commented Dec 5, 2014

=====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
Copy link
Author

ogmw commented Dec 5, 2014

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
Copy link
Member

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?

@aendra-rininsland aendra-rininsland changed the title [help] millisecond in csv can't be formatted to right time e.g. %m-%d %H:%M xForamt cannot parse unixtime Dec 5, 2014
@aendra-rininsland aendra-rininsland changed the title xForamt cannot parse unixtime xFormat cannot parse unixtime Dec 5, 2014
@aendra-rininsland aendra-rininsland added the C-feature-request Category: A feature request or an enhancement label Dec 5, 2014
@masayuki0812
Copy link
Member

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 masayuki0812 added resolved maybe C-bug Category: This is a bug and removed C-feature-request Category: A feature request or an enhancement labels Dec 7, 2014
@masayuki0812
Copy link
Member

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

@0o-de-lally
Copy link

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
Copy link
Member

@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
Copy link

0o-de-lally commented Jul 27, 2015 via email

@aendra-rininsland
Copy link
Member

@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
Copy link

NullVoxPopuli commented Jul 9, 2016

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C-bug Category: This is a bug resolved maybe
Projects
None yet
Development

No branches or pull requests

5 participants