Skip to content

F
flot
Switch branch/tag
Find file
Normal viewHistoryPermalink
navigate.html 3.96 KB
Newer Older
olau@iola.dk's avatar
Added navigate plugin for panning and zooming
0c5bb75f
 
olau@iola.dk committed
1 2 3 4 5 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot Examples</title>
olau@iola.dk's avatar
Fix some validator warnings (suggested by Colin Law)
477b6147
 
olau@iola.dk committed
6 
    <link href="layout.css" rel="stylesheet" type="text/css">
olau@iola.dk's avatar
Skip loading excanvas in IE 9 in examples (thanks to Ryley Breiddal), adapt...
d8e20bf1
 
olau@iola.dk committed
7 
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
olau@iola.dk's avatar
Added navigate plugin for panning and zooming
0c5bb75f
 
olau@iola.dk committed
8 9 10 
    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="../jquery.flot.navigate.js"></script>
olau@iola.dk's avatar
Fix some validator warnings (suggested by Colin Law)
477b6147
 
olau@iola.dk committed
11 
    <style type="text/css">
olau@iola.dk's avatar
Added navigate plugin for panning and zooming
0c5bb75f
 
olau@iola.dk committed
12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 
    #placeholder .button {
        position: absolute;
        cursor: pointer;
    }
    #placeholder div.button {
        font-size: smaller;
        color: #999;
        background-color: #eee;
        padding: 2px;
    }
    .message {
        padding-left: 50px;
        font-size: smaller;
    }
    </style>
 </head>
 <body>
    <h1>Flot Examples</h1>

    <div id="placeholder" style="width:600px;height:300px;"></div>

    <p class="message"></p>
olau@iola.dk's avatar
Rewrote the description text a wee bit
689daa1f
 
olau@iola.dk committed
35 36 37 38 39 40 41 
    <p>With the navigate plugin it is easy to add panning and zooming.
    Drag to pan, double click to zoom (or use the mouse scrollwheel).</p>

    <p>The plugin fires events (useful for synchronizing several
    plots) and adds a couple of public methods so you can easily build
    a little user interface around it, like the little buttons at the
    top right in the plot.</p>
olau@iola.dk's avatar
Added navigate plugin for panning and zooming
0c5bb75f
 
olau@iola.dk committed
42 43
olau@iola.dk's avatar
Fix some validator warnings (suggested by Colin Law)
477b6147
 
olau@iola.dk committed
44 
<script type="text/javascript">
olau@iola.dk's avatar
Added navigate plugin for panning and zooming
0c5bb75f
 
olau@iola.dk committed
45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 
$(function () {
    // generate data set from a parametric function with a fractal
    // look
    function sumf(f, t, m) {
        var res = 0;
        for (var i = 1; i < m; ++i)
            res += f(i * i * t) / (i * i);
        return res;
    }
    
    var d1 = [];
    for (var t = 0; t <= 2 * Math.PI; t += 0.01)
        d1.push([sumf(Math.cos, t, 10), sumf(Math.sin, t, 10)]);
    var data = [ d1 ];

    
    var placeholder = $("#placeholder");
    var options = {
        series: { lines: { show: true }, shadowSize: 0 },
        xaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] },
        yaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] },
        zoom: {
olau@iola.dk's avatar
Fix bug in navigate example introduced by renaming enable to interactive
de5abcef
 
olau@iola.dk committed
67 
            interactive: true
olau@iola.dk's avatar
Added navigate plugin for panning and zooming
0c5bb75f
 
olau@iola.dk committed
68 69 
        },
        pan: {
olau@iola.dk's avatar
Fix bug in navigate example introduced by renaming enable to interactive
de5abcef
 
olau@iola.dk committed
70 
            interactive: true
olau@iola.dk's avatar
Added navigate plugin for panning and zooming
0c5bb75f
 
olau@iola.dk committed
71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 
        }
    };

    var plot = $.plot(placeholder, data, options);

    // show pan/zoom messages to illustrate events 
    placeholder.bind('plotpan', function (event, plot) {
        var axes = plot.getAxes();
        $(".message").html("Panning to x: "  + axes.xaxis.min.toFixed(2)
                           + " &ndash; " + axes.xaxis.max.toFixed(2)
                           + " and y: " + axes.yaxis.min.toFixed(2)
                           + " &ndash; " + axes.yaxis.max.toFixed(2));
    });

    placeholder.bind('plotzoom', function (event, plot) {
        var axes = plot.getAxes();
        $(".message").html("Zooming to x: "  + axes.xaxis.min.toFixed(2)
                           + " &ndash; " + axes.xaxis.max.toFixed(2)
                           + " and y: " + axes.yaxis.min.toFixed(2)
                           + " &ndash; " + axes.yaxis.max.toFixed(2));
    });

    // add zoom out button 
    $('<div class="button" style="right:20px;top:20px">zoom out</div>').appendTo(placeholder).click(function (e) {
        e.preventDefault();
        plot.zoomOut();
    });

    // and add panning buttons
    
    // little helper for taking the repetitive work out of placing
    // panning arrows
    function addArrow(dir, right, top, offset) {
        $('<img class="button" src="arrow-' + dir + '.gif" style="right:' + right + 'px;top:' + top + 'px">').appendTo(placeholder).click(function (e) {
            e.preventDefault();
            plot.pan(offset);
        });
    }

    addArrow('left', 55, 60, { left: -100 });
    addArrow('right', 25, 60, { left: 100 });
    addArrow('up', 40, 45, { top: -100 });
    addArrow('down', 40, 75, { top: 100 });
});
</script>

 </body>
</html>