FLOT Chart xAxis time

Question

I am using flot chart for charts. Please find following...

js array

        data_visits = [
                        [new Date('06/02/2014 01:00').getTime(), 100], 
                        [new Date('06/05/2014 10:00').getTime(), 200], 
                        [new Date('06/10/2014 13:00').getTime(), 300], 
                        [new Date('06/15/2014 15:00').getTime(), 400],
                      ];

chart code

    if($('#flot_overview').length) {
        var chart_placeholder = $('#flot_overview');

        var options = {
            grid: {
                clickable: true, 
                hoverable: true,
                autoHighlight: true,
                backgroundColor: null,
                borderWidth: 0,
                color: "#666",
                labelMargin: 10,
                axisMargin: 0,
                mouseActiveRadius: 10,
                minBorderMargin: 5
            },
            series: {
                lines: {
                    show: true,
                    lineWidth: 2,
                    steps: false,
                    fill: true
                },
                points: {
                    show:true,
                    radius: 4,
                    symbol: "circle",
                    fill: true
                }
            },
            tooltip: true,
            tooltipOpts: {
                content: "<span style='display:block; padding:7px;'>%x - <strong style='color:yellow;'>%y</strong></span>",
                xDateFormat: "%b %d, %Y %H:%M",
                shifts: {
                    x: 20,
                    y: 0
                },
                defaultTheme: false
            },
            xaxis: {
                mode: "time",
                minTickSize: [1, "hour"],
                timeformat: '%H:%M',
                labelWidth: "40"
            },
            yaxis: { min: 0 },
            legend: {
                noColumns: 0,
                position: "ne"
            },
            colors: ["#0892cd"],
            shadowSize: 0
        };

        $.plot(chart_placeholder,[{
            label: "Click / Visits",
            data: data_visits,
            points: {fillColor: '#fff'},
            lines: {fillColor: 'rgba(8,146,205,.2)'}
        }],options);
    }

It generates chart properly and shows correct time in tooltip, but it does not show correct time in xAxis as per my settings, it always show 00:00 for all xaxis if i use timeformat: '%H:%M' it works fine if i format this as date.

Please help, thanks.

@gro I have tried multiply by 1000 in php and js but still no luck. Please help. thanks — seoppc

Mark Mark · Accepted Answer · 2014-06-26T00:30:37

Since your data spans multiple days, flot is logically placing the tick marks at the start each day. This means that with a time format of '%H:%M', you then get 0:00.

In my mind something like this makes a lot more sense for you data.

FLOT Chart xAxis time

1 Answers