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("#placeholderByDay", [
            {
                data: DataOne, label: "Total Calls", bars: {
                    numbers:{
                        show:true,
                        xAlign: 80,//align top
                        yAlign: 1 
                        //yAlign: function(y) { return y+ 1; } //upside of bars
                    }
            } ]);

What I get now is:

What I need is:

So when there is no data for a bar, the zeros should be just above the axis, and where there are values should be as is, both rotated let 90 degrees. How can I achieve this?

Answer 1

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;

Answer 2

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.