Fleet: how to style numbers in bars?

Question

I use FlotCharts and the flot.barnumbers ( Demo ) plugin to display charts.

I need to display the numbers inside the panel, this works. Unfortunately, I have no idea how to style numbers and not find anything in Docs or through Google.

I would like to use something like (apparently impossible):

bars: { numbers: { numberFormatter: function(v, bar) { return '<div class="pimp-my-number-class">'+ v +'</div>'; } } } 

Does anyone have an idea how to solve this problem?

Thanks in advance!

Answer 1

One of the nicest things about flot is that it provides the basics and then goes out of your way. Here is a quick code example in which I implemented this myself (i.e. no plugins). It is short and sweet, and you have full control over the look.

 $(function() { dsHook = function(plot, canvascontext, series){ for (var i = 0; i < series.data.length; i++){ // loop the series var offset = plot.offset(); // offset of canvas to body var dP = series.data[i]; // our data point var pos = plot.p2c({x: dP[0], y: dP[1]}); // position of point var barWidth = plot.p2c({x: dP[0]+series.bars.barWidth, y: dP[1]}).left - pos.left; // calc width of bar pos.left += offset.left; pos.top += offset.top; //adjust position for offset var aDiv = $('<div></div>').css({'width':barWidth, 'background-color':'green','color':'white','text-align':'center','position':'absolute','left': pos.left,'top':pos.top}).text(dP[1]).appendTo("body"); // add an absolute div with the number } } var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; somePlot = $.plot("#placeholder", [{ data: d2, bars: { show: true } }], { hooks: { drawSeries: [dsHook] } } ); }); 

Answer 2

flot.barnumbers does not support the style of inserted numbers. You must add this to the code. See Drawing text using a canvas .

Answer 3

I would try to achieve the desired layout using a combination of annotations, for example here , and the second series of data is behind your actual series. The second series should have equal x values ​​as the original series. You add a constant to the corresponding y values ​​(e.g. 2).

You can create annotations and a second series of your choice. An extraordinary role would be to place annotations in the correct positions.