How to display current time in a tooltip flot chart?

Question

Sorry if this problem has been already questioned. I think I'm close to what I wanna do, but it's something I omit.

I have a real time flot chart which has on x-axis the current time (HH:mm:ss) and on y-axis a random value. I want to display in a tooltip the value y and the current time.

I managed to display a time (which doesn't correspond to current time) and the random value. My question is how could I display the actual current time?

Here is my code:

xaxis: {
                mode: "time",
                tickSize: [2, "second"],
                tickFormatter: function (v, axis) {
                    var date = new Date(v);

                    if (date.getSeconds() % 5 == 0) {
                        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

                        var w = hours + ":" + minutes + ":" + seconds;

                        return w;
                    } else {
                        return "";
                    }
                },
                axisLabel: "Time",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 10
            },

yaxis: {
                min: 0,
                max: 100,
                tickSize: 5,
                tickFormatter: function (v, axis) {
                    if (v % 10 == 0) {
                        return v + "%";
                    } else {
                        return "";
                    }
                },
                axisLabel: "CPU loading",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 6
            },

and now tooltip display:

   $("#placeholder").bind("plothover", function (event, pos, item) {

    if ($("#enablePosition:checked").length > 0) {
        var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
        $("#hoverdata").text(str);
    }

    if ($("#enableTooltip:checked").length > 0) {
        if (item) {
            var x = item.datapoint[0].toFixed(2),
                y = item.datapoint[1].toFixed(2);
            ygb = x;


            var date = new Date(x * 1000);
            // Hours part from the timestamp
            var hours = date.getHours();
            // Minutes part from the timestamp
            var minutes = "0" + date.getMinutes();
            // Seconds part from the timestamp
            var seconds = "0" + date.getSeconds();

            // Will display time in 10:30:23 format
            var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);

            $("#tooltip").html("At hour " + formattedTime + " " + item.series.label + " is " + y)
                .css({ top: item.pageY + 5, left: item.pageX + 5 })
                .fadeIn(200);
        } else {
            $("#tooltip").hide();
        }
    }
});

Hope I made myself understood. Many thanks in advance!

Answer 1

I managed to display on tooltip the x-axis'current time. Maybe someone needs to do the same. The first code part doesn't change. The second part is like:

$("#placeholder").bind("plothover", function (event, pos, item) {

            if ($("#enablePosition:checked").length > 0) {
                var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";

            }

            if ($("#enableTooltip:checked").length > 0) {
                if (item) {
                    var x = parseInt(item.datapoint[0]);
                    var y = item.datapoint[1].toFixed(2);

                    //Formating from UNIX timestamp to "HH:mm:ss"
                    //To do so you also must to include moment.js library
                    var timestamp = moment(x).format("HH:mm:ss");
                   //Display tooltip:
                    $("#tooltip").html("At hour " + timestamp + " " + item.series.label + " is " + y)
                        .css({ top: item.pageY + 5, left: item.pageX + 5 })
                        .fadeIn(200);
                } else {
                    $("#tooltip").hide();
                }
            }
        });

        $("#placeholder").bind("plotclick", function (event, pos, item) {
            if (item) {
                $("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
                plot.highlight(item.series, item.datapoint);
            }
        });