Dynamically change x axis to a date/time value

[salasidis]

I have 2 graphs I need to create, One is a graph of 1440 points – representing the last 24h (in minute increments) of the day.

 

The second graph is an array of time_t  (sec since 1970) values.

 

Is it possible for the software to dynamically scale these X axis values to hh:mm in the first case, and YYYY/MM/DD (with tick marks every hour or more depending on the range)

 

Thanks

[salasidis]

In the 24 hour example, not sure if it would be possible to the interval marks on the X axis centered on the hour.

For example if it is now 17h30, the graph will start at 17h31 (yesterday), but should have major vertical lines at 18h00, 19h00 etc all the way to 17h00 today. Minor tick marks could be every 15 min in between.

Not sure if that is possible, but it would look a lot better than having times that are not rounded off on the X axis.

[svetoslav_borislavov]

Hi,

To format the x-axis label`s values you can use the formatFunction. Here is an example for setting the value to hh:mm :

formatFunction: function (value) {

const hours = value.getHours().toString().padStart(2,0);

const minutes= value.getMinutes().toString().padStart(2,0);

return hours + ':' + minutes;
}

You can centre the x-axis centred on the hour with the baseUnit set to ‘hour’.
The gap between the hours can be set with the unitInterval set to 1. This will make the gap to be one hour.

To set the starting point to be yesterday`s hour you can create a date variable and set it to the minValue:

const yesterday = new Date();
yesterday.setDate(yesterday.getDate() -  1);

you can set the minValue to yesterday

If you need further assistance, do not hesitate to ask!

Best Regards:
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 4 months ago by svetoslav_borislavov.

[Author]

Posts