We are using the line chart from OutsystemsUI, and we are getting strange behavior when using a date as the label. Below is what it currently looks like:
I am not sure why the points do not correlate exactly with the date or why 12:00 is being added between the dates. Here is my advanced format json:
Here is my data point list as a json:
ok,
I can cofirm that adding that tickinterval to your oml yields the desired result for me, so I think any residual problems you have are related to your version of Outsystems UI, i.e. this is an old bug in the charts that has been solved in later versions.
You are on 2.6.7, I'm on 2.14
this is what the only thing I've changed to your OML :
and this is what I see when testing :
Dorine
Along with Kilian's answer of adding "tickInterval: 24 * 3600 * 1000" to the advanced format xAxis which gets rid of the 12:00, it appears the points get shifted in OutSystemsCharts Version 1.3.7. Upon downloading Kilian's oml, I updated the dependencies, and the same issue occurred. Updating components takes days worth of testing, so we will likely ignore the issue until we are ready to update.
Hi Matthew,
It is so strange, could you confirm the date variable mapped in the chart is a date type instead of a date time type?
Kind regards,
Sergio
Data type being mapped from:
Data type being mapped to:
Mapping process:
Quick update: I forgot to mention this earlier, but this issue is in both reactive and mobile. I first noticed it because I was copying UI from our reactive app to our mobile app.
Hi @Matthew Vines ,
Can you share an oml ?
Also, i have see some strange chart behaviour in the past around date labels. As far as I can remember correctly, it was caused in the outsystems component, not in highcharts itself.
Might be worth trying to trick OS chart into thinking it's a text, not a date. (someting like adding a space) if not as a real solution, to at least confirm that's the problem
It still detects the date with a space, but that was a good idea. I will try to play around with more formatting to see if I can trick it. I have attached an oml file.
Matthew,
First, to get rid of the "12:00", add this to the AdvancedFormat.XAxisJSON:
"tickInterval: 24 * 3600 * 1000"
This will set a tick interval of 1 day, which is what you want.
Secondly, it seems that for some reason your markers are in between the ticks. I have no idea what causes that, a quick test of my own didn't show that (see attachment).
One last remark: you shouldn't explicitly set the colour of the data points, but instead only on the series. Otherwise, if you change the series colour, the data points will still have the "old" colour.
I provided an oml file to Dorine above if you would like to view it. Your solution works to get rid of the 12:00. Additionally, if you add startOnTick: true and endOnTick: true on the xAxis format, it shows all the dates in the range, but the line is still offset. The difference between our oml is the use of advanced format yAxis and series, so that is likely the cause. I will give updates if I find the issue.
I don't think it gets any simpler than this. I am not sure how you were able to get it working in that screenshot.
Thanks for the post and the solution!