Plotly.js: Axis year strings being reformatted as numbers and interpolated

[tlrdstd]

Maybe I'm just nuts, but I can't figure this out. When I pass an array of stringified years as data to Plotly, it interpolates the strings as numbers:

http://codepen.io/anon/pen/RrayBx

Note that it shows my years as "2013", but then interpolates them as "2,013.5". Ugh.

It seems likely that tickformat could help me here, but I've looked at https://github.com/mbostock/d3/wiki/Formatting#numbers and https://docs.python.org/release/3.1.3/library/string.html#formatspec and none of those options seem to help. They change the value, but nothing fixes it for real.

IF I have multiple years ['2014', '2015'], then setting tickformat: 'd' "works". That feels like a violation of the spirit of what I want, though: a year is not a decimal number, it's a string. And I'm passing it in as a string, not a decimal number.

And perhaps a related bug: with only one year tickformat: 'd' doesn't work either. It hides the label entirely:

[etpinard]

Try http://codepen.io/etpinard/pen/GoZdVB

[etpinard]

More info about plotly dates: http://help.plot.ly/date-format-and-time-series/

[tlrdstd]

Ehhh. I see what you're saying, but that's not really what I want either. I want to provide YYYY, not YYYY-MM-DD.

My underlying issue, I think, is that I have formatted my data before I pass it to Plotly. I've made the formatting decisions upstream, and I'd like Plotly to respect those decisions. I passed an array of strings...why does Plotly coerce them to floating-point numbers?

Is there a way to disable the automatic input processing?

[etpinard]

@tlrdstd plotly.js considers all numeric strings as numbers (i.e. floating points numbers) throughout the code. The main reason for this is to have a seamless API for folks feeding plotly.js with numeric strings coming from DOM nodes.

In your case, you can tell plotly.js that your data represent strings (or categories in plotly.js lingo) by adding type: 'category' in the axis attributes. See http://codepen.io/etpinard/pen/JGKEzQ

Note that there is currently no way to customize the order of the categories, plotly.js plots them in the order of the input data. We hope to add an ordering axis attribute soon.

[tlrdstd]

@etpinard Thanks for the background info. Based on your advice, I was able to specify type: 'category' to correctly represent my x axis. Thanks so much for the work you all are doing!

[vinceau]

@etpinard @tlrdstd Adding type: 'category' isn't a very good solution since if you're plotting dates on the x-axis, it will remove the linearity of the dates. For example if you're plotting the dates 1990, 2005, 2006 on the x axis, you'd expect the distance between the points for 1990 and 2005 to be larger than the distance between the points for 2005 and 2006. However, by adding type: 'category' they will be equidistant from each other which is undesirable.
Is there no alternative way of removing the floating point in years?

[etpinard]

@vinceau you're right.

For @tlrdstd 's case, switching the axis type gave the desired result, but it is by no means generalizable.

The _real_ solution is to feed Plotly.plot with the datetime formatted as presented here or with js new Date(yyyy, mm, dd).getTime(). Example: http://codepen.io/etpinard/pen/xZPVzp

Though I agree, it would be nice to make the input datetime format configurable at some point.

[vinceau]

@etpinard The issue is a lot of the time (I'm sure I'm not alone in this) the date data provided specifies the year but nothing more. Sure, you could specific January 1st of the year but that is twisting the data and isn't accurate. Ideally we could just have a category for the x-axis such as type: date such that it will always try to interpret the data provided as a date.

[etpinard]

@vinceau I agree. plotly's date support has some limitations at the moment.

Currently, having x set to [2013, 2014, 2015] and xaxis.type set to 'date' interprets the x coordinates as unix time stamps, not years. Adding an option to let plotly know the format of the input dates would be a great addition.

That said, you can still achieve something reasonable with the current version by (1) converting the input x dates to JS dates and (2) setting a custom tick and/or hover format.

Example: http://codepen.io/etpinard/pen/JGKEzQ

[ronyarmon]

Hi, I encountered similar issue with years using the following format for plotting, can you tell me where to insert the type:'category' (or other solution)?

all_deciles=indicators_dict[92019]
py.iplot([{
'x': all_deciles.index,
'y': all_deciles[col],
'name': col} for col in all_deciles.columns], filename='England_deciles')

[etpinard]

@ronyarmon please ask questions of the likes on https://community.plot.ly/c/api/python