Page 1 of 1
X-axis with date behaving differently in Chrome
Posted: Tue Nov 13, 2018 8:45 am
by ceeol
Please check:
https://cloud.highcharts.com/show/S__QgK2mu
On my computer:
For Firefox and Edge the x-axis shows up nicely with only year numbers.
In Chrome, full dates are displayed and creates chaos.
I have a Norwegian localization setting, which seems to be picked up by Chrome somehow, but ignored by Edge and Firefox?
How do I make Chrome show years only?
Cheers,
Ole
Re: X-axis with date behaving differently in Chrome
Posted: Tue Nov 13, 2018 11:19 am
by rafalS
Hi, ceeol!
It is hard to say why your labels are displayed incorrectly without seeing your code/settings. If you want to display years only, could you set this option and let me know if it worked? Go to: Customize Chart -> ADVANCED -> X Axis -> Labels -> Format: {value:%Y}
Best regards!
Re: X-axis with date behaving differently in Chrome
Posted: Wed Nov 14, 2018 8:24 am
by ceeol
Still doesn't work, it is as if Chrome doesn't understand that this is a date. Can I send you my full json-config to an e-mail address?
Regards,
Ole
Re: X-axis with date behaving differently in Chrome
Posted: Wed Nov 14, 2018 1:25 pm
by rafalS
Re: X-axis with date behaving differently in Chrome
Posted: Fri Nov 16, 2018 10:51 am
by rafalS
Hi, Ole
I copied your chart config and everything works fine in my chart. The only difference is data - for obvious reasons I couldn't copy your data, I just added my own few points:
https://cloud.highcharts.com/show/B1iW79qyK
Could you try to test your chart with a different sample data?
Rafal
Re: X-axis with date behaving differently in Chrome
Posted: Fri Nov 16, 2018 12:34 pm
by ceeol
Hi Rafal,
Not entirely clear to me why you couldn't use my data, the data is included at the bottom of the configuration, isn't it?
Also, I have no way of establishing whether your graph makes sense, since all the "x's" are 1970... Are these really dates?
Ole
Re: X-axis with date behaving differently in Chrome
Posted: Fri Nov 16, 2018 12:50 pm
by rafalS
The data you sent me:
Code: Select all
"Policy Rate\"\n\"01.01.2004\";2.25\n\"02.01.2004\";2.25\n\"05.01.2004\"......
is not readable and I can't use it. Can you send me your csv file?
I updated my chart with real sample data which is:
16 November 200
5 12:48:55
16 November 200
6 12:48:55
16 November 200
7 12:48:55
16 November 200
8 12:48:55
https://cloud.highcharts.com/edit/192349
Re: X-axis with date behaving differently in Chrome
Posted: Mon Nov 26, 2018 7:52 am
by ceeol
Well, that's what the interface gave me in "Preview options".
I thought maybe that could be reused...
Sending you the csv-file...
Ole
Re: X-axis with date behaving differently in Chrome
Posted: Tue Nov 27, 2018 4:06 pm
by rafalS
Ole,
It is recommended to feed the chart with data in number format. For now, your data is a string format and that's why Cloud is confused. Cloud handles this format in some cases, but it is still better and recommended to provide x data as a timestamp (number) format.
If you'd like to stay with your current data, you could use this workaround. I wrote a function that will parse your date string and return only a year:
Code: Select all
"labels": {
//"format": "{value:%}"
formatter: function() {
let arr = this.value.split(".")
return arr[2]
}
}
Let me know if you have any additional questions.
Best regards!
edit: I can see that split() method doesn't work on other browsers. It will be best if you just change the format of your data.
Re: X-axis with date behaving differently in Chrome
Posted: Wed Nov 28, 2018 9:49 am
by ceeol
Ok,
So we are getting somewhere. You are saying that cloud is confused, but in reality it is Chrome that is confused. The other browsers work. Do you treat Chrome differently from other browsers?
Also, you claim that this is a text format, but Excel understands this format as a date, and this is indeed the format I am getting from the data provider. You couldn't possibly be expecting all dates to be UNIX time, e.g. seconds since 1970? How would I explain that to a novice user of the platform? Don't think Excel can deliver that, which means that in reality you will not be able to read Excel nor CSV date formats properly.
One misunderstanding: It is not that I want years only in a static way, I would like the x-axis to scale and adapt, just the way it already works in Edge and Firefox.
Ole
Re: X-axis with date behaving differently in Chrome
Posted: Mon Dec 03, 2018 12:16 pm
by rafalS
Hi, ceeol,
Sorry for the late reply - I am still waiting for some comments.
You were right, I misinterpreted your issue and Cloud docs. I spent a lot of time looking for a real issue and I found that the problem doesn't affect Cloud only but our whole Highcharts library. I reported it 3 days ago as a bug (and this is where I am waiting for comments and fix) here:
https://github.com/highcharts/highcharts/issues/9565
Let me know if you have any additional questions at this moment.
Kind regards!
ps. Cloud 3.0 will be released on Thursday this week
Re: X-axis with date behaving differently in Chrome
Posted: Mon Dec 03, 2018 2:30 pm
by ceeol
Cool, looking forward to getting this solved…
Also, eagerly awaiting version 3
!
Regards,
Ole
Re: X-axis with date behaving differently in Chrome
Posted: Wed Dec 05, 2018 11:07 am
by rafalS
Hi, ceeol,
This issue has been solved. Chrome couldn't read date data with dot notation like 01.01.2005. You can find more info on our GitHub channel.
Working jsFiddle with fixed Highcharts module:
https://jsfiddle.net/4f9xyg62/
Best regards!
Re: X-axis with date behaving differently in Chrome
Posted: Mon Dec 10, 2018 9:34 am
by ceeol
Had a look at
1. The graph in the link that I sent you, which was not fixed
2. The jsfiddle example.
Again, I never wanted only the years to show, but I observed like you were saying that Chrome didn't understand the datetime format.
So I removed the formatting itself, but kept the "datetime" setting from jsfiddle, and it seemed to work.
Went back to my own example, and explicitly set "datetime" as the format of the x-axis in the new user interface. That should be the only thing necessary, I thought. But no, now there is some kind of decimal format showing up, please have a look at
https://cloud.highcharts.com/show/S__QgK2mu in the different browsers again.
Cheers,
Ole
Re: X-axis with date behaving differently in Chrome
Posted: Mon Dec 10, 2018 1:10 pm
by rafalS
Ole,
The issue has been fixed and it's available in this module:
https://github.highcharts.com/js/modules/data.src.js but not available in the main module which Cloud uses:
https://code.highcharts.com/js/modules/data.src.js
Please be patient, changes will be merged with the main module soon.
Best regards!
edit: we have changed the used module only in your one chart - you can see that years are displayed correctly now.