3

This is my dataset:

x: '2014-01-01', '2014-02-02', '2014-03-02', ...
y: '01:30:00', '00:55:00', '01:45:50', ...

I would like to show this data on my chart, using the c3.js library.

I tried this so far (already converted time to seconds):

var chart = c3.generate({
    data : {
        x : 'x',
        columns : [
            ['x', '2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01'],
            ['sample', 30, 200, 100, 400, 150, 250]
        ]
    },
    axis : {
        x : {
            type: 'timeseries'
        },
        y : {
            tick : {
                format: d3.time.format("%X")
                //or format: function (d) { return '$' + d; }
            }
        }
    }
});
John Slegers
  • 45,213
  • 22
  • 199
  • 169

2 Answers2

1

What I would do, is this :

  1. Create a new date that has time 00:00:00 :

    date = new Date('01-01-2016 00:00:00')

  2. Turn that date into a timestamp :

    timestamp = date.getTime()

  3. Add Y seconds to that timestamp :

    timestamp = timestamp + (y * 1000)

  4. Create a new date, using that value as input :

    date = new Date(timestamp)

  5. Use d3.time.format to format that date accordingly :

    time = d3.time.format("%H:%M:%S")(date)

  6. Put all the pieces together and turn it into a oneliner :

    time = d3.time.format("%H:%M:%S")(new Date(new Date('01-01-2016 00:00:00').getTime() + (y * 1000)));

Now, you can just put this oneliner into a format function for your Y-axis and return time :

var chart = c3.generate({
    data : {
        x : 'x',
        columns : [
            ['x', '2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01'],
            ['sample', 30, 200, 100, 400, 150, 250]
        ]
    },
    axis : {
        x : {
            type: 'timeseries'
        },
        y : {
            tick : {
                format : function (y) {
                    return d3.time.format("%H:%M:%S")(new Date(new Date('01-01-2016 00:00:00').getTime() + (y * 1000)));
                }
            }
        }
    }
});

See this Fiddle for a demo.

More info :

Community
  • 1
  • 1
John Slegers
  • 45,213
  • 22
  • 199
  • 169
  • I tried this without success. Could you fork my jsfiddle: [http://jsfiddle.net/0h8sh7am/5/](http://jsfiddle.net/0h8sh7am/5/) –  Feb 25 '16 at 08:09
  • Thanks, but the problem is that I want my y-axis to be time format and thats currently not supported by c3. So I need a workaround. –  Feb 25 '16 at 08:16
  • Cool, there seems to be a way, but your fiddle shows the local time. The `sample` data are seconds and this should be converted to `hh:mm:ss`. –  Feb 25 '16 at 08:23
  • You are my hero of the day! –  Feb 25 '16 at 08:29
  • 1
    @Julian : You're welcome. I just updated my answer again. Anyway, I love this kind of fiddling around with code, so it truly was my pleasure ;-) – John Slegers Feb 25 '16 at 08:33
1

To also get this work with Firefox you need to set:

Fri Jan 01 2016 00:00:00 GMT+0100 (CET)

instead of

01-01-2016 00:00:00