How to get x axis labels on the flop?

Question

I use Flot to create charts. This is my code here jsFiddle code

function drawSeriesHook(plot, canvascontext, series) { var ctx = canvascontext, plotOffset = plot.offset(), labelText = 'VALUE', // 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.color === '#F8C095') { 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(); } } 

• In my drawseriesHook function, I need to get x axis labels like Data1, Data2, Data3, Data4
• Is there a way to uniquely identify the last data item without using series.label and series.color. I have currently identified it by changing the series.color series in a function

Answer 1

1.) Well, I think you want to set labelText for each bar. Add the following line to the for loop:

 labelText = series.xaxis.ticks[i / ps].label; 

Also see updated example .

2.) You can add your own values ​​to data , for example. to mark the latter:

 var data = [ { label : 'Used', color : '#EF7816', data : [ [ 1, 85], [ 2, 50 ], [ 3, 18], [ 4, 8 ] ], last : false }, ... { color : '#F8C095', data : [ [ 1, 12], [ 2, 10], [ 3, 3], [ 4, 2] ], last : true } ]; 

In your hook you can check the flag:

 if (series.last) { ... 

Also see the following updated example .