Flot chart - customizing bars with labels on top

Question

Need help to set data on top of bar chart.

This is a current work Flot chart current work

This is how it need to look Missing data on top of bars in % enter image description here

So basicaly need help that top data/labels on bars

Here is the javascript code

$(document).ready(function() {
  var d1_1 = [
    [1325376000000, 10],
    [1328054400000, 20],
    [1330560000000, 30],
    [1333238400000, 40],
    [1335830400000, 35]
  ];

  var d1_2 = [
    [1325376000000, 80],
    [1328054400000, 60],
    [1330560000000, 20],
    [1333238400000, 90],
    [1335830400000, 30]
  ];

  var data1 = [{
      label: "Product 1",
      data: d1_1,
      bars: {
        show: true,
        barWidth: 12 * 44 * 60 * 60 * 300,
        fill: true,
        lineWidth: 0,
        order: 1,
        fillColor: {
          colors: ["#80C3FD", "#0089FF"]
        }
      },
      color: "rgba(243, 89, 88, 0.7)"
    },
    {
      label: "Product 2",
      data: d1_2,
      bars: {
        show: true,
        barWidth: 12 * 44 * 60 * 60 * 300,
        fill: true,
        lineWidth: 0,
        order: 2,
        fillColor: {
          colors: ["#F39494", "#f14d4d"]
        }
      },
      color: "rgba(251, 176, 94, 0.7)"
    },

  ];

  $.plot($("#placeholder-bar-chart"), data1, {
    xaxis: {
      min: (new Date(2011, 11, 15)).getTime(),
      max: (new Date(2012, 04, 18)).getTime(),
      mode: "time",
      timeformat: "%b",
      tickSize: [1, "month"],
      //monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
      tickLength: 0, // hide gridlines
      axisLabel: 'Month',
      axisLabelUseCanvas: true,
      axisLabelFontSizePixels: 12,
      axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
      axisLabelPadding: 5,
      ticks: [
        [1325376000000, 'Takaoma'],
        [1328054400000, 'Giacompany'],
        [1330560000000, 'FreshFields'],
        [1333238400000, 'Generalisimo'],
        [1335830400000, 'Greenleaves']
      ]
    },
    yaxis: {
      axisLabel: '%',
      axisLabelUseCanvas: true,
      axisLabelFontSizePixels: 12,
      axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
      axisLabelPadding: 5,
      tickSize: 10,
      tickFormatter: function(val, axis) {
        return val + "%";
      },

    },
    grid: {
      hoverable: true,
      clickable: false,
      borderWidth: 0,
      borderColor: '#f0f0f0',
      labelMargin: 8,
    },
    series: {
      shadowSize: 1,

    },

    legend: {
      show: false,
    },
    tooltip: true,
    tooltipOpts: {
      id: "chart-tooltip",
      content: "<p><b>20</b> Outgoing Filings</p>" +
        "<p>Out of <b>10</b> committed;</p>" +
        "<br />" +
        "<p><b>30%</b>% Ratio</p>",
      shifts: {
        x: -74,
        y: -125
      },
      lines: {
        track: true
      },
      compat: true,
    },


  });

});

#placeholder-bar-chart {
  width: 600px;
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.min.js"></script>


<div id="placeholder-bar-chart" class="demo-placeholder"></div>

possible duplicate of [JQuery, Flot, valuelabels, center](http://stackoverflow.com/questions/21701504/jquery-flot-valuelabels-center) — Mark, Aug 10 '14 at 19:28
@Mark, problem with your link is that the flot plugin (Value Labels) referenced is no longer being maintained... — mccannf, Aug 11 '14 at 14:46
@mccannf, re-read my answer. It argues NOT to use the plugin and to create the data labels yourself. If's somewhat similar to yours although it "writes" directly on the canvas and *does not* use absolutely positioned divs. I prefer my approach since it will export to an image (`toDataURL`) correctly. — Mark, Aug 11 '14 at 16:04

score 11 · Accepted Answer · edited Sep 28 '20 at 20:48

Following on from the answer to this question: Flot Data Labels

If you do var p = $.plot... you can iterate over the data points for both series like so:

$.each(p.getData()[0].data, function(i, el){
  var o = p.pointOffset({x: el[0], y: el[1]});
  $('<div class="data-point-label">' + el[1] + '%</div>').css( {
    position: 'absolute',
    left: o.left - 25,
    top: o.top - 20,
    display: 'none'
  }).appendTo(p.getPlaceholder()).fadeIn('slow');
});

$.each(p.getData()[1].data, function(i, el){
  var o = p.pointOffset({x: el[0], y: el[1]});
  $('<div class="data-point-label">' + el[1] + '%</div>').css( {
    position: 'absolute',
    left: o.left + 4,
    top: o.top - 20,
    display: 'none'
  }).appendTo(p.getPlaceholder()).fadeIn('slow');
});

and you get something like this:

Flot bar chart with labels

var d1_1 = [
  [1325376000000, 10],
  [1328054400000, 20],
  [1330560000000, 30],
  [1333238400000, 40],
  [1335830400000, 35]
];

var d1_2 = [
  [1325376000000, 80],
  [1328054400000, 60],
  [1330560000000, 20],
  [1333238400000, 90],
  [1335830400000, 30]
];

var data1 = [{
    label: "Product 1",
    data: d1_1,
    bars: {
      show: true,
      barWidth: 12 * 44 * 60 * 60 * 300,
      fill: true,
      lineWidth: 0,
      order: 1,
      fillColor: {
        colors: ["#80C3FD", "#0089FF"]
      }
    },
    color: "#0089FF"
  },
  {
    label: "Product 2",
    data: d1_2,
    bars: {
      show: true,
      barWidth: 12 * 44 * 60 * 60 * 300,
      fill: true,
      lineWidth: 0,
      order: 2,
      fillColor: {
        colors: ["#F39494", "#f14d4d"]
      }
    },
    color: "#f14d4d"
  },

];
var p = $.plot($("#placeholder-bar-chart"), data1, {
  xaxis: {
    min: (new Date(2011, 11, 15)).getTime(),
    max: (new Date(2012, 04, 18)).getTime(),
    mode: "time",
    timeformat: "%b",
    tickSize: [1, "month"],
    //monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    tickLength: 0, // hide gridlines
    axisLabel: 'Month',
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
    axisLabelPadding: 5,
    ticks: [
      [1325376000000, 'Takaoma'],
      [1328054400000, 'Giacompany'],
      [1330560000000, 'FreshFields'],
      [1333238400000, 'Generalisimo'],
      [1335830400000, 'Greenleaves']
    ]
  },
  yaxis: {
    axisLabel: '%',
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
    axisLabelPadding: 5,
    tickSize: 10,
    tickFormatter: function(val, axis) {
      return val + "%";
    },

  },
  grid: {
    hoverable: true,
    clickable: false,
    borderWidth: 0,
    borderColor: '#f0f0f0',
    labelMargin: 8,
  },
  series: {
    shadowSize: 1,

  },

  legend: {
    show: true,
    noColumns: 2,
    container: "#bar-legend"
  },
  tooltip: true,
  tooltipOpts: {
    id: "chart-tooltip",
    content: "<p><b>20</b> Outgoing Filings</p>" +
      "<p>Out of <b>10</b> committed;</p>" +
      "<br />" +
      "<p><b>30%</b>% Ratio</p>",
    shifts: {
      x: -74,
      y: -125
    },
    lines: {
      track: true
    },
    compat: true,
  },
});

$.each(p.getData()[0].data, function(i, el) {
  var o = p.pointOffset({
    x: el[0],
    y: el[1]
  });
  $('<div class="data-point-label">' + el[1] + '%</div>').css({
    position: 'absolute',
    left: o.left - 25,
    top: o.top - 20,
    display: 'none'
  }).appendTo(p.getPlaceholder()).fadeIn('slow');
});

$.each(p.getData()[1].data, function(i, el) {
  var o = p.pointOffset({
    x: el[0],
    y: el[1]
  });
  $('<div class="data-point-label">' + el[1] + '%</div>').css({
    position: 'absolute',
    left: o.left + 4,
    top: o.top - 20,
    display: 'none'
  }).appendTo(p.getPlaceholder()).fadeIn('slow');
});

.chart-container {
  width: 600px;
  height: 300px;
  font-family: Helvetica, Sans-serif;
}

.mychart {
  width: 100%;
  height: 100%;
}

.data-point-label {
  font-size: 12px;
  color: gray;
}

.chart-legend {
  width: 40%;
  margin: 5px auto;
}

.legendLabel {
  padding-right: 10px;
}


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://www.flotcharts.org/javascript/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.min.js"></script>
<script src="http://www.pikemere.co.uk/blog/js/jquery.flot.orderBars.js"></script>



<div class="chart-container">
  <div id="placeholder-bar-chart" class="mychart"></div>
  <div id="bar-legend" class="chart-legend"></div>
</div>

Mccann tnx man! This works! I lost all day to figure out how to do this! — Pavlito, Aug 10 '14 at 21:46
+1 for the fiddle. (When I first saw the answer, the image was broken but fiddle let me view the output. Somehow I am able to see the image in answer now. Images in OP are still broken). — TheCrazyProgrammer, Feb 27 '17 at 18:56

Flot chart - customizing bars with labels on top

1 Answers1