Can't get navigate plugin to work

MissyLaMotte

unread,

Jul 19, 2019, 4:46:24 AM7/19/19

to Flot graphs

Okay, now I am stumbling into the next problem. The navigate plugin does not work for me any longer. I just can't get it to pan. This time I tried both the distribution version and including the complete source files, but it did not make any difference. I'll attach the source code of a mini-example below. Any idea of what I am doing wrong?

Also, I noticed that in the online example the panRanges are still specified, but the plugin no longer seems to support them (which is a bad move ... without a method to limit the panning, the plugin is pretty useless for many cases).

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Mini-flot</title>
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.js"></script>

    <script type='text/javascript'>
    $('document').ready( function() {
        var data = [[ [1, 3], [2, 14.01], [3.5, 3.14] ], [[1,1], [2, 2], [3, 3]]];

        var options = {
                legend: {position: "nw"},
                xaxis: {
                    show: true,
                    plotPan: true,
                    axisPan: false,
                    min: 0,
                    max: 5,
                    //panRange: [-10, 10]
                },
                yaxis: {
                    show: true,
                    plotPan: true,
                    axisPan: false,
                    min: -5,
                    max: 15,
                    //panRange: [-10, 20]
                },
                series: {
                    lines: {
                        show: true,
                        lineWidth: 1
                    }
                },
                pan: {
                    interactive: true,
                    mode: 'manual',
                    cursor: 'move',
                    frameRate: 20
                }
            };

        var plot = $.plot('#placeholder', data, options);
        plot.setupGrid();
        plot.draw();

        $('#placeholder').bind("plotpan", function (event, plot) {
            var axes = plot.getAxes();
            $("div#message").text("Panning to x: " + axes.xaxis.min.toFixed(2)
            + " – " + axes.xaxis.max.toFixed(2)
            + " and y: " + axes.yaxis.min.toFixed(2)
            + " – " + axes.yaxis.max.toFixed(2));
        });
    });
    </script>
</head>
<body>
    <div id='placeholder' style='width: 500px; height: 300px;'></div>
    <div id='message'></div>
</body>

Andrew Dove

unread,

Jul 19, 2019, 9:45:27 AM7/19/19

to Flot graphs

Your example works if I include all the same scripts as in the navigate example but not if I include the script from dist/es5. So it looks like a build problem.

Andrew Dove

unread,

Jul 19, 2019, 9:55:26 AM7/19/19

to Flot graphs

You need to include jquery.event.drag.js from the lib folder

On Friday, July 19, 2019 at 3:46:24 AM UTC-5, MissyLaMotte wrote:

MissyLaMotte

unread,

Jul 24, 2019, 8:57:51 AM7/24/19

to Flot graphs

Great, that seems to be working. Thanks for figuring that out.

I do need to limit the amunt the user can pan the graph, though. Is there a substitute for the former panRanges options which don't seem to be supported anymore? Now it looks like I can only allow panning for a direction or not, but not limit the amounts.

jutta....@googlemail.com

unread,

Jun 7, 2021, 10:58:15 AM6/7/21

to Flot graphs

Is there any solution for this? I made another attempt to update from 0.8.3 to version 3.2.2 today, but this issue keeps tripping me off. I need the navigate plugin and I need it to accept the panRanges. (Even in the example they are ignored). Has anyone found a workaround for this?

atm.g...@gmail.com

unread,

Jul 16, 2021, 10:25:23 AM7/16/21

to Flot graphs

Just to put it on your radar I have a PR up to address some issues with panning misbehaving when used in conjunction with panRange. Hopefully this will address all of your concerns.

Reply all

Reply to author

Forward