Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flot tooltip hovering

Tags:

flot

I have an issue with the tooltip in flot. I'm passing a timestamp data and it will reflect as a number, e.g 1113340002003. What I want to do is that when I hover over a data point, it will reflect as the date: 01/04/2012 and not that number. Any help would be great! Stuck here for a few hours....

This is what I'm passing to plot:

var time = (new Date(dates[i]));
graph.push([time, demand[i]]);

This is the section that I used to plot my graph:

var options = {
series: {
               lines: { show: true },
               points: { show: true }
           },
           grid: { hoverable: true, clickable: true },
           yaxis: { min: 0, max: 20000 },
           xaxis: {
               mode: "time", timeformat: "%d/%m/%y"}

var plot = $.plot($("#placeholder"), 
       [ { data: graph, label: "price" } ], 
        options);

function showTooltip(x, y, contents) {
    $('<div id="tooltip">' + contents + '</div>').css( {
        position: 'absolute',
        display: 'none',
        top: y + 5,
        left: x + 5,
        border: '1px solid #fdd',
        padding: '2px',
        'background-color': '#fee',
        opacity: 0.80
    }).appendTo("body").fadeIn(200);
}


var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
    $("#x").text(pos.x.toFixed(2));
    $("#y").text(pos.y.toFixed(2));

    if($("#enableTooltip:checked").length > 0) {
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();

                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);

                   var td = x.split("/");
like image 493
Eugene Avatar asked Aug 27 '26 13:08

Eugene


1 Answers

Just convert it to a javascript data object and then build the string yourself.

var d = new Date(item.datapoint[0]);
var someDay = d.getDate();
var someMonth = d.getMonth() + 1; //months are zero based
var someYear = d.getFullYear();
var stringDate = someMonth + "/" + someDay + "/" + someYear;

var x = stringDate;
var y = item.datapoint[1].toFixed(2);
like image 189
Mark Avatar answered Aug 29 '26 18:08

Mark