Indicator - converting seconds to HH:MM:SS format
In this post we will explain how to convert a time displayed in seconds to a format of HH:MM:SS within an Indicator widget.
Let's look at the below example, we have an Indicator that shows the total duration in seconds:
In order to convert it hh:mm:ss format, we will need to add a short Java Script to the Widget. This is done by selecting "edit script" option from the Widget menu as seen below:
- Paste the below Java Script code:
widget.on('ready', function (s,e){
function convertRawTime(num){
var sign = num < 0 ? '-' : '';
var hours = (parseInt( Math.abs(num) / 3600 )%24);
var minutes = parseInt( Math.abs(num) / 60 )%60;
var seconds = parseInt( Math.abs(num) % 60);
var hoursText = hours < 10 ? "0" + hours : hours;
var minutesText = minutes < 10 ? "0" + minutes : minutes;
var secondsText = seconds < 10 ? "0" + seconds : seconds;
if (hours==0){
var secondsText = seconds < 10 ? "0" + seconds : seconds;
return sign + minutes + ":" + secondsText
} else {
var hoursText = hours < 10 ? "0" + hours : hours;
var minutesText = minutes < 10 ? "0" + minutes : minutes;
var secondsText = seconds < 10 ? "0" + seconds : seconds;
return sign + hoursText + ":" + minutesText + ":" + secondsText
}
};
setTimeout(function(){$('#number_span',element).text(convertRawTime(e.widget.queryResult.value.data))
}, 250
);
});
- Click save
- Go back to the widget editor window and refresh the browser
The result would be:
Once you have a fully custom script, it’s time to share your work with others in the Sisense community. Visit the How to Create, Customize, and Promote Plugins in the Sisense Community article to learn how to promote your plugin in the community.
-
This does not appear to work any more in 6.6.1. The indicator is using a canvas element now.
Here is an update to this example that manipulates the result data before it is displayed by the canvas. ConvertRawTime is the same. We fire on an earlier event (processresult), and update the query results directly before rendering the widget.
widget.on('processresult', function (s,e){
function convertRawTime(num){
var sign = num < 0 ? '-' : '';
var hours = (parseInt( Math.abs(num) / 3600 )%24);
var minutes = parseInt( Math.abs(num) / 60 )%60;
var seconds = parseInt( Math.abs(num) % 60);
var hoursText = hours < 10 ? "0" + hours : hours;
var minutesText = minutes < 10 ? "0" + minutes : minutes;
var secondsText = seconds < 10 ? "0" + seconds : seconds;
if (hours==0){
var secondsText = seconds < 10 ? "0" + seconds : seconds;
return sign + minutes + ":" + secondsText
} else {
var hoursText = hours < 10 ? "0" + hours : hours;
var minutesText = minutes < 10 ? "0" + minutes : minutes;
var secondsText = seconds < 10 ? "0" + seconds : seconds;
return sign + hoursText + ":" + minutesText + ":" + secondsText
}
};
// update the primary indicator
e.result.value.text=convertRawTime(e.result.value.data);
// update the secondary indicator, if there is one
if (e.result.hasOwnProperty('secondary')) {
e.result.secondary.text=convertRawTime(e.result.secondary.data);
}
}); -
I was using this code, and it doesn't work in 6.6.1 anymore either:
/* FROM: https://support.sisense.com/entries/40938460-Convert-Seconds-to-Time-Format */
widget.on('processresult',function(widget,result) {
//Get the Widget ID
var wid = widget.oid;
//Get the value
var num = result.result.value.data;
num = num * 60 // we have minutes, but need to break down to seconds/milliseconds//Function to convert the time
var convertTime = function(num,wid) {
var nextText = '';
//Only run if the value is numeric
if ($.isNumeric(num)) {
if (num >= 3600) {
newText = parseInt(num/3600) + 'h ' + parseInt(num%3600/60) + 'm ' + parseInt(num%3600%60) + 's ';
}
else {
newText = parseInt(num%3600/60) + 'm ' + parseInt(num%3600%60) + 's ' + parseInt(num%1 * 1000) + 'ms';
}
//Find the widget span
var widget = $('widget[widgetid='+wid+']');
var span = $('#number_span',widget);
//Write back the text
span.text(newText);
}
};
//Write back the formatted text
setTimeout(function(){
convertTime(num,wid);
},100);
}) -
Hi,
I had an issue with this indicator, as if there are more than 24 hours, it gives you only the remaining part ( I had 30 hours, and it wrote 6 hours, as 30-24 =6)
I deleted the % 24 near the var hours = (parseInt( Math.abs(num) / 3600 )); line and everything is working fine now.
-
The exact method will vary by widget. The method of transforming it can use the same convertRawTime() function here.
For a pivot, you need to identify which cells you want to reformat and only reformat those cells.
A short example of replacing cells in a pivot based on their value is here:
If want to modify all numbers in a certain (pivot widget) column, you can loop through the values for a single column:
(This block is adapted from working code, but untested in its current form. It serves as an example of the technique but might need minor debugging). function convertRawTime() is assumed to be included elsewhere in the script.
widget.on('ready', function(sender, ev){
//pick a column to reformat, 0-indexed
var ColumnNumber = 1;
//get array of elements to replace
var ColumnData = $('td.p-value[fidx=' + ColumnNumber + '] .p-value', element);
var L = ColumnData .length;
var CellData;
var CellDataValue;
//loop through each cell in the column
for (i=0; i<L; i++)
{
CellData = ColumnData [i];
//get the numerical value for this cell
CellDataValue = CellData.innerHTML.replace(/[^\d.-]/g, '');
CellData.innerHTML = '<div class="p-value">'+convertRawTime(CellDataValue)+'</div>';
}
});
Please sign in to leave a comment.
Comments
6 comments