Show value within bar on flot bar chart

Question

I would like to show the value within the bar on the flot bar chart, something like this:

|
|               +----+
|               |    |
|               |    |
|               |    |
|   +----+      | 20 |
|   |    |      |    |
|   | 10 |      |    |
|   |    |      |    |
|---+----+------+----+------

data = [[1, 10], [2, 20]]

Is there a way to do this?

Solution 1

I needed the same thing, so I quickly hacked together a plugin for it and a quick example of it in action.

Solution 2

I think your answer is here:

http://code.google.com/p/flot/issues/detail?id=218

Comments

[Sergey G]

Thank you for your reply. But this is not exactly what I was looking for. this plugin shows the value on top of the bar, i would like to show it in the bar.

[Kasper Skov]

Mine is pretty buggy. I guess it because my flot is display the bars horizontal. www21.speedyshare.com/nGkvr/download/barnum.jpg . Any idea what I can do to fix this?

[dinosaurwaltz]

yeah, you're right, I've fixed it to take into account the horizontal bars.

[shorif2000]

@dinosaurwaltz i get an error when i tried using this Uncaught TypeError: Cannot read property 'toString' of null at formatter (jquery.flot.barnumbers.js:60) at Object.<anonymous> (jquery.flot.barnumbers.js:121) at Function.each (jquery-1.11.3.js:384) at draw (jquery.flot.barnumbers.js:57) at executeHooks (jquery.flot.js:717) at draw (jquery.flot.js:1886) at new Plot (jquery.flot.js:710) at Function.$.plot (jquery.flot.js:3146) at plot_graph (graphs.php:975) at Object.success (graphs.php:683)