Highcharts DateTime format on X-axis

Question

Reactive

Charts

Service Studio

Application Type

Reactive

Service Studio Version

11.11.12 (Build 47321)

Hello everyone,

I've got a question regarding the highcharts implementation in Oustystems.

I am trying to implement a chart using DateTime on the X-axis as seen below.

I would like to format the time so that only the years are shown so: [2017,2018,2019,2020,2021]

The data used look like this:

It seems like highcharts does not like the dateformat of outsystems and it somehow needs to be converted.

Is there any information available about the interaction between highcharts and Outsystems?

Thanks in advance! Let me know if more information is needed

16 Aug 2021

João Marques

MVP

Rank: #24

Solution

Hi Bradley,

You will need to add formatting to the AdvancedFormat , something like in this post where a similar problem was raised and issued.

You can format the date using the following formats to build the date you need:

Currently these formats are supported:
    * %a: Short weekday, like 'Mon'.
    * %A: Long weekday, like 'Monday'.
    * %d: Two digit day of the month, 01 to 31.
    * %e: Day of the month, 1 through 31.
    * %b: Short month, like 'Jan'.
    * %B: Long month, like 'January'.
    * %m: Two digit month number, 01 through 12.
    * %y: Two digits year, like 09 for 2009.
    * %Y: Four digits year, like 2009.
    * %H: Two digits hours in 24h format, 00 through 23.
    * %I: Two digits hours in 12h format, 00 through 11.
    * %l (Lower case L): Hours in 12h format, 1 through 11.
    * %M: Two digits minutes, 00 through 59.
    * %p: Upper case AM or PM.
    * %P: Lower case AM or PM.
    * %S: Two digits seconds, 00 through 59

Kind Regards, João

16 Aug 2021

Saravanan Santhanam

Rank: #439

Hi Bradley,

Please refer below link for various formatting options available for high charts. In your case try to apply the formatting in X-axis JSON.

https://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats

Regards,

Saravanan Santhanam.

16 Aug 2021

Dorine Boudry

MVP

Rank: #38

Hi Bradley,

besides the question of how you would format datetime, what do you mean when you only want to show the year ? Do you only want 1 datapoint per year, or do you want many datapoints per year, but all of them only showing the year value ???

If you only want one datapoint per year, you'll have to run an aggregation function on your aggregate or SQL widget. In that case, you can just add a calculated column for the year, group by that column and then whatever aggregation function (min ? max ? average? ) that you want on your value. So in that case, no hassle with datetime formatting at all.

Dorine

16 Aug 2021

Bradley Lansink

Rank: #895

Thanks for the replies!

I got it partially working. I was able to format the date to years only using the following snippet:

" xAxis: {
        type: 'datetime',
      title: {
        text: 'Date Range'        
      labels: {
        formatter: function() {
          return Highcharts.dateFormat('%e', this.value);
    }"

The next step would be to only show one year of each. This is the result at the moment:

I would like to get something like this:

I think it has something to do with the tickAmount, but Im not quite sure.

Thanks in advance!

17 Aug 2021

Loading...