3

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("/");
Eugene
  • 263
  • 2
  • 5
  • 16

1 Answers1

3

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);
samuel
  • 326
  • 2
  • 9
Mark
  • 106,305
  • 20
  • 172
  • 230
  • How do i show the numbers in a stacked bar graph? say i 3 diff values on the y axis stacked over each other (positive , negative and neutral response), how do i show the correct number when i hover on the respective stack on the bar? – peter Apr 01 '13 at 14:18
  • @peter, please open a new question with the specifics. – Mark Apr 01 '13 at 17:26
  • 1
    @peter, this seems to be what you are asking: http://stackoverflow.com/questions/3476349/flot-stacked-bar-chart-and-displaying-bar-values-on-mouse-over – Mark Apr 01 '13 at 17:35