Search code examples
javascriptflot

Flot Chart Value Labels with multiple axes

I'm trying to do a Flot multiline (with multiple y axes) with labels in all values, but I can't do it...

My code is:

HTML:

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

JAVASCRIPT:

var d1 = [[1456531200000,14.46],[1456704000000,11.07],[1456790400000,13.12],[1456876800000,10.8],[1457049600000,16.51]];

var d2 = [[1456617600000,"1"]];

var data1 = [
{
    label: "Values",
     yaxis: 1,
    data: d1  
}, {
    label: "Events",
    data: d2,
     yaxis: 2,
    points: {show: true, 
        radius: 6}

}];
var ticks = [[0,""],[1, "Event1"],[2, "Event2"],[3, "Event3"]];

var p = $.plot($("#placeholder-bar-chart"), data1, {
xaxis: { 
    mode: "time",
    tickSize: [1, "day"],
    tickLength: 0, 
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
    axisLabelPadding: 5
},
yaxes: [
 {
    position: "left",
    color: "black",
},
{
 position: "right",
    ticks: ticks,
    color: "black",
}], 

grid: {
    hoverable: true,
    clickable: false,
    borderWidth: 0,
    borderColor:'#f0f0f0',
    labelMargin:8,
},
 legend: {
    show: true,
    noColumns: 2
}   
});

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

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

And I get this graphic:

enter image description here

It would be possible to put the labels on all points? I'd like to put on events values the corresponding tick label.

http://jsfiddle.net/gaia/8v55wzjc/117/

Solution

  • You need to specify the yaxis for which the coordinates are calculated in the pointOffset function like described in the documentation. For the event label(s) use:

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

    Updated fiddle.