166
Views
8
Comments
Solved
Chart: Format x axis labels with DateTime
Service Studio Version
11.54.33 (Build 62940)

Okay, 

so I scrolled through a dozen of similar questions, but I cannot find the correct answer to my question:

What is the correct way to have the x axis of a chart use and display DateTime as the label?

Some context:


The chart

The local variable

The result

The raw JSON returned from the server action

As you can see, the chart interprets the x axis correctly and properly formats the data and tooltip. Only the x axis markers show a very large number (I am guessing Unix epoch time) instead of the text representation.

What I am doing wrong here? And why is it so hard?

Some help would be greatly appreciated, I have been stuck on this issue for hours.


2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

you can expand OptionalConfigs on the XAxis block

2024-05-08 06-29-37
Prince Aadil Khan Panwar

Hi @Ulf von Ceumern

I suggest to create on after fetch action of aggregate or data action. 

And take the list into the loop and with the current label into this 





And assign into the same record. In which format you want to

FormateDateTime(Current.label,"dd-Mm-YYYY")

If your record is text then use 

FormateDateTime(DateTimetoText(Current.label),"dd-Mm-YYYY")

. And use that list into the chart. 

Hope this helps

thanks 

Prince

UserImage.jpg
Ulf von Ceumern

Do I understand correctly, that only the Date portion is supported by the chart?

Can't I use the DateTime value directly as the label? I want to have the time value show up as well, because the data is usually from the last 24 hours.

UserImage.jpg
Ulf von Ceumern

Update:

I modified the data source to format the label as suggested:

FormatDateTime(time,"yyyy-MM-dd")

This is the result:

So the time part of the DateTime gets lost and the data is just squashed for each day...

2021-09-06 15-09-53
Dorine Boudry
 
MVP

Hi @Ulf von Ceumern ,

whenever you want to do something a bit more advanced with Outsystems Charts, I find it is always a bit of hit and miss, and trial and error.  Choices made about what is configurable in which way, and choices in the implementation on Outsystems side, are sometimes obscure.

I had a try for your example, and this is how you can get it to work :

you need to set the Values type to DateTime at both the chart and X axis level for some reason.  If you don't do it at chart level, it will treat your labels as text and not display the correct time gape between 2 datapoints, if you don't do it at xAxis level, it will show the axis labels as numeric (so the epoch delta in seconds)

When you do just these 2 things, the x axis will show a human readable value, and the datapoints will be correctly spaced out.  What is shown on the X-axis is still not under your control, but Outsystems and/or Highcharts try their best to fit the chosen interval and labels to your data. (i.e. if it spans several days, it will somehow show the date transitions.)

Dorine

UserImage.jpg
Ulf von Ceumern

That sounds really promising! However, I can't find where to set the ValuesType for the x-axis. Can you point me in the right direction?

2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

you can expand OptionalConfigs on the XAxis block

UserImage.jpg
Ulf von Ceumern
2020-09-04 11-39-50
Rogier Olde Dubbelink

Thank you so much Dorine!

"You need to set the Values type to DateTime at both the chart and X axis level for some reason"

I would have never figured this out myself.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.