C3: Time series min/max on x axis doesn't work

[danelkhen]

The following code throws an error (getTime function not defined on Number).
If I change the numbers into Date objects (in both the data and the min/max setting) - the min/max values are ignored.

var chart = c3.generate({
    bindto: '#chart',
    data: {
        x: "date",
        rows: [
            ["date", 'data1', 'data2', 'data3'],
            [1398154158000, 10, 70, 20],
            [1398154159000, 10, 70, 20],
            [1398154160000, 10, 70, 20],
            [1398154161000, 10, 70, 20],
        ]
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d %H:%M:%S'
            },
            min: 1398154158000,
            max: 1398155158000,
        },
    },
});

[panubear]

Hi, I am not so sure but if you add [x_format: 'data format',] that reflect your data after [x: "date",], it might help.

[danelkhen]

Thanks, didn't seem to do the trick, perhaps I'm using the wrong format.
But:
Changing the line:
min = isTimeSeries ? new Date(firstX.getTime() - padding.left) : firstX - padding.left;
To use: firstX.valueOf() instead of getTime()
Does the trick, although it doesn't render the 'ticks' above the actual data maximum x value. But it's a start...

Great library by the way!

[panubear]

Hi @danelkhen,
Sorry that my answer could not help you. If you are working on local time (utc), here is the relate issues.
https://github.com/masayuki0812/c3/issues/144
https://github.com/masayuki0812/c3/issues/161
By the way, I am not the owner, I know very little about programming and this library like an oasis for me.
Good luck.

[masayuki0812]

Hi @danelkhen @panubear ,
Sorry for late response. I think this has been fixed by the commit above.
You can avoid this issue by using the latest code including that commit or specifing min/max as Date object, like:

min: new Date(1398154158000),
max: new Date(1398155158000),

Could you try these solution?
Thank you.

[danelkhen]

Thanks for the swift reply, I've tried this code on the latest version, but I keep getting the x-axis range on the actual data min and max values, and not my custom specified values. Here's my test code:

 var chart = c3.generate({
    bindto: '#chart',
    data: {
        x: "date",
        rows: [
            ["date", 'data1', 'data2', 'data3'],
            [1398154158000, 10, 30, 20],
            [1398154159000, 100, 70, 40],
            [1398154160000, 20, 50, 10],
            [1398154161000, 50, 90, 90],
        ]
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d %H:%M:%S'
            },
            min: new Date(1398154158000),
            max: new Date(1398154191000),
        },
    },
});

And it looks like this:

[masayuki0812]

@danelkhen Sorry, there is a bug that Date object can not be accepted as axis.x.min/max (However, Number can be accepted, so first code would work).
I think this has been fixed by the commit above and it will work. Now both number and Date object can accept as axis.x.min/max.
Could you try again?

[danelkhen]

You're right, it works with numbers in the previous dev version. Using the latest version both work, but: there are no ticks on the area on the right, and the ticks are very dense on the left side instead of being evenly distributed. In any case this is much better, but might need some further enhancing.

Thanks a lot for your help!

[danelkhen]

Correction, setting axis.x.tick.fit = false fixes the ticks issue, but another problem remains (forgot to mention it previously) - the tooltip works only for the last set of vertical points, and doesn't change for any other point in the graph.

[danelkhen]

Further analysis shows that the eventRects have improper x and width values (too wide):
x values seem to be too low, while widths seem to be too big, as if they were intended to fit the entire graph and not just the relevant part of it.

[masayuki0812]

You're right. I'll fix the issue for event rect. Thank you!

[masayuki0812]

Hi @danelkhen ,
I think the issue about eventRects has been fixed by the commit above. Could you try the latest code?

[danelkhen]

Hey, sorry for the delay, tried it, works perfectly! When fit=false works as expected, when fit=true (default) only shows ticks on actual values.
Thanks a lot for the amazing work!

[masayuki0812]

Thank you for checking. I think fit=false is good for your case. I close this and thank you for your feedbacks.