We help IT Professionals succeed at work.

Flot Charts and Using Text instead of number in Axis

theideabulb
theideabulb asked
on
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
Comment
Watch Question

Commented:
you can do it with this jQuery component
http://code.google.com/p/flot/

Author

Commented:
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"],
									xaxis:{
										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

Author

Commented:
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.