2

I need to add labels in the Jquery Flot chart. Currently it's only providing the labels on mouse over, instead of that I need to show the labels just after the bar. I have attached an image along with this question. In the position of hash (#) I need to place the bar labels there. Please get me a solution for this. Thanks in Advance.enter image description here

 for (i = 0; i < bardata.length; i++)  {

            ds.push({
                label: yearArry[i],
                data : bardata[i],
            });

    }
var options = {
        colors : colorArray,
        grid : {
            hoverable : true,
            clickable : true,
            tickColor : $chrt_border_color,
            borderWidth : $chrt_border_width,
            borderColor : $chrt_border_color,
        },
        series: {
            stack:true,
            bars: {
                show : true,
                barWidth : 0.8,
                horizontal: true,
                align: "center"
            }
        },
        xaxis: {
            tickFormatter: function(val, axis) { return val < axis.max ? abbreviateNumber(val) : "Cost"; }
        },
        yaxis: {
            ticks: company_label
        },
        legend: {
            show: showLegend,
            position: "ne",
            noColumns : 1,
            backgroundOpacity: 0.5,
            margin: [0, -70]
        },
        tooltip : true,
        tooltipOpts : {
            content : "<b>%s</b> : <span>$%x</span>",
            defaultTheme : false,
        }
    };

    // Plot the graph with the data and options provided
    $.plot($("#flotchart"), ds, options);
ABHILASH SB
  • 2,122
  • 2
  • 21
  • 31

1 Answers1

9

As I stated, in the answer I gave here, I find it easiest to just do it yourself.

var somePlot = $.plot($("#flotchart"), ds, options);

var ctx = somePlot.getCanvas().getContext("2d");  //canvas context
var series = somePlot.getData();
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 < series.length; i++){
    var text = '$' + series[i].data[0][0]; // x data point
    var metrics = ctx.measureText(text);
    var xPos = (xaxis.p2c(series[i].data[0][0])+offset.left);
    var yPos = yaxis.p2c(series[i].data[0][2]) + offset.top + 5; // get positions
    ctx.fillText(text, xPos, yPos); // add the label
}

Here's an updated fiddle with your code.

enter image description here

Community
  • 1
  • 1
Mark
  • 106,305
  • 20
  • 172
  • 230
  • This is a nice solution but, if I were to increase the value of the red bar to 4 it goes outside the canvas and is [broken](http://jsfiddle.net/2qKnS/). How can you prevent that? I found no padding in the Flot chart api. – ABHILASH SB Feb 16 '14 at 16:53
  • You are looking for the axis `autoscaleMargin` property. Updated fiddle: http://jsfiddle.net/2qKnS/2/, setting an explicit xaxis max would work too. – Mark Feb 16 '14 at 16:58