tooltips on multiple charts, same page

63 views
Skip to first unread message

Steve Chambers

unread,
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) {
                     $("#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

unread,
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
Forward
0 new messages