winne27/flot-valuelabels

Value labels - plugin for jQuery/flot

flot-valuelabels's Issues

Plugin doesn't work with groupedBars (plugin: flot.orderBars)

v1.5 doesn't work properly with flot.orderBars. The labels come at the center of both bars instead for coming on top of each bar.

Suggestion:colorfull bar

bars become more colorfull while callback function fillStyleCallback have been modified.in my case,data 's structure was added two params like [ ["January", 50,"#00ff00","#456"], ["February", 35,"#428bca","#456"].....], "#00ff00" stands for fill color and "#456" for border color. so callback function fillStyleCallback return the color i wanted.
code:

result：

there must be another better solution.please update.

Not showing properly with stack bars and order

Fix.
get order from series

var order = series.bars.order || 0;

change stackedbar at line 286

if (stackedbar) {
    if (!stacked[x+'-'+order]) stacked[x+'-'+order] = 0.0;
    addstack = stacked[x+'-'+order];
    stacked[x+'-'+order] = stacked[x+'-'+order] + y;
}

The "font" option does not work well

I have changed the font of the labels using the option "font". I use the font "Roboto" loaded locally into the CSS (not from Google Fonts), but the labels are only displayed with the correct font from time to time. When I refresh the page, sometimes it works and sometimes it doesn't. It is a lottery.

Correct font:

Incorrect font:

This is my code of the chart:

var data = [[1, 8], [2, 8], [3, 8], [4, 9], [5, 9], [6, 9], [7, 10], [8, 10], [9, 9], [10, 6], [11, 2], [12, 4], [13, 2]];

var dataset = [
		{
			data: data,
			lines: {show: true, lineWidth: 3},
			curvedLines: {apply: true, monotonicFit: true}
		},
		{
			data: data,
			points: {show: true, radius: 13},
			 valueLabels: {
			 	show: true,
			 	yoffset: 23,
			 	fontcolor: '#2C2C2C',
			 	font: "11pt Roboto", // <=========================== My custom font
			 },
		}
	];

var options = {

	series: { curvedLines: {active: true} },

	yaxis: { show: false },

	grid: {
	 	margin: 15,
	}
};

$(document).ready(function () {
	$.plot($("#grafica"), dataset, options);
});

This is my CSS:

@font-face {
    font-family: 'Roboto';
    src: url('../fuentes/Roboto-Regular.eot');
    src: url('../fuentes/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fuentes/Roboto-Regular.woff2') format('woff2'),
        url('../fuentes/Roboto-Regular.woff') format('woff'),
        url('../fuentes/Roboto-Regular.ttf') format('truetype'),
        url('../fuentes/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-bold';
    src: url('../fuentes/Roboto-Bold.eot');
    src: url('../fuentes/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fuentes/Roboto-Bold.woff2') format('woff2'),
        url('../fuentes/Roboto-Bold.woff') format('woff'),
        url('../fuentes/Roboto-Bold.ttf') format('truetype'),
        url('../fuentes/Roboto-Bold.svg#Roboto-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-black';
    src: url('../fuentes/Roboto-Black.eot');
    src: url('../fuentes/Roboto-Black.eot?#iefix') format('embedded-opentype'),
        url('../fuentes/Roboto-Black.woff2') format('woff2'),
        url('../fuentes/Roboto-Black.woff') format('woff'),
        url('../fuentes/Roboto-Black.ttf') format('truetype'),
        url('../fuentes/Roboto-Black.svg#Roboto-Black') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* { font-family: Roboto, sans-serif; }

Stacked Horizontal Bars Label Dislpay

Hello I am trying to display the value for each stacked segment of a horizontal bar chart. However the output look like this:

This is how I have setup the options for the plot:

    var modelBardata = [{ label: "Accept Tests", data: modelAccepts, color: "#009900", valueLabels: { show: true, horizAlign: "insideCenter" }  },
        { label: "Reject Tests", data: modelRejects, color: "#CC0000", valueLabels: { show: true, horizAlign: "insideMax" }  }];

    $.plot($('#ctTestStatusByModel'), modelBardata, {
        series: {
            stack: true,
            bars: {
                show: true
            }
        },
        bars: {
            barWidth: 0.7,
            horizontal: true,
            align: "center"
        },
        legend: {
            show: false
        },
        yaxis: {
            axisLabel: "Models",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: "Verdana Arial",
            axisLabelPadding: 10,
            ticks: modelTicks
        },
        xaxis: {
            axisLabel: "Count",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 10
        }
    });

Do I have the wrong options set or is there something else I need to configure?

Use 'below' instead of 'bottom' for reverseAlignBelowZero option

I would suggest to set 'below' for negative values instead of 'bottom' when 'reverseAlignBelowZero' is active.

Here is an example why:

https://jsfiddle.net/VojtechH/w0v9fybn/

value labels dissapear when graph is panned

I've been using this for a while now, with great success, but recently I added in the navigation plugin to flot to allow panning of a graph (for historical reference in a graph), and noticed the value labels disappear when the graph is panned. Perhaps this is a bug with the panning plugin and not yours, but I'm wondering if there is a way to redraw the labels?

Before

After click/pan:

Thanks!

background and border

these options:
useBackground: true,
backgroundColor: "#fff",
useBorder: true,
borderColor: "#000"
not working unless I user this options:
font: "8pt 'Trebuchet MS'",

Last value offset

I don't understand why the last value on the chart is shown shifted to the left, instead of above the border. The first value does, even the highest values overlap with the top border.

I tried to use the xoffsetLast option to move it manually but it doesn't work.

This is my chart code:

var data = [[1, 8], [2, 8], [3, 8], [4, 9], [5, 9], [6, 9], [7, 10], [8, 10], [9, 9], [10, 6], [11, 2], [12, 4], [13, 2]];

var dataset = [
		{
			data: data,
			lines: {show: true, lineWidth: 3},
			curvedLines: {apply: true, monotonicFit: true}
		},
		{
			data: data,
			points: {show: true, radius: 13},
			 valueLabels: {
			 	show: true,
			 	yoffset: 23,
			 	fontcolor: '#2C2C2C',
			 	font: "11pt Roboto",
			 },
		}
	];

var options = {

	series: { curvedLines: {active: true} },

	yaxis: { show: false },

	grid: {
	 	margin: 15,
	}
};

$(document).ready(function () {
	$.plot($("#grafica"), dataset, options);
});

Example doesn't work

Hi! examples doesn't work

ideas for new version 1.6.0

below is the code of my modifications: added support for horizontal bars and ticks labels instead of values

my code is only for sample and contains flaws, but you can see that the changes are not difficult

/**

• Value Labels Plugin for flot.

• https://github.com/winne27/flot-valuelabels

• https://github.com/winne27/flot-valuelabels/wiki
  *

• Implemented some new options (useDecimalComma, showMinValue, showMaxValue)

• changed some default values: align now defaults to center, hideSame now defaults to false

• by Werner Schäffer, October 2014
  *

• 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: false,
  showMaxValue: false,
  showMinValue: 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
  labelFormatter: function(v)
  {
  return v;
  }, // Format the label value to what you want
  align: 'center', // can also be 'center', 'left' or 'right'
  valign: 'top', // can also be 'below', 'middle' or 'bottom'
  useDecimalComma: false,
  plotAxis: 'y', // Set to the axis values you wish to plot
  decimals: false,
  hideZero: false,
  hideSame: false // Hide consecutive labels of the same value
  }
  }
  };

  function init(plot)
  {
  plot.hooks.draw.push(function (plot, ctx)
  {
  // keep a running total between series for stacked bars.
  var stacked = {};

   $.each(plot.getData(), function(ii, series)
   {
      if (!series.valueLabels.show) return;
      var showLastValue = series.valueLabels.showLastValue;
      var showAsHtml = series.valueLabels.showAsHtml;
      var showMaxValue = series.valueLabels.showMaxValue;
      var showMinValue = series.valueLabels.showMinValue;
      var plotAxis = series.valueLabels.plotAxis;
      var labelFormatter = series.valueLabels.labelFormatter;
      var fontcolor = series.valueLabels.fontcolor;
      var xoffset = series.valueLabels.xoffset || 0;
      var yoffset = series.valueLabels.yoffset || 0;
      var xoffsetMin = series.valueLabels.xoffsetMin || xoffset;
      var yoffsetMin = series.valueLabels.yoffsetMin || yoffset;
      var xoffsetMax = series.valueLabels.xoffsetMax || xoffset;
      var yoffsetMax = series.valueLabels.yoffsetMax || yoffset;
      var xoffsetLast = series.valueLabels.xoffsetLast || xoffset;
      var yoffsetLast = series.valueLabels.yoffsetLast || yoffset;
      var align = series.valueLabels.align;
      var valign = series.valueLabels.valign;
      var valignLast = series.valueLabels.valignLast || valign;
      var valignMin = series.valueLabels.valignMin || valign;
      var valignMax = series.valueLabels.valignMax || valign;
      var font = series.valueLabels.font;
      var hideZero = series.valueLabels.hideZero;
      var hideSame = series.valueLabels.hideSame;
      var useDecimalComma = series.valueLabels.useDecimalComma;
      var stackedbar = series.stack;
      var horizontalbar = series.bars.horizontal;
      var decimals = series.valueLabels.decimals;
      // 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;
      var xCategories = series.xaxis.options.mode == 'categories';
      var yCategories = series.yaxis.options.mode == 'categories';
  
      if ((showMinValue || showMaxValue) && typeof(series.data[0]) != 'undefined')
      {
         var xMin = +series.data[0][0];
         var xMax = +series.data[0][0];
         var yMin = +series.data[0][1];
         var yMax = +series.data[0][1];
         for (var i = 1; i < series.data.length; ++i)
         {
            if (+series.data[i][0] < xMin) xMin = +series.data[i][0];
            if (+series.data[i][0] > xMax) xMax = +series.data[i][0];
            if (+series.data[i][1] < yMin) yMin = +series.data[i][1];
            if (+series.data[i][1] > yMax) yMax = +series.data[i][1];
         }
      }
      else
      {
         showMinValue = false;
         showMaxValue = false;
      }
  
      var notShowAll = showMinValue || showMaxValue || showLastValue;
      for (var i = 0; i < series.data.length; ++i)
      {
         if (series.data[i] === null) continue;
         var x = series.data[i][0], y = series.data[i][1];
  
         if (notShowAll)
         {
            var doWork = false;
            if (showMinValue && ((yMin == y && plotAxis == 'y') || (xMin == x && plotAxis == 'x')))
            {
               doWork = true;
               var xdelta = xoffsetMin;
               var ydelta = yoffsetMin;
               var valignWork = valignMin;
               showMinValue = false;
            }
            else if (showMaxValue && ((yMax == y && plotAxis == 'y') || (xMax == x && plotAxis == 'x')))
            {
               doWork = true;
               var xdelta = xoffsetMax;
               var ydelta = yoffsetMax;
               var valignWork = valignMax;
               showMaxValue = false;
            }
            else if (showLastValue && i == series.data.length-1)
            {
               doWork = true;
               var xdelta = xoffsetLast;
               var ydelta = yoffsetLast;
               var valignWork = valignLast;
            }
            if (!doWork) continue;
         }
         else
         {
            var xdelta = xoffset;
            var ydelta = yoffset;
            var valignWork = valign;
         }
         if (xCategories)
         {
            x = series.xaxis.categories[x];
         }
         if (yCategories)
         {
            y = series.yaxis.categories[y];
         }
         if (x < series.xaxis.min || x > series.xaxis.max || y < series.yaxis.min || y > series.yaxis.max) continue;
         var val = (plotAxis === 'x')? x: y;
         if(val == null)
         {
            val = ''
         }
         if (val === 0 && (hideZero || stackedbar)) continue;
  
         if (decimals !== false)
         {
            var mult = Math.pow(10,decimals);
            val = Math.round(val * mult) / mult;
         }
  
         if (series.valueLabels.valueLabelFunc)
         {
            val = series.valueLabels.valueLabelFunc(
            {
               series: series, seriesIndex: ii, index: i
            });
         }
         val = "" + val;
         val = labelFormatter(val);
         if (useDecimalComma)
         {
            val = val.toString().replace('.', ',');
         }
         if (!hideSame || val != last_val || i == series.data.length - 1)
         {
             plotx = x;
             ploty = y;
             if (valignWork == 'bottom')
            {
                 ploty = 0;
             }
            else if (valignWork == 'middle')
            {
                 ploty = ploty / 2;
                ydelta = 11 + ydelta;
             }
            else if (valignWork == 'below')
            {
                 ydelta = 20 + ydelta;
             }
  
        // add up y axis for stacked series
        var addstackX = 0;
        var addstackY = 0;
            if (stackedbar)
            {
      if(horizontalbar) {
          if (align == 'center') {
              plotx = plotx / 2;
          }
  
                 if (!stacked[y]) stacked[y] = 0.0;
                 addstackX = stacked[y];
                 stacked[y] = stacked[y] + x *1;
      }
      else {
                 if (!stacked[x]) stacked[x] = 0.0;
                 addstackY = stacked[x];
                 stacked[x] = stacked[x] + y *1;
      }
            }
  
            var xx = series.xaxis.p2c(+plotx + addstackX) + plot.getPlotOffset().left;
            var yy = series.yaxis.p2c(+ploty + addstackY) - 12 + plot.getPlotOffset().top;
            if (!hideSame || 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 + xdelta;
                  y_pos = yy + 6 + ydelta;
                  // 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() + plot.getPlotOffset().left)
                  {
                     x_pos = plot.width() + plot.getPlotOffset().left + xdelta - 3;
                     var actAlign = 'right';
                  }
                  else
                  {
                     var actAlign = align;
                  }
                  if (font)
                  {
                     ctx.font = font;
                  }
                  if(typeof(fontcolor) != 'undefined')
                  {
                     ctx.fillStyle = fontcolor;
                  }
                  ctx.shadowOffsetX = 0;
                  ctx.shadowOffsetY = 0;
                  ctx.shadowBlur = 1.5;
                  if(typeof(fontcolor) != 'undefined')
                  {
                     ctx.shadowColor = fontcolor;
                  }
                  ctx.textAlign = actAlign;
                  ctx.fillText(series.label, x_pos, y_pos);//val
               }
               else
               {
                  //allow same offsets for html rendering
                  xx = xx + xoffset;
                  yy = yy + 6 + yoffset;
  
                  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.6.0'
  });
  }
  )(jQuery);

Stacked graphs with not-all-series rendering valuelabels is broken

Heya,

With a stacked bar graph if you have only some of the series rendering valueLabels the plugin places the value labels in the incorrect place for the series that are stacked ontop.

There's an example of the problem here: https://github.com/mintsoft/flot-valuelabels/blob/bug-example/example4.html at the moment the label for France is rendered in the wrong place. If you switch valueLabels to true, then they're rendered in the correct place.

Thanks,
Rob

Bold

Is it possible to make the labels Bold?