将代码添加到Flot条形图

Question

I have created a chart using Flot library. I need to add a tick mark for showing comparison between last two bars. I am not able to get the height of the bars using any method how can I plot that.

Here is the example what I am looking for.

I am done with just simple flot chart code which is here. I am not getting how to approach because unable to find any event or anything that give me bar height.

 var data = [ {data: [[0,1]], color: "red"}, {data: [[1,2]], color: "yellow"}, {data: [[2,3]], color: "green"} ]; $.plot("#placeholder",data, { series: { bars: { show: true, barWidth: 0.3, align: "center", lineWidth: 0, fill:.75 } }, xaxis: { ticks: [[0,"Red"],[1,"Yellow"],[2,"Green"]] } }); 

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://www.flotcharts.org/flot/jquery.flot.js"></script> <div id="placeholder" style="width: 400px; height: 300px; padding: 0px; position: relative;"></div> 

Answer 1

I got a solution. There is a marking option in the Flot library itself which I can use. It is not providing me the arrow but atleast I can add a line with it.

 var data = [ {data: [[0,1]], color: "red"}, {data: [[1,2]], color: "yellow"}, {data: [[2,3]], color: "green"} ]; $.plot("#placeholder",data, { series: { bars: { show: true, barWidth: 0.3, align: "center", lineWidth: 0, fill:.75 }, }, grid: { markings: [{ xaxis: { from: 1, to: 2 }, yaxis: { from: 2, to: 2 }, color: "#bb0000" }] }, xaxis: { ticks: [[0,"Red"],[1,"Yellow"],[2,"Green"]] } }); 

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://www.flotcharts.org/flot/jquery.flot.js"></script> <div id="placeholder" style="width: 400px; height: 300px; padding: 0px; position: relative;"></div>