Customizing bars with labels on top

[Alessandro Abreis]

Hi people.

I'd like to show labels on top of bars. On this link there is a solution (in javascript): http://stackoverflow.com/questions/25231812/flot-chart-customizing-bars-with-labels-on-top

$.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');
});

How do I do the same using gwtquery or another simple solution using the api?

I'm using gflot-3.2.0.jar in my gwt project.

Tks in advanced.

[Nicolas Morel]

Hi, 

You can use JSNI and use almost the same code you paste.

The "p" variable is the plot. You can obtain it via SimplePlot.getPlot().

The "$" variable is not directly accessible. You can obtain it in JSNI with $wnd.jQuery.

Your code will then look similar to :

public final native void showLabels( Plot p )
/*-{
  $wnd.jQuery.each(p.getData()[0].data, function(i, el){

    var o = p.pointOffset({x: el[0], y: el[1]});

    $wnd.jQuery('<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');
  });

}-*/;

I didn't tested it but it should work. 

You can also do the same in Java. Since you have access to the plot through the Plot class, you can also retrieve the data with Plot.getData() and iterate over them.

The placeholder is the SimplePlot.getElement(). The only thing missing in Java is the pointOffset method but you can call it with JSNI.