Question

I am using flot to generate bar graphs.
Here is my code bar graph code

1. I need to make the y axis tick to disappear.
2. I need to put some label on the top of each bar

How to do it?

Answer 1

Okay, after a lot of mucking around with Flot and downloading the source, I finally figured out a good starting point for you.

The jsFiddle demo is here.

The guts of the code is using a hook for drawSeries which draws the label:

function drawSeriesHook(plot, canvascontext, series) {
    var ctx = canvascontext,
        plotOffset = plot.offset(),
        labelText = 'TEST', // customise this text, maybe to series.label
        points = series.datapoints.points,
        ps = series.datapoints.pointsize,
        xaxis = series.xaxis,
        yaxis = series.yaxis,
        textWidth, textHeight, textX, textY;
    // only draw label for top yellow series
    if (series.label === 'baz') {
        ctx.save();
        ctx.translate(plotOffset.left, plotOffset.top);

        ctx.lineWidth = series.bars.lineWidth;
        ctx.fillStyle = '#000'; // customise the colour here
        for (var i = 0; i < points.length; i += ps) {
            if (points[i] == null) continue;

            textWidth = ctx.measureText(labelText).width; // measure how wide the label will be
            textHeight = parseInt(ctx.font); // extract the font size from the context.font string
            textX = xaxis.p2c(points[i] + series.bars.barWidth / 2) - textWidth / 2;
            textY = yaxis.p2c(points[i + 1]) - textHeight / 2;
            ctx.fillText(labelText, textX, textY); // draw the label
        }
        ctx.restore();
    }
}

See the comments for where you can customise the label.

To remove the y-axis ticks, that is just a simple option setting. In addition, you can work out the maximum y-value for each of the bar stacks and then add about 100 to that to set a maximum Y value that will allow for the space taken up by the labels. The code for all of that then becomes:

// determine the max y value from the given data and add a bit to allow for the text
var maxYValue = 0;
var sums = [];
$.each(data,function(i,e) {
    $.each(this.data, function(i,e) {
        if (!sums[i]) {
            sums[i]=0;
        }        
        sums[i] += this[1]; // y-value
    });
});
$.each(sums, function() {
    maxYValue = Math.max(maxYValue, this);
});
maxYValue += 100; // to allow for the text


var plot = $.plot($("#placeholder"), data, {
    series: {
        stack: 1,
        bars: {
            show: true,
            barWidth: 0.6,
        },
        yaxis: {
            min: 0,

            tickLength: 0
        }
    },
    yaxis: {
        max: maxYValue, // set a manual maximum to allow for labels
        ticks: 0 // this line removes the y ticks
    },
    hooks: {
        drawSeries: [drawSeriesHook]
    }
});

That should get you started. You can take it from here, I’m sure.