JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<div style="float:left">
<div id="placeholder" style="width:400px;height:300px;float:right"></div>
</ul>
</div>
JavaScript
/***************************************************************************/
/**
* Value Labels Plugin for flot.
* http://leonardoeloy.github.com/flot-valuelabels
* http://wiki.github.com/leonardoeloy/flot-valuelabels/
*
* Using canvas.fillText instead of divs, which is better for printing - by Leonardo Eloy, March 2010.
* Tested with Flot 0.6 and JQuery 1.3.2.
*
* Original homepage: http://sites.google.com/site/petrsstuff/projects/flotvallab
* Released under the MIT license by Petr Blahos, December 2009.
*/
(function ($) {
var options = {
series: {
valueLabels: {
show: true,
showAsHtml: false, // Set to true if you wanna switch back to DIV usage (you need plot.css for this)
showLastValue: false, // Use this to show the label only for the last value in the series
labelFormatter: function(v) { return v; }, // Format the label value to what you want
align: 'start', // can also be 'center', 'left' or 'right'
plotAxis: 'y', // Set to the axis values you wish to plot
hideZero: false
}
}
};
function init(plot) {
plot.hooks.draw.push( function (plot, ctx) {
$.each(plot.getData(), function(ii, series) {
if (!series.valueLabels.show) return;
var showLastValue = series.valueLabels.showLastValue;
var showAsHtml = series.valueLabels.showAsHtml;
var plotAxis = series.valueLabels.plotAxis;
var labelFormatter = series.valueLabels.labelFormatter;
var fontcolor = series.valueLabels.fontcolor;
var xoffset = series.valueLabels.xoffset;
var yoffset = series.valueLabels.yoffset;
var align = series.valueLabels.align;
var font = series.valueLabels.font;
var hideZero = series.valueLabels.hideZero;
// Workaround, since Flot doesn't set...