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

jQueryJavaScript

Avatar of undefined
Last Comment
theideabulb

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Rob

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
theideabulb

Very nice.   Thank you!!
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck