How to convert seconds to HH:MM format for Highcharts side

Hello, Denis,
 
Thank you for reaching out to us.
 
Our team would like to kindly recommend using the following approach in order to set an appropriate time formatting for Highcharts:
 
The data object passed to Highcharts has the structure of the chart object described in Hightcharts API Reference. It means it can be modified in the desired way before being passed to the handler.
 
In order to cover your requirement to display seconds in HH:mm format as Flexmonster does, we recommend format labels of an appropriate axis with a custom function. It is also important to customize the tooltip in the way it contains formatted values as well.
 
We have prepared an example demonstrating the described approach.
 
Please note that implementing the formatting for the pie chart can require additional modifications of the data object.
 
Finally, in order to have the possibility to get information about the type of the specific hierarchy, it is possible to use the mapping object. The Mapping Object allows defining field data types, captions, and multi-level hierarchies. It is possible to retrieve such an object using the getReport method and apply appropriate changes based on data from it.
Detailed information about the mapping object and its properties can be found in our documentation. Also, we recommend checking out the page dedicated to the getReport API.
 
We hope it helps.
 
Do not hesitate to contact us in case additional questions occur.
 
Best regards,
Illia

Hello, Denis,
 
Thank you for your feedback.
 
In case more than one measure is used and the order is unknown, we recommend considering using the following approach:
 
Flexmonster provides the getMeasures API call that returns a list of the selected measures in the report. Measures are represented as objects with specific properties, including the name of the measure and its data type.
 
Therefore, it is possible to scan all selected measures before modifying the data object and choose those to which the time formatting should be applied.
 
Please see an example we have prepared for you. It uses a sample data set created basing on the screenshot you have provided.
 
Our team would like to provide some additional explanation about following code snippets which are parts of the applyTimeFormatting function (starting on line 63):

function applyTimeFormatting(data) {

  let measures = pivot.getMeasures();
  let timeFormatted = [];
  for (let measure of measures)
    if (measure.type == 'time')
      timeFormatted.push(measure.caption);
  ...

This block of code is responsible for retrieving names of measures which data type is time and saving them to the timeFormatted array.
 
Such an array is used in the following part of the function:

for (let axis of data.yAxis)
    if (timeFormatted.includes(axis.title.text))
      axis.labels = {
        formatter: function() {
          return formatter(this.value);
        }
      }

It filters all elements of the yAxis array and applies an appropriate formatting in case the title of an axis can be found in the timeFormatted array.
 
Finally, the tooltip needs to be customized:

data.tooltip = {
    useHTML: true,
    formatter: function() {
      let value;
      if (timeFormatted.includes(this.point.series.name))
        value = formatter(this.y);
      else value = this.y;
      return `${this.point.category}<br>${this.point.series.name}: <b>${value}</b>`;
    }
  }

It uses a similar algorithm and format the value only in case its name is mentioned in the timeFormatted array.
 
The described approach allows applying formatting despite the order of measures and their quantity. It can be used in order to apply formatting for other data types as well.
 
We would like to draw your attention to the fact that the provided example is quite general. Additional modifications may be required for your case; however, it illustrates the general idea that can be used as a template.
 
We hope it helps.
Please contact us in case any additional questions appear.
 
Best regards,
Illia