CODEWITHSUNDEEP
javascripttooltipflot
aunindo
aunindo

Reputation: 133

flot plothover and transform

I modified the chart in http://www.flotcharts.org/flot/examples/interacting/index.html to have logarithmic x-axis. In the chart I added the line:

xaxis: {transform: function (v) {return v == 0 ? v : Math.log(v);}}

var sin = [], cos = [];

    for (var i = 0; i < 14; i += 0.5) {
        sin.push([i, Math.sin(i)]);
        cos.push([i, Math.cos(i)]);
    }

    var plot = $.plot("#placeholder", [
        { data: sin, label: "sin(x)"}
    ], {
        series: {
            lines: {
                show: true
            },
            points: {
                show: true
            }
        },
        grid: {
            hoverable: true,
            clickable: true
        },
        yaxis: {
            min: -1.2,
            max: 1.2
        },
        xaxis: {transform: function (v) {return v == 0 ? v : Math.log(v);}}
    });

    $("<div id='tooltip'></div>").css({
        position: "absolute",
        display: "none",
        border: "1px solid #fdd",
        padding: "2px",
        "background-color": "#fee",
        opacity: 0.80
    }).appendTo("body");

    $("#placeholder").bind("plothover", function (event, pos, item) {

        if ($("#enablePosition:checked").length > 0) {
            var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
            $("#hoverdata").text(str);
        }

        if ($("#enableTooltip:checked").length > 0) {
            if (item) {
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);

                $("#tooltip").html(item.series.label + " of " + x + " = " + y)
                    .css({top: item.pageY+5, left: item.pageX+5})
                    .fadeIn(200);
            } else {
                $("#tooltip").hide();
            }
        }
    });

    $("#placeholder").bind("plotclick", function (event, pos, item) {
        if (item) {
            $("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
            plot.highlight(item.series, item.datapoint);
        }
    });

This seems to prevent plothover being passed an 'item' - it's always undefined. If I comment out the transform line, everything works fine.

Where am I going wrong? Or is it a bug in Flot? Please help.

Upvotes: 2

Views: 1221

Answers (1)

Mark
Mark

Reputation: 108512

You need an inverseTransform function. As stated in the documentation:

The inverseTransform is simply the inverse of the transform function (so v == inverseTransform(transform(v)) for all relevant v). It is required for converting from canvas coordinates to data coordinates, e.g. for a mouse interaction where a certain pixel is clicked. If you don't use any interactive features of Flot, you may not need it.

So:

xaxis: {
    transform: function (v) {
        return v === 0 ? 0 : Math.log(v);
    },
    inverseTransform: function (v) { 
        return Math.exp(v); 
    }
}

Here's an example.

Upvotes: 3

Related Questions