Skip to content

F
flot
Switch branch/tag
Find file
Normal viewHistoryPermalink
selection.html 4.84 KB
Newer Older
olau@iola.dk's avatar
Added first version
87390ae7
 
olau@iola.dk committed
1 2 3 4 5 6 
<!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>
    <link href="layout.css" rel="stylesheet" type="text/css"></link>
olau@iola.dk's avatar
Use SVN release of excanvas, hopefully this will make Flot work with IE
f899a097
 
olau@iola.dk committed
7 
    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
olau@iola.dk's avatar
Added first version
87390ae7
 
olau@iola.dk committed
8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 
    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
 </head>
    <body>
    <h1>Flot Examples</h1>

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

    <p>1000 kg. CO<sub>2</sub> emissions per year per capita for various countries (source: <a href="http://en.wikipedia.org/wiki/List_of_countries_by_carbon_dioxide_emissions_per_capita">Wikipedia</a>).</p>

    <p>Flot supports selections. You can enable
       rectangular selection
       or one-dimensional selection if the user should only be able to
       select on one axis. Try left-clicking and drag on the plot above
       where selection on the x axis is enabled.</p>

    <p>You selected: <span id="selection"></span></p>

    <p>The plot command returns a Plot object you can use to control
       the selection. Try clicking the buttons below.</p>

    <p><input id="clearSelection" type="button" value="Clear selection" />
       <input id="setSelection" type="button" value="Select year 1994" /></p>

    <p>Selections are really useful for zooming. Just replot the
       chart with min and max values for the axes set to the values
olau@iola.dk's avatar
Landed dual axis/hover event/finding nearby datapoints patch
7c9ff67b
 
olau@iola.dk committed
34 
       in the "plotselected" event triggered. Try enabling the checkbox
olau@iola.dk's avatar
Added first version
87390ae7
 
olau@iola.dk committed
35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 
       below and select a region again.</p>

    <p><input id="zoom" type="checkbox">Zoom to selection.</input></p>

<script id="source" language="javascript" type="text/javascript">
$(function () {
    var data = [
        {
            label: "United States",
            data: [[1990, 18.9], [1991, 18.7], [1992, 18.4], [1993, 19.3], [1994, 19.5], [1995, 19.3], [1996, 19.4], [1997, 20.2], [1998, 19.8], [1999, 19.9], [2000, 20.4], [2001, 20.1], [2002, 20.0], [2003, 19.8], [2004, 20.4]]
        },
        {
            label: "Russia", 
            data: [[1992, 13.4], [1993, 12.2], [1994, 10.6], [1995, 10.2], [1996, 10.1], [1997, 9.7], [1998, 9.5], [1999, 9.7], [2000, 9.9], [2001, 9.9], [2002, 9.9], [2003, 10.3], [2004, 10.5]]
        },
        {
            label: "United Kingdom",
            data: [[1990, 10.0], [1991, 11.3], [1992, 9.9], [1993, 9.6], [1994, 9.5], [1995, 9.5], [1996, 9.9], [1997, 9.3], [1998, 9.2], [1999, 9.2], [2000, 9.5], [2001, 9.6], [2002, 9.3], [2003, 9.4], [2004, 9.79]]
        },
        {
            label: "Germany",
            data: [[1990, 12.4], [1991, 11.2], [1992, 10.8], [1993, 10.5], [1994, 10.4], [1995, 10.2], [1996, 10.5], [1997, 10.2], [1998, 10.1], [1999, 9.6], [2000, 9.7], [2001, 10.0], [2002, 9.7], [2003, 9.8], [2004, 9.79]]
        },
        {
            label: "Denmark",
 	    data: [[1990, 9.7], [1991, 12.1], [1992, 10.3], [1993, 11.3], [1994, 11.7], [1995, 10.6], [1996, 12.8], [1997, 10.8], [1998, 10.3], [1999, 9.4], [2000, 8.7], [2001, 9.0], [2002, 8.9], [2003, 10.1], [2004, 9.80]]
        },
        {
            label: "Sweden",
            data: [[1990, 5.8], [1991, 6.0], [1992, 5.9], [1993, 5.5], [1994, 5.7], [1995, 5.3], [1996, 6.1], [1997, 5.4], [1998, 5.4], [1999, 5.1], [2000, 5.2], [2001, 5.4], [2002, 6.2], [2003, 5.9], [2004, 5.89]]
        },
        {
            label: "Norway",
            data: [[1990, 8.3], [1991, 8.3], [1992, 7.8], [1993, 8.3], [1994, 8.4], [1995, 5.9], [1996, 6.4], [1997, 6.7], [1998, 6.9], [1999, 7.6], [2000, 7.4], [2001, 8.1], [2002, 12.5], [2003, 9.9], [2004, 19.0]]
        }
    ];

    var options = {
olau@iola.dk's avatar
Implemented plugin system, introduced experimental hooks system (three hooks...
0d15280a
 
olau@iola.dk committed
73 74 75 76 
        series: {
            lines: { show: true },
            points: { show: true }
        },
olau@iola.dk's avatar
Added first version
87390ae7
 
olau@iola.dk committed
77 78 79 80 81 82 83 84 
        legend: { noColumns: 2 },
        xaxis: { tickDecimals: 0 },
        yaxis: { min: 0 },
        selection: { mode: "x" }
    };

    var placeholder = $("#placeholder");
olau@iola.dk's avatar
Landed dual axis/hover event/finding nearby datapoints patch
7c9ff67b
 
olau@iola.dk committed
85 86 
    placeholder.bind("plotselected", function (event, ranges) {
        $("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));
olau@iola.dk's avatar
Added first version
87390ae7
 
olau@iola.dk committed
87 88 89 90 91 

        var zoom = $("#zoom").attr("checked");
        if (zoom)
            plot = $.plot(placeholder, data,
                          $.extend(true, {}, options, {
olau@iola.dk's avatar
Landed dual axis/hover event/finding nearby datapoints patch
7c9ff67b
 
olau@iola.dk committed
92 
                              xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
olau@iola.dk's avatar
Added first version
87390ae7
 
olau@iola.dk committed
93 94 
                          }));
    });
olau@iola.dk's avatar
Added "plotunselected" event
da43cef6
 
olau@iola.dk committed
95 96 97 98 

    placeholder.bind("plotunselected", function (event) {
        $("#selection").text("");
    });
olau@iola.dk's avatar
Added first version
87390ae7
 
olau@iola.dk committed
99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 
    
    var plot = $.plot(placeholder, data, options);

    $("#clearSelection").click(function () {
        plot.clearSelection();
    });

    $("#setSelection").click(function () {
        plot.setSelection({ x1: 1994, x2: 1995 });
    });
});
</script>

 </body>
</html>