4

If i have a unix timestamp as my xaxis, how can i format the xaxis ticks so that they are human readable. Example:

var x = [
    1599149438,
1599152204,
1599159972,
1599162392,
1599163074,
1598638057,
1598638162,
1598638226,
1598638737,
1598886967,
1598887053,
1598887100,
1598888440,
1598888461,
1598890461,
1598891566,
1598968484,
1598968486,
1598968890,
1598969703,
1598973067,
1598991253,
1599071690,
1599071701,
1599136836,
1599137112,
1599137318,
1599137466,
1599137670,
1599150700,
1599155337,
1599155392,
1599155577,
1599235215,
1599235282,
1598976507,
1598991992,
1598992284,
1598992486,
1599064430,
1599064971,
1599066545,
1599069206,
1599069328,
1599069429,
1599071321,
1599137701,
1599139341,
1599139739,
1599139742,
1599143693,
1599144879,
1599150125,
1599155492,
1599156034,
1599162164,
1599163112,
1598634550,
1598634555,
1598637859,
1598637942,
1598638040,
1598638649,
1598639958,
1598640067,
1598640069,
1598640159,
1598640245,
1598640257,
1598640954,
1598641170,
1598649524,
1598649560,
1598884823,
1598885218,
1598885439,
1598887053,
1598887054,
1598890406,
1598890465,
1598892329,
1598899069,
1598903026,
1598903207,
1598903209,
1598903305,
1598903454,
1598903458,
1598968859,
1598988950,
1599064427,
1599064600,
1599065298,
1599069186,
1599071503,
1599137132,
1599142552,
1599142554,
1599142600,
1599147475,
1599151206,
1599151209,
1599233072,
1599235214,
1599235215,
1598637923,
1598879892,
1598885127,
1598888004,
1598890401,
1598890430,
1598891168,
1598891349,
1598891858,
1598892218,
1598897872,
1598899068,
1598899198,
1598903025,
1598967466,
1598969602,
1598970350,
1598970387,
1598970504,
1598973061,
1598978899,
1598978899,
1598989060,
1598989167,
1598990662,
1598990667,
1598992523,
1599057106,
1599059031,
1599064597,
1599064854,
1599065090,
1599066202,
1599066909,
1599077441,
1599137013,
1599142759,
1599142939,
1599143690,
1599144683,
1599144913,
1599147476,
1599150607,
1599150699,
1599155252,
1599234372,
1599234511,
1599234706,
1599234781,
1599235177,
1598989250,
1598889205,
1599066930,
1599067016,
1598885039,
1598885441,
1598888004,
1598888004,
1598970289,
1599139727,
1599142955,
1599155702,
1599155836,
1599156105,
1599156105,
1599233225,
1599233226,
1599234812,
1599234912,
1598638124,
1598638194,
1598886968,
1598886972,
1598989172,
1599155569,
1598888562,
1598889225,
1598991163,
1599057240,
1599065194,
1599066319,
1599066405,
1599066542,
1599066887,
1599071301,
1599071757,
1599071776,
1599072050,
1599136844,
1599142567,
1599149442,
1599155431,
1599232940,
1599233052,
1599233221,
1599233644,
1598638655,
1599071505,
1599235219,
1598970796,
1599150632,
1599137485,
1598884828,
1598984576,
1598984582,
1598984582,
1598984582,
1598984582,
1598984582,
1598984582,
1598984582,
1598984582,
1598984582,
1598984582,
1598984582,
1598984582,
1598984582,
1598984582,
1598984582,
1598984582,
1598984582,
1598984582,
1598984582,
1598984582,
1598984582,
1598984582,
1598984582,
1598984582,
1598984582,
1599155930

];
var y = [0.18, 0.38, 0.56, 0.46, 0.59, 0.4, 0.78, 0.77, 0.74, 0.42, 0.45, 0.39];
var data = [{
  x: x,
  y: y,
  type: 'histogram'
}];
var layout = {
  xaxis: {
    tickformat: "&H"  // For more formatting types, see: https://github.com/d3/d3-format/blob/master/README.md#locale_format
  }
}

Plotly.newPlot('myDiv', data, layout);

https://codepen.io/maxfridbe/pen/JjXvbqe?editable=true%3Dhttps%3A%2F%2Fplotly.com%2Fjavascript%2Ftick-formatting%2F

maxfridbe
  • 5,872
  • 10
  • 58
  • 80

2 Answers2

2

Not sure if PlotlyJS is able to do the conversion but you can use standard JS function to rewrite the timestamps:

var format = {year: '2-digit', month: '2-digit', day: '2-digit'};
var data = [{
  x: x.map(unix => Intl.DateTimeFormat('en-US', format).format(unix*1000)),
  type: 'histogram'
}];

Plotly.newPlot('myDiv', data);

Intl.DateTimeFormat() is my preferred way to do the conversion but Convert a Unix timestamp to time in JavaScript lists a bunch of more options.

Additionaly, I removed your y data. Defining both x- and y-values only makes sense in combination with a histfunc.

Pascalco
  • 2,481
  • 2
  • 15
  • 31
1

I iterated over the dataset and converted every timestamp in the array to JS date object with new Date(timestamp) and forwarded that array to Plotly.newPlot(). Standard Date object seems to be recognized by Plotly.

ph0enix
  • 763
  • 2
  • 8
  • 23