Flot with numbers in bar
by billjohnston4
HTML
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.categories.js"></script>
<script src="http://joetsoi.github.io/flot-barnumbers/jquery.flot.barnumbers.js"></script>
<div style='display:none' id='graph_1_data'>[{"data": [["Views", 4.0]]}, {"data": [["Comments", 0.0]]}, {"data": [["Subscribers", 100.0]]}]</div>
<div style='margin-top:20px;width:100%; height:120px' id='placeholder'></div>
CSS
.tickLabel{font-family:Arial,sans-serif; font-size:95%}
JavaScript
$(function () {
var d2 = $.parseJSON($("#graph_1_data").html());
options = {
grid: {
margin: 0,
axisMargin: -10,
width: 250,
minBorderMargin: 0,
borderWidth: 0
},
bars: {
show: true,
barWidth: 0.6,
align: "center",
fill: 0.5,
showNumbers: true,
numbers : {
xAlign: function(x) {return x; },
yAlign: function(y) {console.log(y/2);if(y/2<4){return 4;}else{return y/2;} },
},
},
xaxis: {
mode: "categories",
tickLength: 0
},
yaxis: {
show: false
},
};
$.plot($("#placeholder"), d2, options);
});