I am using Flot to create graphs.
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 the x axis labels like Data1,Data2,Data3,Data4
- Is there any way to uniquely identify the last data item without using series.label & series.color.Currently i have identified it by modifying the series.color in the function
1.) Ok, I think you want to set
labelTextfor each bar. Add the following line in the for-loop:Also see the updated example.
2.) You can add own values to
data, e.g. to mark the last one:In your hook you can check the flag:
Also see the next updated example.