How to display time on x axis in flot line graph?

Question

I am trying to show time intervals between Min and Max of a certain time range. Eg: 2015-04-30 10:20:00 and 2015-04-30 10:30:00 on x axis

I will be fetching all the values from database(which has datetime stored in 2015-04-30 10:27:58 format and passing it through webmethod.

If I create var data1 as

var data1 = [
    ['2015-04-30 10:27:58', 1690.25], ...
];

It won't work. So I am guessing I would need to convert '2015-04-30 10:27:58'milisecond ticks when creating var data1.

But I do not want to display time in a proper time format such as 10:27:58 instead of 1430369878000 on xaxis. (I want exclude date part).

How can I achieve this?

  //RED
        var data1 = [
    [1430369878000, 1690.25], [1430369879000, 1696.3], [1430369880000, 1659.65]
];

        //BLUE
        var data2 = [
    [1430369878000, 1682.1], [1430369879000, 1680.65], [1430369880000, 1685.1]
];

    var dataset = [
{
    label: "Sell out",
    data: data1,
    color: "#FF0000",
    points: { fillColor: "#FF0000", show: true },
    lines: { show: true }
},
{
    label: "Buy in",
    data: data2,
    color: "#0062E3",
    points: { fillColor: "#0062E3", show: true },
    lines: { show: true }
}
];


    var options = {
        series: {
            shadowSize: 5
        },
        xaxes: { mode: "time",
            min: parseInt((new Date("2015-04-30 10:27:58")).getTime()),
            max: parseInt((new Date("2015-04-30 10:43:39")).getTime()),
            timeformat: "%H/%M/%S"
        },
        yaxis: {
            color: "black",
            tickDecimals: 2,
            axisLabel: "Gold Price  in USD/oz",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 6
        },
        legend: {
            noColumns: 0,
            labelFormatter: function (label, series) {
                return "<font color=\"white\">" + label + "</font>";
            },
            backgroundColor: "#000",
            backgroundOpacity: 0.9,
            labelBoxBorderColor: "#000000",
            position: "nw"
        },
        grid: {
            hoverable: true,
            borderWidth: 3,
            mouseActiveRadius: 50,
            backgroundColor: { colors: ["#ffffff", "#EDF5FF"] },
            axisMargin: 20
        }
    };

    $(document).ready(function () {

        setInterval(function () {
            $.plot($("#flot-placeholder"), dataset, options);
            $("#flot-placeholder").UseTooltip();
        }, 1000)
    });


    var previousPoint = null, previousLabel = null;

    $.fn.UseTooltip = function () {
        $(this).bind("plothover", function (event, pos, item) {
            if (item) {
                if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
                    previousPoint = item.dataIndex;
                    previousLabel = item.series.label;
                    $("#tooltip").remove();

                    var x = item.datapoint[0];
                    var y = item.datapoint[1];

                    var date = new Date(x);
                    var color = item.series.color;

                    showTooltip(item.pageX, item.pageY, color,
                        "<strong>" + item.series.label + "</strong><br>" +
                       x +
                        " : <strong>" + y + "</strong> (USD/oz)");
                }
            } else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });
    };

    function showTooltip(x, y, color, contents) {
        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y,
            left: x,
            border: '2px solid ' + color,
            padding: '3px',
            'font-size': '9px',
            'border-radius': '5px',
            'background-color': '#fff',
            'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
            opacity: 0.9
        }).appendTo("body").fadeIn(200);
    }

Answer 1

The options for the x-axis are under the name xaxes not xaxis therefore they are not used. (Also your min and max values are outside of the data range.)

    // not xaxes:
    xaxis: {
        mode: "time",
        //min: parseInt((new Date("2015-04-30 10:27:58")).getTime()),
        //max: parseInt((new Date("2015-04-30 10:43:39")).getTime()),
        timeformat: "%H/%M/%S"
    },

See this fiddle for a working example.

PS: You use the $.plot() function with setInterval which is okay but you should only call UseTooltip() once.