Link to home
Start Free TrialLog in
Avatar of theideabulb
theideabulbFlag for United States of America

asked on

jQuery Flot Tooltip question

I am trying to figure out how to get my actual data to be included in the tooltip using Flot.  I have a line graph with 2 data series.  I would like the tooltip to show the value of each, but it looks like its showing me the coordinates that its at.  How can i grab the data from the chart to put in the tooltip?


<script>

			function showTooltip(title, x, y, contents) {
                $('<div id="tooltip" class="chart-tooltip"><div class="date">' + title + '<\/div><div class="label label-success">CTR: ' + x + '%<\/div><div class="label label-important">Imp: ' + x + '<\/div><\/div>').css({
                    position: 'absolute',
                    display: 'none',
                    top: y - 100,
                    width: 75,
                    left: x - 40,
                    border: '0px solid ##ccc',
                    padding: '2px 6px',
                    'background-color': '##fff',
                }).appendTo("body").fadeIn(200);
            }


                $.plot($("##site_statistics"), [{
                        data: #finalTransList#,
                        label: "Transactions"
                    }, {
                        data: #finalListingsList#,
                        label: "Listings Posted"
                    }
                ], {
                    series: {
                        lines: {
                            show: true,
                            lineWidth: 2,
                            fill: true,
                            fillColor: {
                                colors: [{
                                        opacity: 0.05
                                    }, {
                                        opacity: 0.01
                                    }
                                ]
                            }
                        },
                        points: {
                            show: true
                        },
                        shadowSize: 2
                    },
                    grid: {
                        hoverable: true,
                        clickable: true,
                        tickColor: "##eee",
                        borderWidth: 0
                    },
                    colors: ["##d12610", "##37b7f3", "##52e136"],
                    xaxis: {
                        ticks: 11,
                        tickDecimals: 0
                    },
                    yaxis: {
                        ticks: 11,
                        tickDecimals: 0
                    }
                });

                var previousPoint = null;
                $("##site_statistics").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);

                            showTooltip('', item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);
                        }
                    } else {
                        $("##tooltip").remove();
                        previousPoint = null;
                    }
                });
                           

</script>

Open in new window




Here are the two sets of data that I am hoping to include in the tooltip
data: [[30, 0],[29, 0],[28, 0],[27, 0],[26, 0],[25, 0],[24, 0],[23, 0],[22, 0],[21, 0],[20, 0],[19, 0],[18, 0],[17, 0],[16, 0],[15, 0],[14, 0],[13, 0],[12, 0],[11, 0],[10, 0],[9, 0],[8, 0],[7, 0],[6, 0],[5, 0],[4, 0],[3, 0],[2, 0],[1, 0]],
                        label: "Transactions"
                    }, {
                        data: [[30, 0],[29, 0],[28, 0],[27, 0],[26, 0],[25, 0],[24, 1],[23, 0],[22, 0],[21, 0],[20, 0],[19, 0],[18, 0],[17, 0],[16, 0],[15, 0],[14, 0],[13, 0],[12, 0],[11, 0],[10, 0],[9, 0],[8, 0],[7, 0],[6, 0],[5, 2],[4, 0],[3, 0],[2, 0],[1, 0]],
                        label: "Listings Posted"
                    }

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Rob
Rob
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of theideabulb

ASKER

Very nice.   Thank you!!