how to format flot char yaxis and tooltip by value seconds?

Question

I'm working with flot char. I need to show the yaxis H:i:s time format(for ex. yaxis - 00:00:00, 00:05:00, 00:10:00 and etc.), and tooltip like: 10 hour - 00:02:05 time. There is my array data, second element is in seconds:

var data = [[1, 0],[2, 0],[3, 0],[4, 0],[5, 0],[6, 0],[7, 0],[8, 0],[9, 7],[10, 123],[11, 47],[12, 0],[13, 0],[14, 0],[15, 0],[16, 0],[17, 0],[18, 0],[19, 0],[20, 0],[21, 0],[22, 0],[23, 0],[24, 0]];

And it's the code of flot char:

this.options = {
                xaxis : {
                        mode : null,
                        tickLength : 5,
                        min : 1,
                        max : 24,
                        ticks: [[1, "1 hour"], [2, "2 hour"], [3, "3 hour"], [4, "4 hour"], [5, "5 hour"], [6, "6 hour"], [7, "7 hour"], [8, "8 hour"], [9, "9 hour"], [10, "10 hour"], [11, "11 hour"], [12, "12 hour"], [13, "13 hour"], [14, "14 hour"], [15, "15 hour"], [16, "16 hour"], [17, "17 hour"], [18, "18 hour"], [19, "19 hour"], [20, "20 hour"], [21, "21 hour"], [22, "22 hour"], [23, "23 hour"], [24, "24 hour"]]
                },
                series : {
                        lines : {
                                show : true,
                                lineWidth : 1,
                                fill : true,
                                fillColor : {
                                        colors : [{
                                                opacity : 0.1
                                        }, {
                                                opacity : 0.15
                                        }]
                                }
                        },
                        points: { show: true },
                        shadowSize : 0
                },
                selection : {
                        mode : "x"
                },
                grid : {
                        hoverable : true,
                        clickable : true,
                        tickColor : "#efefef",
                        borderWidth : 0,
                        borderColor : "#efefef"
                },
                tooltip : true,
                colors : ["#3734d5"]

        };

        var opt = {
                tooltipOpts : {
                        content : "<b>%x</b> hour - <span>%y</span> time",
                        defaultTheme : false
                }
        };

$.plot($("#chart"), [data], $.extend(true, opt, this.options));

How to format tooltipOpts content? thank you

Answer 1

You can set the content option to a function instead of a string and format the time value like this (full code in this fiddle):

  content: function(label, x, y, datapoint) {
    var seconds = (y % 60).toString();
    if (seconds.length == 1) {
      seconds = "0" + seconds;
    }

    y = Math.floor(y / 60);
    var minutes = (y % 60).toString();
    if (minutes.length == 1) {
      minutes = "0" + minutes;
    }

    y = Math.floor(y / 60);
    var hours = (y % 60).toString();
    if (hours.length == 1) {
      hours = "0" + hours;
    }

    var time = hours + ":" + minutes + ":" + seconds;
    return "<b>" + x + "</b> hour - <span>" + time + "</span> time";
  }