troubleshooting Question

jQuery Flot Tooltip question

Avatar of theideabulb
theideabulbFlag for United States of America asked on
JavaScriptjQuery
2 Comments1 Solution1984 ViewsLast Modified:
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>



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"
                    }
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 2 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros