Question

Hopefully this questions isn’t too confusing or long, I’m working with the Flot examples, specifically this one.

I’m using flot to graph some data I’ve been gathering into a Scatter chart. I’m using the following function to do so…

function genScatter(){
    var no = getSelectedRepeat();
    $.get("getPages.json",{rid: no},function(data){
        var d1 = [];
        $.each(data,function(i,obj){
            d1.push([obj.queries,obj.count,{url: obj.url}]);
        })
        $.plot($("#scatter"), [ { label: "Pages",
            data: d1, 
            lines:{show: false},
            points:{show: true}}],{
            xaxis:{min: 1},
            grid:{ hoverable: true}
        });
  });

}

My code generates a Scatter chart with various points. When I hover over a point the following listener gets activated…

$("#scatter").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
    if (item) {
        if (previousPoint != item.dataIndex) {
            previousPoint = item.dataIndex;

            $("#tooltip").remove();
            var x = item.datapoint[0].toFixed(2),
                y = item.datapoint[1].toFixed(2);

            /*this would be the line where I extract
             the url and forward it to showToolTip.*/
            showTooltip(item.pageX, item.pageY,
                        item.series.label  + ": " + y);
        }
    }
    else {
        $("#tooltip").remove();
        previousPoint = null;            
    }

});

where showTooltip is defined is…

function showTooltip(x, y, contents) {
   $('<div id="tooltip">' + contents + '</div>').css( {
        position: 'absolute',
        display: 'none',
        top: y + 5,
        left: x + 5,
        border: '1px solid #fdd',
        padding: '2px',
        'background-color': '#fee',
        opacity: 0.80
    }).appendTo("body").fadeIn(200);
}

Basically, when hovering over a point I’d like to render the value for url added with the point to d1 but I haven’t been able to because the item object doesn’t return url inside item.datapoint only the x,y value of the points are returned. url is included inside item but under item.data in an array with all of the other points in the graph.

My question is, either identifying the point uniquely from the array listed in item.data or forcing flot to include url inside item.datapoint is there a way to get the url to a corresponding point?

Answer 1

If you define your data structure like that then you should be able to get the url in your plothover callback with (example here):

item.series.data[item.dataIndex][2].url