Question

I’m trying to customize jQuery Flot to remove gaps between dots on time axis. Look at the top image:

It shows the data for two days, and I bet you spot the night. What I want to do is to get rid of this annoying gap in the middle of the chart. Any suggestions how to do this?

Answer 1

Too bad I can’t accept a comment as an answer, since the answer from George Roberts from Mark’s link worked smoothly.

So what I had to do is to change the mode of the flot from ‘time’ to null and then emulate a time axis.

I’ve created two arrays: the first one with data for the graph and the second one with timestamps:

for (var i=0; i<json.length; i++ ) {
    dotsData.push( [i, json[i].value] );
    ticks.push( json[i].date );
    }                       
}

Time axis emulation:

// flot options
... xaxis: { tickFormatter: function(val) { return formTicks(val, ticks) } } ...

// formTicks function
function formTicks(val, ticksArr) {
    var tick = ticksArr[val];

    if ( tick != undefined ) {
        tick = new Date( tick );

        var hours = tick.getHours(),
            minutes = tick.getMinutes();

            tick = hours+':'+minutes;
    }
    else { tick = '' }

    return tick
}

It solves the problem, but it’s hard to distinguish one day from another, so I added markings:

var markings = [],
    firstDay = new Date( ticks[0] ).getDate();

    for (var i=1; i<ticks.length; i++) {
        var loopDay = new Date( ticks[i] ).getDate();
        if ( loopDay != firstDay ) {
            var marking = {
                color: '#000000',
                lineWidth: 1,
                xaxis: { from: i, to: i }
            }

        markings.push( marking )

        firstDay = loopDay; // loop through all days
    }
}

// flot options
grid: { markings: markings }

The result: