37

I'm trying to produce a line chart using Flot, but I want the data labels to show up on the chart - meaning, I want the value of each point to appear next to that point. I feel like this should be an option, but can't find it in the API. Am I just missing something, or does someone know a workaround?

Thanks in advance.

Zeth
  • 875
  • 1
  • 7
  • 13

5 Answers5

45

Here is how I added the feature, including a pleasant animation effect: 

var p = $.plot(...);

$.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 + 4,
    top: o.top - 43,
    display: 'none'
  }).appendTo(p.getPlaceholder()).fadeIn('slow');
});

You can move the position and display css to a stylesheet.

tom
  • 2,067
  • 18
  • 10
  • Nice trick but is there a way to make these data label the same size as the ticks and with text-align center? Because the o.left+4 do not center for some values. thx. – Paulo Bueno Mar 09 '12 at 03:42
  • 2
    Not perfect, but works... I'm using horizontal bars, so need to change the el[1] to el[0] when rendering the value. Thanks – Leandro Alves May 31 '12 at 22:15
  • I have problem with this : my o.left is "NaN" – sHaDeoNeR Dec 31 '14 at 11:12
10

The feature you want is requested here in the Flot Google group. It doesn't look like it was ever implemented (there's nothing in the API about putting any labels inside the chart itself). I think that the answer to your question is that No, it's not possible at this time to show values next to certain points on lines inside the graph.

Ole Larson, head developer on Flot, mentioned that showing labels inside the chart is different than anything else on FLot and that they would have to think about how to extend the API / plot parameters to do it.

That said, you might want to go post a question on the Flot forum or make a suggestion on the bug-tracker for the new feature. Ole Larson is actually really good at getting back to all the questions, bugs, and suggestions himself.

thewillcole
  • 2,943
  • 3
  • 30
  • 35
  • 2
    That said, Flot is open source, so you can write the feature yourself if you're an experienced JS developer. – thewillcole Jul 23 '09 at 23:29
  • Thanks for this. My JS development experience is relatively minimal, but I'll take a shot at it. I also feel like I should be able to find a workaround by adding the data in fixed position divs near the bar (a la tooltips, but permanent), but haven't yet found a way to cycle through the data to get X & Y coordinates. – Zeth Jul 24 '09 at 14:30
  • Zeth, fixed position divs sounds like a good idea. You should also look at the Flot examples (on code.google.com/p/flot) to look at the tool tip code and the on-hover event code. The tool tip code might help to write the labels and the on-hover event code might show you how to get the positions of the bars. – thewillcole Jul 24 '09 at 18:16
  • Another idea is to set the size of the graph manually by using the min and max properties in the options configuration, like so: { yaxis: { min: 0, max: 10 }, xaxis: { min: 0, max: 10 } } (you can actually just retrieve the min and max in the tick formatter method, see API). If you knew the size of the graph area, you could plot the labels on the bars using the bars height and position as x,y coordinates, adjusting them according to the dimensions of the graph. --IF this was helpful and you're feeling generous, rate up (or select) my answer and/or comments. I'm new and trying to get to 250.-- – thewillcole Jul 24 '09 at 18:25
9

If anyone else is looking for a quick solution, see this plugin:

http://sites.google.com/site/petrsstuff/projects/flotvallab

Ross Martin
  • 196
  • 1
  • 3
5

Looks like the flot-valuelabels plugin is a fork of a previous flot plugin -- but the forked code renders the labels on the canvas. You can see a demo of what this looks like on the plugin's Github wiki page, here (it looks quite pleasing to the eye).

Dan Esparza
  • 28,047
  • 29
  • 99
  • 127
1
function redrawplot() {
   $('.tt1').remove();
   var points = plot.getData();
     var graphx = $('#placeholder').offset().left;
     graphx = graphx + 30; // replace with offset of canvas on graph
     var graphy = $('#placeholder').offset().top;
     graphy = graphy + 10; // how low you want the label to hang underneath the point
     for(var k = 0; k < points.length; k++){
          for(var m = 1; m < points[k].data.length-1; m++){
            if(points[k].data[m][0] != null && points[k].data[m][1] != null){
                  if ((points[k].data[m-1][1] < points[k].data[m][1] && points[k].data[m][1] > points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] < -50 || points[k].data[m][1] - points[k].data[m+1][1] > 50)) {
                                 showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) - 35,points[k].data[m][1], points[k].color);
              }
                              if ((points[k].data[m-1][1] > points[k].data[m][1] && points[k].data[m][1] < points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] > 50 || points[k].data[m][1] - points[k].data[m+1][1] < -50)) {
                                 showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) + 2,points[k].data[m][1], points[k].color);
                              }
                            }
        }
      }

 }

function showTooltip1(x,y,contents, colour){
  $('<div class=tt1 id="value">' +  contents + '</div>').css( {
        position: 'absolute',
        display: 'none',
        top: y,
        left: x,
        'border-style': 'solid',
        'border-width': '2px',
        'border-color': colour,
        'border-radius': '5px',
        'background-color': '#ffffff',
        color: '#262626',
        padding: '0px',
        opacity: '1'
  }).appendTo("body").fadeIn(200);
}
kleopatra
  • 51,061
  • 28
  • 99
  • 211
Sedrok
  • 11
  • 1