tooltips on multiple charts, same page

[Steve Chambers]

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) {

                     $("#tooltip").hide();

                    if (item) {

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

                        $('#tooltip').html(tooltip);

                        $('#tooltip').css({

                            left: item.pageX+5,

                            top: item.pageY-25

                        }).fadeIn(200);

                       $('#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) {

                    $("#tooltip").hide();

                });

            });

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

        $.ajax({

            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?

Thanks

Steve

[Ced]

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.