tooltips on multiple charts, same page

Skip to first unread message

Steve Chambers

Jun 29, 2019, 7:41:12 AM6/29/19
to Flot graphs
Hi, I am trying to add multiple charts with tooltips on the same page. I was using an older version of flot which worked. But I decided to upgrade and cannot  get 'plothover' to work on more than one plot at a time, on the page.
My Js on page:
            $(function () {

                $('#chart-orders, #chart-previous-orders').on('plothover', function (event, pos, item) {

                    if (item) {

                        var tooltip = item.datapoint[1].toFixed(0);


                            left: item.pageX+5,
                            top: item.pageY-25

                       $('#chart-orders, #chart-previous-orders').css('cursor', 'pointer');
                    } else {
                        $('#chart-orders, #chart-previous-orders').css('cursor', 'auto');

                $('#chart-orders, #chart-previous-orders').on("plothovercleanup", function (event, pos, item) {


I have 'hoverable' set to 'true' on both grids.
I am using jquery-3.2.1.min.js
I am Using ajax to get the data and options e.g. #chart-orders
            type: 'get',
            url: 'index.php?route=extension/dashboard/chart/chart&token=<?php echo $token; ?>&range=' + $(this).attr('href'),
            dataType: 'json',
            success: function (json) {
                if (typeof json['order'] == 'undefined') {
                    return false;
                if (typeof json['amazon_order'] == 'undefined') {
                    return false;
                var series = [json['amazon_order'], json['order'], json['customer']];
                var option = {
                    shadowSize: 0,
                    colors: ['#FFA600', '#5D4D80', '#1065D2'],
                    series: {
                        bars: {
                            show: true,
                            barWidth: 1,
                            align: "left"
                    grid: {
                        backgroundColor: '#FFFFFF',
                        hoverable: true
                    xaxis: {
                        show: true,
                        ticks: json['xaxis']

                $.plot('#chart-orders', series, option);

            error: function (xhr, ajaxOptions, thrownError) {
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
Any help or pointers?


Jul 1, 2019, 12:02:07 PM7/1/19
to Flot graphs
The way you're using $.on() won't work because you're trying to attach the event handlers to elements that don't exist yet. If you want .on() to automatically attach the event handlers when the elements are created, you need to do this:

$(document).on('plothover', '#chart-orders,#chart-previous-orders', function(event, pos, item) {


Here's a working jsfiddle example.
Reply all
Reply to author
0 new messages