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

theideabulbAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
You're doing it already.  It's in the "contents" variable.  Here is a demo
http://jsbin.com/osOhiMU/2/edit

all i did was add the contents to the tooltip
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
theideabulbAuthor Commented:
Very nice.   Thank you!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.