CODEWITHSUNDEEP
javascriptjquerygraphflot
Bill Software Engineer
Bill Software Engineer

Reputation: 7822

String based axis for jQuery Flot graphs?

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']];

Upvotes: 4

Views: 5649

Answers (2)

DarrellNorton
DarrellNorton

Reputation: 4691

You can also associate text with a tick value, like this:

ticks: [[0, "G"], [1, "F"], [2, "E"], [3, "D"]], // so on

The nice thing about doing it this way is you can control it completely at runtime from your AJAX call (assuming you pass down the axis configuration using JSON), whereas the currently posted solution requires a hard-coded function.

Upvotes: 6

Alec
Alec

Reputation: 9078

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);
      }
    }
});

Flot example

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.

Upvotes: 4

Related Questions