Centering values and changing colors and font of labels

[vasiliyaltunin]

I make some improvments to this plugin, so now u can change labels color, font and setup offset for it:

/**

• 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 = {
  valueLabels: {
  show: false,
  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
  }
  };

  function init(plot) {
  plot.hooks.draw.push(function (plot, ctx) {
  if (!plot.getOptions().valueLabels.show) return;

      var showLastValue = plot.getOptions().valueLabels.showLastValue;
      var showAsHtml = plot.getOptions().valueLabels.showAsHtml;
      var fontcolor = plot.getOptions().valueLabels.fontcolor;
      var xoffset = plot.getOptions().valueLabels.xoffset;
      var yoffset = plot.getOptions().valueLabels.yoffset;
      var font = plot.getOptions().valueLabels.font;
      var ctx = plot.getCanvas().getContext("2d");
  $.each(plot.getData(), function(ii, series) {
              // Workaround, since Flot doesn't set this value anymore
              series.seriesIndex = ii;
      if (showAsHtml) plot.getPlaceholder().find("#valueLabels"+ii).remove();
      var html = '<div id="valueLabels' + series.seriesIndex + '" class="valueLabels">';
  
      var last_val = null;
      var last_x = -1000;
      var last_y = -1000;
      for (var i = 0; i < series.data.length; ++i) {
      if (series.data[i] == null || (showLastValue && i != series.data.length-1))  continue;
  
      var x = series.data[i][0], y = series.data[i][1];
      if (x < series.xaxis.min || x > series.xaxis.max || y < series.yaxis.min || y > series.yaxis.max)  continue;
      var val = y;
  
      if (series.valueLabelFunc) val = series.valueLabelFunc({ series: series, seriesIndex: ii, index: i });
      val = ""+val;
  
      if (val!=last_val || i==series.data.length-1) {
          var xx = series.xaxis.p2c(x)+plot.getPlotOffset().left;
          var yy = series.yaxis.p2c(y)-12+plot.getPlotOffset().top;
          if (Math.abs(yy-last_y)>20 || last_x<xx) {
              last_val = val;
              last_x = xx + val.length*8;
              last_y = yy;
  
                                  if (!showAsHtml) {
                                      // Little 5 px padding here helps the number to get
                                      // closer to points
                                      x_pos = xx;
                                      y_pos = yy+6;
  
                                      // If the value is on the top of the canvas, we need
                                      // to push it down a little
                                      if (yy <= 0) y_pos = 18;
                                      // The same happens with the x axis
                                      if (xx >= plot.width()) x_pos = plot.width();
  
                                      if (font) { ctx.font = font; }
                  ctx.fillStyle = fontcolor;  
                  ctx.shadowOffsetX = 0;  
                  ctx.shadowOffsetY = 0;  
                  ctx.shadowBlur = 1.5;  
                  ctx.shadowColor = fontcolor;    
  
                                      ctx.fillText(val, x_pos+xoffset, y_pos+yoffset);          
  
                                  } else {
                                      var head = '<div style="left:' + xx + 'px;top:' + yy + 'px;" class="valueLabel';
                                      var tail = '">' + val + '</div>';
                                      html+= head + "Light" + tail + head + tail;
                                  }
          }
      }
      }
  
              if (showAsHtml) {
                  html+= "</div>";
                  plot.getPlaceholder().append(html);
              }
  });
  });
  

  }

  $.plot.plugins.push({
  init: init,
  options: options,
  name: 'valueLabels',
  version: '1.1'
  });
  })(jQuery);

And here how u can use it:

            var options = {
                bars: { show: true, autoScale: true, fillOpacity: 1},
                xaxis: { autoscaleMargin:0.3, ticks: [[1.5,"2008"], [3.5,"2010"], [5.5,"2011"]] },
                yaxis: { autoscaleMargin:0.2 },
                valueLabels: { show: true, font : "17px Arial", yoffset : 0, xoffset : 14, fontcolor : "#FF0000" }
            };

[neoDD69]

Hi, I've implemented a more efficent positioning of labels, only for isShowHtml.
If you are interested visit my fork.