String based axis for jQuery Flot graphs?

Question

How do I get non-numeric values on a Flot graph axis?

For example, on the Y-axis I would like to have (excuse the crappy graph):

/*
    A|
    B|          _/*----------*
    C|        _/              \
    D|      _/                 \
    E|    _/                    \
    F|   /                       \
    G|  *                         *
      --------------------------------
       100        200       300   400

The data I would provide will look like this: var data = [[100, 'G'], [200, 'B'], [300, 'B'], [400, 'G']];

Answer 1

You can feed a function to tickFormatter to markup an axis. Assuming G = 0 and A = 6:

var data = [[100, 0], [200, 5], [300, 5], [400, 0]];

$.plot($("#placeholder"), [data], {
    yaxis: { tickFormatter: function (v, axis) {
        return "GFEDCBA".charAt(v);
      }
    }
});

The charAt function simply takes the the y-axis value (0, 5, 5, 0) and returns the letter from the string corresponding to that position.