Issue with tooltip on flotchart for date format

Question

I am facing an issue with tooltip showing date in x-axis. Can anyone help on this?

fiddle code

         grid: {
                hoverable: true //IMPORTANT! this is needed for tooltip to work
            },
            tooltip: true,
            tooltipOpts: {
                content: "<h4>%s</h4><ul><li>Date is %x</li><li>Total Count: %y</li></ul>",         
            defaultTheme: false
        },
         points:
        {
                show: true
        },
        series: {

            bars: {
                show: true,
                barWidth: 0.1,
                order: 1
            }
        }

Answer 1

You need a function to convert the x value (which is only a number / timestamp) to an actual date.

Use something like this:

tooltipOpts: {
    content: function (label, x, y) {
        var date = new Date(+x);
        var tooltip = '<h4>' + label + '</h4><ul>';
        tooltip += '<li>Date is ' + date.toLocaleDateString() + '</li>';
        tooltip += '<li>Total Count: ' + y + '</li></ul>';
        return tooltip;
    },

See this update fiddle.