Set same gap between each point of x axis data in

Question

My graph is as below :

I want to make an same gap between each point in flot because I want to show only 6 data at the same time. So I can manage the look of my x axis data. Right now this is not looking good. You can give me another solution for making an x axis label values looking good.

Answer 1

The easiest way to display linear x values in flot is to provide flot with an ascending index then use this index combined with a custom label function to display whatever string you want as the x axis label. The code to do this looks like the following:

function randomDate() {
    var start = new Date(2012, 01, 01);
    var end = new Date();
    return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}

$(function () {
    var theDates = [];
    var dataValues = [];

    for (var i = 0; i < 14; i += 0.5) {
        theDates.push(randomDate());
        dataValues.push([i, Math.sin(i)]);    
    }

    $.plot($("#placeholder"), [dataValues], {
        xaxis: {
        tickFormatter: function xAxisLabelGenerator(x) {
           return moment(theDates[x]).format('YYYY/MM/DD');
        }
      }
    });
});

In this example I'm using moment to format a random date and place these in order on the x axis. You'll note that since the dates are completely random they may not even be sequential yet they are all evenly spaced. If you want the fiddle version see here. Best of luck!

Answer 2

Setting the data at fixed distances regardless of the x values is known as categories mode in Flot. For this mode you can give the data in this form and do not need to give ticks seperately:

var data = [
    ["2016-02-18 11:53:49 AM", 12, "<b>X</b> : 2016-02-18 11:53:49 AM |  <b>Y</b>: 12"],
    ...
]

See this fiddle for a full working example (btw: I upgraded the flot.js file you used in your fiddle from 0.7 to 0.8.3).