We help IT Professionals succeed at work.

Flot Charts and Using Text instead of number in Axis

theideabulb asked
If you look at alot of the chart/graphic examples that use Flot, all the bottom axis have numbers. Mostly representing Month or Days of Month. That is fine, but most of the time, I need to use a actual word. For my question though, lets use name of the month.
In these examples, if I change the numbers 1 through 12 and make them Jan Feb Mar Apr, etc, etc, the graphs disappear. I am not sure how or why this happens. In some cases the number or word is just in a JAN so why does this effect the chart.

Here is an example

<tbody> <tr> <th>1</th><td>256</td><td>1207</td> </tr> <tr> <th>2</th><td>203</td><td>1000</td> </tr> <tr> <th>3</th><td>241</td><td>1050</td> </tr> </tbody>

Open in new window

But if i change it to this:

<tbody> <tr> <th>Jan</th><td>256</td><td>1207</td> </tr> <tr> <th>Feb</th><td>203</td><td>1000</td> </tr> <tr> <th>Mar</th><td>241</td><td>1050</td> </tr> </tbody>

Open in new window

All the data for those 3 months will disappear.

Does anyone know how to change or what to look for to allow text to appear in there?

Thank you
Watch Question

you can do it with this jQuery component


thank you, but yes, i stated it was using Flot in my question.
Actually i found that there is a variable you can set in the javascript for 'ticks' that will allow you to put in text

 $.plot($("#chart"), data1, {
                                   grid: {backgroundColor: { colors: ["#fff", "#fff"] } },
                                   colors: ["#2266BB", "#FF9115"],
										ticks: [[2.5, "pos1"], [5, "pos2"], [7.5, "pos3"], [10, "pos4"], [12.5, "pos5"], [15, "pos6"],[17.5, "pos7"], [20, "pos8"], [22.5, "pos9"]]


Open in new window


I found this answer and it solves the issue that I was looking for.  I was able to put text into the x axis

Explore More ContentExplore courses, solutions, and other research materials related to this topic.