jQuery flot bar numbers: Numbers positioning

Question

I\'m using jquery.flot.barnumbers.js plugin for the Javascript plotting (charts) library for jQuery to show the numbers on the bars.

My code:

$.plot(         


        

Answer 1

Oops, I did it again.

If you'd like to drop the plugin and do this the fun way; code it up yourself. It'll give you the freedom to customize any way you like.

// after you draw the plot
var ctx = somePlot.getCanvas().getContext("2d");
var data = somePlot.getData()[0].data;
var xaxis = somePlot.getXAxes()[0];
var yaxis = somePlot.getYAxes()[0];
var offset = somePlot.getPlotOffset();
ctx.font = "16px 'Segoe UI'";
ctx.fillStyle = "black";    
for (var i = 0; i < data.length; i++){       
    var text = data[i][4] + '';
    var metrics = ctx.measureText(text);
    var xPos = xaxis.p2c(data[i][0]) + offset.left;
    var yPos = yaxis.p2c(data[i][5]) + offset.top + metrics.width + 5;
    // perform the rotation
    ctx.save();
    ctx.translate(xPos, yPos);
    ctx.rotate(-Math.PI/2);
    ctx.fillText(text, 1, 1);
    ctx.restore();
}

Example here.

Answer 2

part of the plot

I use "categories" in yaxis,the y position of the text should be like that:

for(var i=0;i<data1.length;i++){
        .....
        var yPos = yaxis.p2c(i) + fontSize;
        .....
    }

if you want the flot shows like that: the y position of the text should be like that:

for(var i=0;i<data1.length;i++){
        .....
        var yPos = yaxis.p2c(i+align) + fontSize;
        .....
}

align = barWidth/2, if bars' align = 'left'; align = -barWidth/2, if bars' align = 'right;