Flot With "String" x-axis

Question

When using flot I would like to have a string based x-axis. For example I have a list of customers "Bob", "Chris", "Joe" and would like to plot their revenue on the Y-Axis. (this is a bar graph)

It seems at first glance flot only supports numeric types on the x-axis. Is this true?

score 87 · Accepted Answer · edited May 23 '17 at 12:18

87

@Matt is close, but it would make more sense to just use the ticks option to directly specify what ticks should have what labels:

var options = {

...
  xaxis: {
    ticks: [[0,'Bob'],[1,'Chris'],[2,'Joe']]
  }
...

};

EDIT: it looks like this (I added more data than labels, but you get the idea).

edited May 23 '17 at 12:18

Community

1
1

answered Apr 28 '11 at 16:07

Ryley

21,046
2
67
81

3

There's also a "categories" plugin : http://www.flotcharts.org/flot/examples/categories/ – but I haven't been able to have proper labels on the x axis for now :/ – Olivier Lance Jan 15 '14 at 10:58
@Aheho - thanks, I updated it to point to a source of flot that actually exists :) – Ryley Feb 05 '15 at 05:27
@OlivierLance Thanks! for the link – Ganesh RJ Aug 06 '15 at 06:13

score 18 · Answer 2 · answered Dec 19 '13 at 16:27

18

The Categories plugin (jquery.flot.categories.js) will do this quite nicely, so that data can be formatted like this:

var data = [ ["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9] ];

and plot like this: enter image description here

See: http://www.flotcharts.org/flot/examples/categories/index.html

answered Dec 19 '13 at 16:27

ak112358

713
2
13
25

Worked like a charm! – Roman C Apr 17 '16 at 11:15

score 18 · Answer 3 · edited May 23 '17 at 12:18

18

You should be able to do this using the tickFormatter option as per this question. I haven't tried it myself, but give this a shot:

var xAxisLabels = ['Bob', 'Chris', 'Joe'];    
function xAxisLabelGenerator(x){
    return xAxisLabels[x];
}

var plot = $.plot($("#placeholder"), { 
    // snip other options...
    xaxis: {
       transform: xAxisLabelGenerator,
       tickFormatter: xAxisLabelGenerator 
    }
});

This means that the actual x-values should be 0, 1, 2, ...

edited May 23 '17 at 12:18

Community

1
1

answered Apr 28 '11 at 15:33

Matt Ball

354,903
100
647
710

+1 - It may not have been the chosen answer (which I also upvoted) but this is very useful. – Mark Brittingham Jun 30 '12 at 15:57
the x parameter on your label generator, where does that come from? – Kasper Skov Sep 05 '12 at 14:22
@KasperSkov flot passes the parameter to the callback you specify. – Matt Ball Sep 05 '12 at 14:24
Really? That makes no sense to me :) I would think you would have to do something like transform:function (x) { return xAxisLabelGenerator(x); } – Kasper Skov Sep 05 '12 at 14:29
2

@KasperSkov `transform:function (x) { return xAxisLabelGenerator(x); }` is an unnecessarily verbose, though equivalent, way of writing what's in my answer: `transform: xAxisLabelGenerator`. – Matt Ball Mar 19 '13 at 12:39

Flot With "String" x-axis

3 Answers3

Linked