Tick format doesn't work about c3-angular-directive HOT 18 CLOSED

It's the same for me (i get negative, 3 digit numbers) . I ended up using an extra function for formatting:

var time_format = function (timestamp) {
    return d3.time.format("%X")(new Date(timestamp));
};

<chart-axis-x-tick tick-rotate="50" tick-format-function="time_format" />

Which is of course only an intermediate solution…

from c3-angular-directive.

This does not appear to be fixed in version 1.3.1 or there is a regression. The formatting is off as in the case for @marco-faustinelli e.g. requesting for a formatting of %Y-%m-%d for a valid date object returns the %H instead which is 05 PM in my case. I had to resort to the workaround formatting function in this thread to get it to work. See the attached screenshot.

from c3-angular-directive.

Please verify using the example in the project. There is an example with this code:

<c3chart bindto-id="chart-timeseries" chart-data="datapoints" chart-columns="datacolumns" chart-x="datax">
    <chart-axis>
        <chart-axis-x axis-id="x" axis-type="timeseries">
            <chart-axis-x-tick tick-format="%Y-%m-%d"/>
        </chart-axis-x>
    </chart-axis>
</c3chart>

When I change the tick-format to what you want it works for me. Are you using the latest version of the library? (0.5.2)

from c3-angular-directive.

The setting xFormat is format for input data parsing, but axis.x.tick.format is for displaying already parsed data. So, without setting xFormat it is not possible to parse date in custom format. Any possibilities to add that ?

from c3-angular-directive.

Not sure I completely understand what you mean, can you give me a sample that actually does not work? Using the mentioned example works for me, what am I missing.

from c3-angular-directive.

Let's assume he adds new datapoint with x value in format "2015-06-10 04". With x axis type timeseries and the default xFormat setting (which is, if not mistaken, "%Y-%m-%d") there will be a date parsing error. To fix this, xFormat needs to be set to "%Y-%m-%d %H", so the input data gets correctly parsed in a Date object. After that the date can be displayed on axis tick with specified format, which then can be the same or different, say, "%m-%d-%y".

from c3-angular-directive.

Aha, now I get it, I'll reopen the issue.

from c3-angular-directive.

Here https://github.com/jettro/c3-angular-directive/blob/master/src/axis-x-tick-directive.js#L151
is another issue: when type of x axis is timeseries, d3.time.format(...) should be used instead, but it seems, that with current design, it could be a little complicated to detect axis-type value from char-axis-x directive. One solution would be to move d3.format(...) and d3.time.format(...) to chart controller. This applies to y axis too, but more rarely.

from c3-angular-directive.

There seems to be an inconsistency with x and y format attribute names:
https://github.com/jettro/c3-angular-directive/blob/master/src/axis-y-tick-directive.js#L70
versus
https://github.com/jettro/c3-angular-directive/blob/master/src/axis-x-tick-directive.js#L149
The second one judging by documentation at the top of the same file, is a bug, it should be tickFormat as for y axis.

from c3-angular-directive.

I have serious problems in getting any formatting right for the x-axis timeseries.
Even the official example is not working for me on my machine. As you can see in the image that I am enclosing, the format says .140, .141 rather than use Y-m-d.

This specific timeseries example is very much publicized, but it is not present in the live demo pages on the c3-angular site. Can you please point me to a live working example page? I'd be most obliged, as I could then be able to check exactly which versions of the various libraries are needed to get all this straight. I am using c3-angular v0.7.1.

from c3-angular-directive.

Great workaround, @tamasgal. Thank you!
In the meantime I have found out that attribute tick-format is simply plainly ignored by the library code.

The tickFormat value is present in the object created by angular while parsing the HTML, but there are no lines of library code that care about it. Only tick-rotate and tick-format-function are managed.

This looks to me a plain old-fashioned regression bug, certainly it's no enhancement request: documentation talks about possibility to use tick-format; allegedly this feature used to work in the past, but now it certainly doesn't.

from c3-angular-directive.

@tamasgal - after your kind clarifications offline, I have implemented inside the controller code my own series of formatting functions like:

$scope.dDOTmDOTYFormattingFunction = function(t) { return d3.time.format("%d.%m.%Y")(new Date(t)); }

...and so on.

from c3-angular-directive.

Hi,

I'm having the same issue, where should I put that function @tamasgal? Inside the controller, in an apart js...

Some functional example would be nice.

Thanks.

from c3-angular-directive.

This issue is becoming many issues in one. Going to extract multiple issues out of this one. Than I am closing this issue.

from c3-angular-directive.

Everything should be fine now. The example contains an example in the dynamic tab using time series. Going to close the issue, in case of problems feel free to let me know.

from c3-angular-directive.

I confirm that the issue is still in 1.3.1, I have used a format function, the same workaround @tamasgal proposed.

from c3-angular-directive.

Hi there, i am having this issue too with last version. So i have a question because i started with hottowel angular project and i can't use 'd3' as you all did for the workaround of @tamasgal. So how do i inject d3 to use it in my controller ?

from c3-angular-directive.

Is this still unresolved? I'm unable to even use the tick-format-function workaround.

from c3-angular-directive.