Set same gap between each point of x axis data in Flot Js

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.

Please add your code and data, as a code snippet or [fiddle](http://jsfiddle.net) if possible. — Raidri, Feb 24 '16 at 12:07
Rather than add the x axis values as time values have you tried using numeric values with a custom formatter? — drew_w, Feb 24 '16 at 12:28
I want xaxis values as it is. Haven't try with custom formatter. — Navin Nakum, Feb 24 '16 at 12:30
Do you want your data points evenly spread over the x axis or only the x axis labels (which would mean that the x axis labels are no longer directly below a data point)? — Raidri, Feb 24 '16 at 14:22
I want like same distance between each points as well as on x axis. Because i have set it to fixed like display only 6 data/points in chart. So it is ok if there is same gap for me. Thank you. — Navin Nakum, Feb 25 '16 at 05:03

drew_w · Accepted Answer · 2016-02-24T14:58:53.447

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!

score 1 · Answer 2 · answered Feb 25 '16 at 10:00

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).

Set same gap between each point of x axis data in Flot Js

2 Answers2

Linked