Set custom X-Axis values in Flot

Question

My custom X-axis values are not displayed in flot js.

Code for drawing the line chart as below :

var length = 0;
var length1 = 0;
var dataXY = [];
var data = [];
var dataX = [];
length = allVenues.length;
for (var i = 0; i < length; i++) {
     length1 = allVenues[i].length;
     for (var j = 0; j < length1; j++) {
         dataX.push([j, returnDate(allVenues[i][j].date)]);
         dataXY.push([returnTimestamp(allVenues[i][j].date), allVenues[i][j].price, "<b>X</b> : " + returnDate(allVenues[i][j].date) + " | " + " <b>Y</b>: " + allVenues[i][j].price]);
     }
}
var result = {'label': 'Demo Graph', 'data': dataXY};
data = [result];

var options = {
    lines: {
      show: true
    },
    points: {
       show: true
    },
    xaxis: {
       ticks: dataX
    },
    grid: {
       hoverable: true,
       clickable: true
    },
    tooltip: {
        show: true,
        content: "%s | X: %x | Y: %y"
   }
};
function returnTimestamp(val) {
  var dateTime = new Date(val);
  return moment(dateTime).unix();
}

function returnDate(val) {
   var dateTime = new Date(val);
   return moment(dateTime).format("YYYY-MM-DD hh:mm:ss A");
}

$.plot("#placeholder", data, options);

dataXY array values are:

{"label":"Demo Graph","data":[[1455776629,12],[1455801889,30],[1455962948,45]]}

dataX array values are:

[[0, "2016-02-18 11:53:49 AM"], [1, "2016-02-18 06:54:49 PM"], [2, "2016-02-20 03:39:08 PM"]]

Now i want to set this "dataX" array as X axis values (ticks) on the chart. This values display below in each point of line graph with X-Axis. Here dataX and dataXY from allVenues Json Array.

My graph is woking fine except the X-Axis data. You can see in the image below.

score 3 · Accepted Answer · answered Feb 24 '16 at 09:48

3

Your dataX array for the ticks must have the same x values (timestamps) as your real data array:

[[1455776629, "2016-02-18 11:53:49 AM"], [1455801889, "2016-02-18 06:54:49 PM"], [1455962948, "2016-02-20 03:39:08 PM"]]

PS: I would also suggest to put a linebreak (<br>) between date and time in the labels.

answered Feb 24 '16 at 09:48

Raidri

17,258
9
62
65

Thank you for replying, One more thing, i want to set the max limit in graph. For ex., only display first 6 data in graph because this is my real data graph. Please advice on it. – Navin Nakum Feb 24 '16 at 11:07
1) Set `length1` in your loop to 6 so you get only 6 datapoints, or 2) use the `min / max` values in the [x axis options](https://github.com/flot/flot/blob/master/API.md#customizing-the-axes). – Raidri Feb 24 '16 at 11:11
Ok but if i use min/max then my graph displays nothing. – Navin Nakum Feb 24 '16 at 11:14
Which values did you use for min and max? – Raidri Feb 24 '16 at 11:15
My xaxis like : xaxis: { ticks: dataX, tickColor: 'transparent', min: 0, max: 6 } – Navin Nakum Feb 24 '16 at 11:16
Use timestamps, not indices. – Raidri Feb 24 '16 at 11:17
From my code,Which element i need to put it in xaxis? – Navin Nakum Feb 24 '16 at 11:18
For the example, you could use `min: 1455776629, max: 1455801889` to only show the first two of the three points. – Raidri Feb 24 '16 at 11:20
Ok it's done. But can i set the same gap between each points so i can manage the look of x axis values? – Navin Nakum Feb 24 '16 at 11:53
Only if your data has the same gap between points too. If not, then it gets more complex and you should make that a new question. – Raidri Feb 24 '16 at 11:55
Hi, I have set another question for my new requirement. You can see on http://stackoverflow.com/questions/35601668/set-same-gap-between-each-point-of-x-axis-data-in-flot-js – Navin Nakum Feb 24 '16 at 12:03

Set custom X-Axis values in Flot

1 Answers1