archive
/
moneyanalyser
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

Remove flot examples

pull/1/head
Chris Smith 13 年前
父节点
b3e1c9d1d5
当前提交
90d9695604
共有 32 个文件被更改，包括 0 次插入 和 1469 次删除
分列视图 显示文件统计
  1. 0
    143
      flot/examples/ajax.html
  2. 0
    75
      flot/examples/annotating.html
  3. 二进制
      flot/examples/arrow-down.gif
  4. 二进制
      flot/examples/arrow-left.gif
  5. 二进制
      flot/examples/arrow-right.gif
  6. 二进制
      flot/examples/arrow-up.gif
  7. 0
    38
      flot/examples/basic.html
  8. 0
    4
      flot/examples/data-eu-gdp-growth-1.json
  9. 0
    4
      flot/examples/data-eu-gdp-growth-2.json
  10. 0
    4
      flot/examples/data-eu-gdp-growth-3.json
  11. 0
    4
      flot/examples/data-eu-gdp-growth-4.json
  12. 0
    4
      flot/examples/data-eu-gdp-growth-5.json
  13. 0
    4
      flot/examples/data-eu-gdp-growth.json
  14. 0
    4
      flot/examples/data-japan-gdp-growth.json
  15. 0
    4
      flot/examples/data-usa-gdp-growth.json
  16. 0
    39
      flot/examples/dual-axis.html
  17. 0
    75
      flot/examples/graph-types.html
  18. 二进制
      flot/examples/hs-2004-27-a-large_web.jpg
  19. 0
    45
      flot/examples/image.html
  20. 0
    43
      flot/examples/index.html
  21. 0
    93
      flot/examples/interacting.html
  22. 0
    6
      flot/examples/layout.css
  23. 0
    118
      flot/examples/navigate.html
  24. 0
    114
      flot/examples/selection.html
  25. 0
    65
      flot/examples/setting-options.html
  26. 0
    77
      flot/examples/stacking.html
  27. 0
    54
      flot/examples/thresholding.html
  28. 0
    71
      flot/examples/time.html
  29. 0
    95
      flot/examples/tracking.html
  30. 0
    98
      flot/examples/turning-series.html
  31. 0
    90
      flot/examples/visitors.html
  32. 0
    98
      flot/examples/zooming.html

+ 0
- 143
flot/examples/ajax.html 查看文件 

@@ -1,143 +0,0 @@
1 
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
-<html>
3 
- <head>
4 
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
-    <title>Flot Examples</title>
6 
-    <link href="layout.css" rel="stylesheet" type="text/css"></link>
7 
-    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
8 
-    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
9 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
10 
- </head>
11 
-    <body>
12 
-    <h1>Flot Examples</h1>
13 
-
14 
-    <div id="placeholder" style="width:600px;height:300px;"></div>
15 
-
16 
-    <p>Example of loading data dynamically with AJAX. Percentage change in GDP (source: <a href="http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&plugin=1&language=en&pcode=tsieb020">Eurostat</a>). Click the buttons below.</p>
17 
-
18 
-    <p>The data is fetched over HTTP, in this case directly from text
19 
-    files. Usually the URL would point to some web server handler
20 
-    (e.g. a PHP page or Java/.NET/Python/Ruby on Rails handler) that
21 
-    extracts it from a database and serializes it to JSON.</p>
22 
-
23 
-    <p>
24 
-      <input class="fetchSeries" type="button" value="First dataset"> -
25 
-      <a href="data-eu-gdp-growth.json">data</a> -
26 
-      <span></span>
27 
-    </p>
28 
-
29 
-    <p>
30 
-      <input class="fetchSeries" type="button" value="Second dataset"> -
31 
-      <a href="data-japan-gdp-growth.json">data</a> -
32 
-      <span></span>
33 
-    </p>
34 
-
35 
-    <p>
36 
-      <input class="fetchSeries" type="button" value="Third dataset"> -
37 
-      <a href="data-usa-gdp-growth.json">data</a> -
38 
-      <span></span>
39 
-    </p>
40 
-
41 
-    <p>If you combine AJAX with setTimeout, you can poll the server
42 
-       for new data.</p>
43 
-
44 
-    <p>
45 
-      <input class="dataUpdate" type="button" value="Poll for data">
46 
-    </p>
47 
-
48 
-<script id="source" language="javascript" type="text/javascript">
49 
-$(function () {
50 
-    var options = {
51 
-        lines: { show: true },
52 
-        points: { show: true },
53 
-        xaxis: { tickDecimals: 0, tickSize: 1 }
54 
-    };
55 
-    var data = [];
56 
-    var placeholder = $("#placeholder");
57 
-
58 
-    $.plot(placeholder, data, options);
59 
-
60 
-
61 
-    // fetch one series, adding to what we got
62 
-    var alreadyFetched = {};
63 
-
64 
-    $("input.fetchSeries").click(function () {
65 
-        var button = $(this);
66 
-
67 
-        // find the URL in the link right next to us
68 
-        var dataurl = button.siblings('a').attr('href');
69 
-
70 
-        // then fetch the data with jQuery
71 
-        function onDataReceived(series) {
72 
-            // extract the first coordinate pair so you can see that
73 
-            // data is now an ordinary Javascript object
74 
-            var firstcoordinate = '(' + series.data[0][0] + ', ' + series.data[0][1] + ')';
75 
-
76 
-            button.siblings('span').text('Fetched ' + series.label + ', first point: ' + firstcoordinate);
77 
-
78 
-            // let's add it to our current data
79 
-            if (!alreadyFetched[series.label]) {
80 
-                alreadyFetched[series.label] = true;
81 
-                data.push(series);
82 
-            }
83 
-
84 
-            // and plot all we got
85 
-            $.plot(placeholder, data, options);
86 
-         }
87 
-
88 
-        $.ajax({
89 
-            url: dataurl,
90 
-            method: 'GET',
91 
-            dataType: 'json',
92 
-            success: onDataReceived
93 
-        });
94 
-    });
95 
-
96 
-
97 
-    // initiate a recurring data update
98 
-    $("input.dataUpdate").click(function () {
99 
-        // reset data
100 
-        data = [];
101 
-        alreadyFetched = {};
102 
-
103 
-        $.plot(placeholder, data, options);
104 
-
105 
-        var iteration = 0;
106 
-
107 
-        function fetchData() {
108 
-            ++iteration;
109 
-
110 
-            function onDataReceived(series) {
111 
-                // we get all the data in one go, if we only got partial
112 
-                // data, we could merge it with what we already got
113 
-                data = [ series ];
114 
-
115 
-                $.plot($("#placeholder"), data, options);
116 
-            }
117 
-
118 
-            $.ajax({
119 
-                // usually, we'll just call the same URL, a script
120 
-                // connected to a database, but in this case we only
121 
-                // have static example files so we need to modify the
122 
-                // URL
123 
-                url: "data-eu-gdp-growth-" + iteration + ".json",
124 
-                method: 'GET',
125 
-                dataType: 'json',
126 
-                success: onDataReceived
127 
-            });
128 
-
129 
-            if (iteration < 5)
130 
-                setTimeout(fetchData, 1000);
131 
-            else {
132 
-                data = [];
133 
-                alreadyFetched = {};
134 
-            }
135 
-        }
136 
-
137 
-        setTimeout(fetchData, 1000);
138 
-    });
139 
-});
140 
-</script>
141 
-
142 
- </body>
143 
-</html>

+ 0
- 75
flot/examples/annotating.html 查看文件 

@@ -1,75 +0,0 @@
1 
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
-<html>
3 
- <head>
4 
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
-    <title>Flot Examples</title>
6 
-    <link href="layout.css" rel="stylesheet" type="text/css"></link>
7 
-    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
8 
-    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
9 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
10 
- </head>
11 
-    <body>
12 
-    <h1>Flot Examples</h1>
13 
-
14 
-    <div id="placeholder" style="width:600px;height:300px;"></div>
15 
-
16 
-    <p>Flot has support for simple background decorations such as
17 
-    lines and rectangles. They can be useful for marking up certain
18 
-    areas. You can easily add any HTML you need with standard DOM
19 
-    manipulation, e.g. for labels. For drawing custom shapes there is
20 
-    also direct access to the canvas.</p>
21 
-
22 
-<script id="source" language="javascript" type="text/javascript">
23 
-$(function () {
24 
-    // generate a dataset
25 
-    var d1 = [];
26 
-    for (var i = 0; i < 20; ++i)
27 
-        d1.push([i, Math.sin(i)]);
28 
-
29 
-    var data = [{ data: d1, label: "Pressure", color: "#333" }];
30 
-
31 
-    // setup background areas
32 
-    var markings = [
33 
-        { color: '#f6f6f6', yaxis: { from: 1 } },
34 
-        { color: '#f6f6f6', yaxis: { to: -1 } },
35 
-        { color: '#000', lineWidth: 1, xaxis: { from: 2, to: 2 } },
36 
-        { color: '#000', lineWidth: 1, xaxis: { from: 8, to: 8 } }
37 
-    ];
38 
-
39 
-    var placeholder = $("#placeholder");
40 
-
41 
-    // plot it
42 
-    var plot = $.plot(placeholder, data, {
43 
-        bars: { show: true, barWidth: 0.5, fill: 0.9 },
44 
-        xaxis: { ticks: [], autoscaleMargin: 0.02 },
45 
-        yaxis: { min: -2, max: 2 },
46 
-        grid: { markings: markings }
47 
-    });
48 
-
49 
-    // add labels
50 
-    var o;
51 
-
52 
-    o = plot.pointOffset({ x: 2, y: -1.2});
53 
-    // we just append it to the placeholder which Flot already uses
54 
-    // for positioning
55 
-    placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">Warming up</div>');
56 
-
57 
-    o = plot.pointOffset({ x: 8, y: -1.2});
58 
-    placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">Actual measurements</div>');
59 
-
60 
-    // draw a little arrow on top of the last label to demonstrate
61 
-    // canvas drawing
62 
-    var ctx = plot.getCanvas().getContext("2d");
63 
-    ctx.beginPath();
64 
-    o.left += 4;
65 
-    ctx.moveTo(o.left, o.top);
66 
-    ctx.lineTo(o.left, o.top - 10);
67 
-    ctx.lineTo(o.left + 10, o.top - 5);
68 
-    ctx.lineTo(o.left, o.top);
69 
-    ctx.fillStyle = "#000";
70 
-    ctx.fill();
71 
-});
72 
-</script>
73 
-
74 
- </body>
75 
-</html>

二进制
flot/examples/arrow-down.gif 查看文件


二进制
flot/examples/arrow-left.gif 查看文件


二进制
flot/examples/arrow-right.gif 查看文件


二进制
flot/examples/arrow-up.gif 查看文件


+ 0
- 38
flot/examples/basic.html 查看文件 

@@ -1,38 +0,0 @@
1 
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
-<html>
3 
- <head>
4 
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
-    <title>Flot Examples</title>
6 
-    <link href="layout.css" rel="stylesheet" type="text/css"></link>
7 
-    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
8 
-    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
9 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
10 
- </head>
11 
-    <body>
12 
-    <h1>Flot Examples</h1>
13 
-
14 
-    <div id="placeholder" style="width:600px;height:300px;"></div>
15 
-
16 
-    <p>Simple example. You don't need to specify much to get an
17 
-       attractive look. Put in a placeholder, make sure you set its
18 
-       dimensions (otherwise the plot library will barf) and call the
19 
-       plot function with the data. The axes are automatically
20 
-       scaled.</p>
21 
-
22 
-<script id="source" language="javascript" type="text/javascript">
23 
-$(function () {
24 
-    var d1 = [];
25 
-    for (var i = 0; i < 14; i += 0.5)
26 
-        d1.push([i, Math.sin(i)]);
27 
-
28 
-    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
29 
-
30 
-    // a null signifies separate line segments
31 
-    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
32 
-
33 
-    $.plot($("#placeholder"), [ d1, d2, d3 ]);
34 
-});
35 
-</script>
36 
-
37 
- </body>
38 
-</html>

+ 0
- 4
flot/examples/data-eu-gdp-growth-1.json 查看文件 

@@ -1,4 +0,0 @@
1 
-{
2 
-    label: 'Europe (EU27)',
3 
-    data: [[1999, 3.0], [2000, 3.9]]
4 
-}

+ 0
- 4
flot/examples/data-eu-gdp-growth-2.json 查看文件 

@@ -1,4 +0,0 @@
1 
-{
2 
-    label: 'Europe (EU27)',
3 
-    data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2]]
4 
-}

+ 0
- 4
flot/examples/data-eu-gdp-growth-3.json 查看文件 

@@ -1,4 +0,0 @@
1 
-{
2 
-    label: 'Europe (EU27)',
3 
-    data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5]]
4 
-}

+ 0
- 4
flot/examples/data-eu-gdp-growth-4.json 查看文件 

@@ -1,4 +0,0 @@
1 
-{
2 
-    label: 'Europe (EU27)',
3 
-    data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1]]
4 
-}

+ 0
- 4
flot/examples/data-eu-gdp-growth-5.json 查看文件 

@@ -1,4 +0,0 @@
1 
-{
2 
-    label: 'Europe (EU27)',
3 
-    data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]]
4 
-}

+ 0
- 4
flot/examples/data-eu-gdp-growth.json 查看文件 

@@ -1,4 +0,0 @@
1 
-{
2 
-    label: 'Europe (EU27)',
3 
-    data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]]
4 
-}

+ 0
- 4
flot/examples/data-japan-gdp-growth.json 查看文件 

@@ -1,4 +0,0 @@
1 
-{
2 
-    label: 'Japan',
3 
-    data: [[1999, -0.1], [2000, 2.9], [2001, 0.2], [2002, 0.3], [2003, 1.4], [2004, 2.7], [2005, 1.9], [2006, 2.0], [2007, 2.3], [2008, -0.7]]
4 
-}

+ 0
- 4
flot/examples/data-usa-gdp-growth.json 查看文件 

@@ -1,4 +0,0 @@
1 
-{
2 
-    label: 'USA',
3 
-    data: [[1999, 4.4], [2000, 3.7], [2001, 0.8], [2002, 1.6], [2003, 2.5], [2004, 3.6], [2005, 2.9], [2006, 2.8], [2007, 2.0], [2008, 1.1]]
4 
-}

+ 0
- 39
flot/examples/dual-axis.html
文件差异内容过多而无法显示
查看文件


+ 0
- 75
flot/examples/graph-types.html 查看文件 

@@ -1,75 +0,0 @@
1 
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
-<html>
3 
- <head>
4 
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
-    <title>Flot Examples</title>
6 
-    <link href="layout.css" rel="stylesheet" type="text/css"></link>
7 
-    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
8 
-    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
9 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
10 
- </head>
11 
-    <body>
12 
-    <h1>Flot Examples</h1>
13 
-
14 
-    <div id="placeholder" style="width:600px;height:300px"></div>
15 
-
16 
-    <p>Flot supports lines, points, filled areas, bars and any
17 
-    combinations of these, in the same plot and even on the same data
18 
-    series.</p>
19 
-
20 
-<script id="source" language="javascript" type="text/javascript">
21 
-$(function () {
22 
-    var d1 = [];
23 
-    for (var i = 0; i < 14; i += 0.5)
24 
-        d1.push([i, Math.sin(i)]);
25 
-
26 
-    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
27 
-
28 
-    var d3 = [];
29 
-    for (var i = 0; i < 14; i += 0.5)
30 
-        d3.push([i, Math.cos(i)]);
31 
-
32 
-    var d4 = [];
33 
-    for (var i = 0; i < 14; i += 0.1)
34 
-        d4.push([i, Math.sqrt(i * 10)]);
35 
-
36 
-    var d5 = [];
37 
-    for (var i = 0; i < 14; i += 0.5)
38 
-        d5.push([i, Math.sqrt(i)]);
39 
-
40 
-    var d6 = [];
41 
-    for (var i = 0; i < 14; i += 0.5 + Math.random())
42 
-        d6.push([i, Math.sqrt(2*i + Math.sin(i) + 5)]);
43 
-
44 
-    $.plot($("#placeholder"), [
45 
-        {
46 
-            data: d1,
47 
-            lines: { show: true, fill: true }
48 
-        },
49 
-        {
50 
-            data: d2,
51 
-            bars: { show: true }
52 
-        },
53 
-        {
54 
-            data: d3,
55 
-            points: { show: true }
56 
-        },
57 
-        {
58 
-            data: d4,
59 
-            lines: { show: true }
60 
-        },
61 
-        {
62 
-            data: d5,
63 
-            lines: { show: true },
64 
-            points: { show: true }
65 
-        },
66 
-        {
67 
-            data: d6,
68 
-            lines: { show: true, steps: true }
69 
-        }
70 
-    ]);
71 
-});
72 
-</script>
73 
-
74 
- </body>
75 
-</html>

二进制
flot/examples/hs-2004-27-a-large_web.jpg 查看文件


+ 0
- 45
flot/examples/image.html 查看文件 

@@ -1,45 +0,0 @@
1 
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
-<html>
3 
- <head>
4 
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
-    <title>Flot Examples</title>
6 
-    <link href="layout.css" rel="stylesheet" type="text/css"></link>
7 
-    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
8 
-    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
9 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
10 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.image.js"></script>
11 
- </head>
12 
- <body>
13 
-    <h1>Flot Examples</h1>
14 
-
15 
-    <div id="placeholder" style="width:400px;height:400px;"></div>
16 
-
17 
-    <p>The Cat's Eye Nebula (<a href="http://hubblesite.org/gallery/album/nebula/pr2004027a/">picture from Hubble</a>).</p>
18 
-
19 
-    <p>With the image plugin, you can plot images. This is for example
20 
-    useful for getting ticks on complex prerendered visualizations.
21 
-    Instead of inputting data points, you put in the images and where
22 
-    their two opposite corners are supposed to be in plot space.</p>
23 
-
24 
-    <p>Images represent a little further complication because you need
25 
-    to make sure they are loaded before you can use them (Flot skips
26 
-    incomplete images). The plugin comes with a couple of helpers
27 
-    for doing that.</p>
28 
-
29 
-<script id="source" language="javascript" type="text/javascript">
30 
-$(function () {
31 
-    var data = [ [ ["hs-2004-27-a-large_web.jpg", -10, -10, 10, 10] ] ];
32 
-    var options = {
33 
-            series: { images: { show: true } },
34 
-            xaxis: { min: -8, max: 4 },
35 
-            yaxis: { min: -8, max: 4 }
36 
-    };
37 
-
38 
-    $.plot.image.loadDataImages(data, options, function () {
39 
-        $.plot($("#placeholder"), data, options);
40 
-    });
41 
-});
42 
-</script>
43 
-
44 
- </body>
45 
-</html>

+ 0
- 43
flot/examples/index.html 查看文件 

@@ -1,43 +0,0 @@
1 
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
-<html>
3 
- <head>
4 
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
-    <title>Flot Examples</title>
6 
-    <link href="layout.css" rel="stylesheet" type="text/css"></link>
7 
-    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
8 
-    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
9 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
10 
- </head>
11 
- <body>
12 
-    <h1>Flot Examples</h1>
13 
-
14 
-    <p>Here are some examples for <a href="http://code.google.com/p/flot/">Flot</a>, the Javascript charting library for jQuery:</p>
15 
-
16 
-    <ul>
17 
-      <li><a href="basic.html">Basic example</a></li>
18 
-      <li><a href="graph-types.html">Different graph types</a></li>
19 
-      <li><a href="setting-options.html">Setting various options</a> and <a href="annotating.html">annotating a chart</a></li>
20 
-      <li><a href="ajax.html">Updating graphs with AJAX</a></li>
21 
-    </ul>
22 
-
23 
-    <p>Being interactive:</p>
24 
-
25 
-    <ul>
26 
-      <li><a href="turning-series.html">Turning series on/off</a></li>
27 
-      <li><a href="selection.html">Rectangular selection support and zooming</a> and <a href="zooming.html">zooming with overview</a></li> (both with selection plugin)
28 
-      <li><a href="interacting.html">Interacting with the data points</a></li>
29 
-      <li><a href="navigate.html">Panning and zooming</a> (with navigation plugin)</li>
30 
-    </ul>
31 
-
32 
-    <p>Some more esoteric features:</p>
33 
-
34 
-    <ul>
35 
-      <li><a href="time.html">Plotting time series</a> and <a href="visitors.html">visitors per day with zooming and weekends</a> (with selection plugin)</li>
36 
-      <li><a href="dual-axis.html">Dual axis support</a></li>
37 
-      <li><a href="thresholding.html">Thresholding the data</a> (with threshold plugin)</li>
38 
-      <li><a href="stacking.html">Stacked charts</a> (with stacking plugin)</li>
39 
-      <li><a href="tracking.html">Tracking curves with crosshair</a> (with crosshair plugin)</li>
40 
-      <li><a href="image.html">Plotting prerendered images</a> (with image plugin)</li>
41 
-    </ul>
42 
- </body>
43 
-</html>

+ 0
- 93
flot/examples/interacting.html 查看文件 

@@ -1,93 +0,0 @@
1 
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
-<html>
3 
- <head>
4 
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
-    <title>Flot Examples</title>
6 
-    <link href="layout.css" rel="stylesheet" type="text/css"></link>
7 
-    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
8 
-    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
9 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
10 
- </head>
11 
-    <body>
12 
-    <h1>Flot Examples</h1>
13 
-
14 
-    <div id="placeholder" style="width:600px;height:300px"></div>
15 
-
16 
-    <p>One of the goals of Flot is to support user interactions. Try
17 
-    pointing and clicking on the points.</p>
18 
-
19 
-    <p id="hoverdata">Mouse hovers at
20 
-    (<span id="x">0</span>, <span id="y">0</span>). <span id="clickdata"></span></p>
21 
-
22 
-    <p>A tooltip is easy to build with a bit of jQuery code and the
23 
-    data returned from the plot.</p>
24 
-
25 
-    <p><input id="enableTooltip" type="checkbox">Enable tooltip</p>
26 
-
27 
-<script id="source" language="javascript" type="text/javascript">
28 
-$(function () {
29 
-    var sin = [], cos = [];
30 
-    for (var i = 0; i < 14; i += 0.5) {
31 
-        sin.push([i, Math.sin(i)]);
32 
-        cos.push([i, Math.cos(i)]);
33 
-    }
34 
-
35 
-    var plot = $.plot($("#placeholder"),
36 
-           [ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ], {
37 
-               series: {
38 
-                   lines: { show: true },
39 
-                   points: { show: true }
40 
-               },
41 
-               grid: { hoverable: true, clickable: true },
42 
-               yaxis: { min: -1.2, max: 1.2 }
43 
-             });
44 
-
45 
-    function showTooltip(x, y, contents) {
46 
-        $('<div id="tooltip">' + contents + '</div>').css( {
47 
-            position: 'absolute',
48 
-            display: 'none',
49 
-            top: y + 5,
50 
-            left: x + 5,
51 
-            border: '1px solid #fdd',
52 
-            padding: '2px',
53 
-            'background-color': '#fee',
54 
-            opacity: 0.80
55 
-        }).appendTo("body").fadeIn(200);
56 
-    }
57 
-
58 
-    var previousPoint = null;
59 
-    $("#placeholder").bind("plothover", function (event, pos, item) {
60 
-        $("#x").text(pos.x.toFixed(2));
61 
-        $("#y").text(pos.y.toFixed(2));
62 
-
63 
-        if ($("#enableTooltip:checked").length > 0) {
64 
-            if (item) {
65 
-                if (previousPoint != item.datapoint) {
66 
-                    previousPoint = item.datapoint;
67 
-
68 
-                    $("#tooltip").remove();
69 
-                    var x = item.datapoint[0].toFixed(2),
70 
-                        y = item.datapoint[1].toFixed(2);
71 
-
72 
-                    showTooltip(item.pageX, item.pageY,
73 
-                                item.series.label + " of " + x + " = " + y);
74 
-                }
75 
-            }
76 
-            else {
77 
-                $("#tooltip").remove();
78 
-                previousPoint = null;
79 
-            }
80 
-        }
81 
-    });
82 
-
83 
-    $("#placeholder").bind("plotclick", function (event, pos, item) {
84 
-        if (item) {
85 
-            $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
86 
-            plot.highlight(item.series, item.datapoint);
87 
-        }
88 
-    });
89 
-});
90 
-</script>
91 
-
92 
- </body>
93 
-</html>

+ 0
- 6
flot/examples/layout.css 查看文件 

@@ -1,6 +0,0 @@
1 
-body {
2 
-  font-family: sans-serif;
3 
-  font-size: 16px;
4 
-  margin: 50px;
5 
-  max-width: 800px;
6 
-}

+ 0
- 118
flot/examples/navigate.html 查看文件 

@@ -1,118 +0,0 @@
1 
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
-<html>
3 
- <head>
4 
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
-    <title>Flot Examples</title>
6 
-    <link href="layout.css" rel="stylesheet" type="text/css"></link>
7 
-    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
8 
-    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
9 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
10 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.navigate.js"></script>
11 
-    <style>
12 
-    #placeholder .button {
13 
-        position: absolute;
14 
-        cursor: pointer;
15 
-    }
16 
-    #placeholder div.button {
17 
-        font-size: smaller;
18 
-        color: #999;
19 
-        background-color: #eee;
20 
-        padding: 2px;
21 
-    }
22 
-    .message {
23 
-        padding-left: 50px;
24 
-        font-size: smaller;
25 
-    }
26 
-    </style>
27 
- </head>
28 
- <body>
29 
-    <h1>Flot Examples</h1>
30 
-
31 
-    <div id="placeholder" style="width:600px;height:300px;"></div>
32 
-
33 
-    <p class="message"></p>
34 
-
35 
-    <p>With the navigate plugin it is easy to add panning and zooming.
36 
-    Drag to pan, double click to zoom (or use the mouse scrollwheel).</p>
37 
-
38 
-    <p>The plugin fires events (useful for synchronizing several
39 
-    plots) and adds a couple of public methods so you can easily build
40 
-    a little user interface around it, like the little buttons at the
41 
-    top right in the plot.</p>
42 
-
43 
-
44 
-<script id="source" language="javascript" type="text/javascript">
45 
-$(function () {
46 
-    // generate data set from a parametric function with a fractal
47 
-    // look
48 
-    function sumf(f, t, m) {
49 
-        var res = 0;
50 
-        for (var i = 1; i < m; ++i)
51 
-            res += f(i * i * t) / (i * i);
52 
-        return res;
53 
-    }
54 
-
55 
-    var d1 = [];
56 
-    for (var t = 0; t <= 2 * Math.PI; t += 0.01)
57 
-        d1.push([sumf(Math.cos, t, 10), sumf(Math.sin, t, 10)]);
58 
-    var data = [ d1 ];
59 
-
60 
-
61 
-    var placeholder = $("#placeholder");
62 
-    var options = {
63 
-        series: { lines: { show: true }, shadowSize: 0 },
64 
-        xaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] },
65 
-        yaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] },
66 
-        zoom: {
67 
-            interactive: true
68 
-        },
69 
-        pan: {
70 
-            interactive: true
71 
-        }
72 
-    };
73 
-
74 
-    var plot = $.plot(placeholder, data, options);
75 
-
76 
-    // show pan/zoom messages to illustrate events
77 
-    placeholder.bind('plotpan', function (event, plot) {
78 
-        var axes = plot.getAxes();
79 
-        $(".message").html("Panning to x: "  + axes.xaxis.min.toFixed(2)
80 
-                           + " &ndash; " + axes.xaxis.max.toFixed(2)
81 
-                           + " and y: " + axes.yaxis.min.toFixed(2)
82 
-                           + " &ndash; " + axes.yaxis.max.toFixed(2));
83 
-    });
84 
-
85 
-    placeholder.bind('plotzoom', function (event, plot) {
86 
-        var axes = plot.getAxes();
87 
-        $(".message").html("Zooming to x: "  + axes.xaxis.min.toFixed(2)
88 
-                           + " &ndash; " + axes.xaxis.max.toFixed(2)
89 
-                           + " and y: " + axes.yaxis.min.toFixed(2)
90 
-                           + " &ndash; " + axes.yaxis.max.toFixed(2));
91 
-    });
92 
-
93 
-    // add zoom out button
94 
-    $('<div class="button" style="right:20px;top:20px">zoom out</div>').appendTo(placeholder).click(function (e) {
95 
-        e.preventDefault();
96 
-        plot.zoomOut();
97 
-    });
98 
-
99 
-    // and add panning buttons
100 
-
101 
-    // little helper for taking the repetitive work out of placing
102 
-    // panning arrows
103 
-    function addArrow(dir, right, top, offset) {
104 
-        $('<img class="button" src="arrow-' + dir + '.gif" style="right:' + right + 'px;top:' + top + 'px">').appendTo(placeholder).click(function (e) {
105 
-            e.preventDefault();
106 
-            plot.pan(offset);
107 
-        });
108 
-    }
109 
-
110 
-    addArrow('left', 55, 60, { left: -100 });
111 
-    addArrow('right', 25, 60, { left: 100 });
112 
-    addArrow('up', 40, 45, { top: -100 });
113 
-    addArrow('down', 40, 75, { top: 100 });
114 
-});
115 
-</script>
116 
-
117 
- </body>
118 
-</html>

+ 0
- 114
flot/examples/selection.html 查看文件 

@@ -1,114 +0,0 @@
1 
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
-<html>
3 
- <head>
4 
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
-    <title>Flot Examples</title>
6 
-    <link href="layout.css" rel="stylesheet" type="text/css"></link>
7 
-    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
8 
-    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
9 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
10 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.selection.js"></script>
11 
- </head>
12 
-    <body>
13 
-    <h1>Flot Examples</h1>
14 
-
15 
-    <div id="placeholder" style="width:600px;height:300px"></div>
16 
-
17 
-    <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>
18 
-
19 
-    <p>Flot supports selections through the selection plugin.
20 
-       You can enable rectangular selection
21 
-       or one-dimensional selection if the user should only be able to
22 
-       select on one axis. Try left-click and drag on the plot above
23 
-       where selection on the x axis is enabled.</p>
24 
-
25 
-    <p>You selected: <span id="selection"></span></p>
26 
-
27 
-    <p>The plot command returns a plot object you can use to control
28 
-       the selection. Click the buttons below.</p>
29 
-
30 
-    <p><input id="clearSelection" type="button" value="Clear selection" />
31 
-       <input id="setSelection" type="button" value="Select year 1994" /></p>
32 
-
33 
-    <p>Selections are really useful for zooming. Just replot the
34 
-       chart with min and max values for the axes set to the values
35 
-       in the "plotselected" event triggered. Enable the checkbox
36 
-       below and select a region again.</p>
37 
-
38 
-    <p><input id="zoom" type="checkbox">Zoom to selection.</input></p>
39 
-
40 
-<script id="source" language="javascript" type="text/javascript">
41 
-$(function () {
42 
-    var data = [
43 
-        {
44 
-            label: "United States",
45 
-            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]]
46 
-        },
47 
-        {
48 
-            label: "Russia",
49 
-            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]]
50 
-        },
51 
-        {
52 
-            label: "United Kingdom",
53 
-            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]]
54 
-        },
55 
-        {
56 
-            label: "Germany",
57 
-            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]]
58 
-        },
59 
-        {
60 
-            label: "Denmark",
61 
- 	    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]]
62 
-        },
63 
-        {
64 
-            label: "Sweden",
65 
-            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]]
66 
-        },
67 
-        {
68 
-            label: "Norway",
69 
-            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]]
70 
-        }
71 
-    ];
72 
-
73 
-    var options = {
74 
-        series: {
75 
-            lines: { show: true },
76 
-            points: { show: true }
77 
-        },
78 
-        legend: { noColumns: 2 },
79 
-        xaxis: { tickDecimals: 0 },
80 
-        yaxis: { min: 0 },
81 
-        selection: { mode: "x" }
82 
-    };
83 
-
84 
-    var placeholder = $("#placeholder");
85 
-
86 
-    placeholder.bind("plotselected", function (event, ranges) {
87 
-        $("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));
88 
-
89 
-        var zoom = $("#zoom").attr("checked");
90 
-        if (zoom)
91 
-            plot = $.plot(placeholder, data,
92 
-                          $.extend(true, {}, options, {
93 
-                              xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
94 
-                          }));
95 
-    });
96 
-
97 
-    placeholder.bind("plotunselected", function (event) {
98 
-        $("#selection").text("");
99 
-    });
100 
-
101 
-    var plot = $.plot(placeholder, data, options);
102 
-
103 
-    $("#clearSelection").click(function () {
104 
-        plot.clearSelection();
105 
-    });
106 
-
107 
-    $("#setSelection").click(function () {
108 
-        plot.setSelection({ x1: 1994, x2: 1995 });
109 
-    });
110 
-});
111 
-</script>
112 
-
113 
- </body>
114 
-</html>

+ 0
- 65
flot/examples/setting-options.html 查看文件 

@@ -1,65 +0,0 @@
1 
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
-<html>
3 
- <head>
4 
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
-    <title>Flot Examples</title>
6 
-    <link href="layout.css" rel="stylesheet" type="text/css"></link>
7 
-    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
8 
-    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
9 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
10 
- </head>
11 
-    <body>
12 
-    <h1>Flot Examples</h1>
13 
-
14 
-    <div id="placeholder" style="width:600px;height:300px"></div>
15 
-
16 
-    <p>There are plenty of options you can set to control the precise
17 
-    looks of your plot. You can control the axes, the legend, the
18 
-    default graph type, the look of grid, etc.</p>
19 
-
20 
-    <p>The idea is that Flot goes to great lengths to provide <b>sensible
21 
-    defaults</b> which you can then customize as needed for your
22 
-    particular application. If you've found a use case where the
23 
-    defaults can be improved, please don't hesitate to give your
24 
-    feedback.</p>
25 
-
26 
-<script id="source" language="javascript" type="text/javascript">
27 
-$(function () {
28 
-    var d1 = [];
29 
-    for (var i = 0; i < Math.PI * 2; i += 0.25)
30 
-        d1.push([i, Math.sin(i)]);
31 
-
32 
-    var d2 = [];
33 
-    for (var i = 0; i < Math.PI * 2; i += 0.25)
34 
-        d2.push([i, Math.cos(i)]);
35 
-
36 
-    var d3 = [];
37 
-    for (var i = 0; i < Math.PI * 2; i += 0.1)
38 
-        d3.push([i, Math.tan(i)]);
39 
-
40 
-    $.plot($("#placeholder"), [
41 
-        { label: "sin(x)",  data: d1},
42 
-        { label: "cos(x)",  data: d2},
43 
-        { label: "tan(x)",  data: d3}
44 
-    ], {
45 
-        series: {
46 
-            lines: { show: true },
47 
-            points: { show: true }
48 
-        },
49 
-        xaxis: {
50 
-            ticks: [0, [Math.PI/2, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3/2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]]
51 
-        },
52 
-        yaxis: {
53 
-            ticks: 10,
54 
-            min: -2,
55 
-            max: 2
56 
-        },
57 
-        grid: {
58 
-            backgroundColor: { colors: ["#fff", "#eee"] }
59 
-        }
60 
-    });
61 
-});
62 
-</script>
63 
-
64 
- </body>
65 
-</html>

+ 0
- 77
flot/examples/stacking.html 查看文件 

@@ -1,77 +0,0 @@
1 
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
-<html>
3 
- <head>
4 
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
-    <title>Flot Examples</title>
6 
-    <link href="layout.css" rel="stylesheet" type="text/css"></link>
7 
-    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
8 
-    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
9 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
10 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.stack.js"></script>
11 
- </head>
12 
-    <body>
13 
-    <h1>Flot Examples</h1>
14 
-
15 
-    <div id="placeholder" style="width:600px;height:300px;"></div>
16 
-
17 
-    <p>With the stack plugin, you can have Flot stack the
18 
-    series. This is useful if you wish to display both a total and the
19 
-    constituents it is made of. The only requirement is that you provide
20 
-    the input sorted on x.</p>
21 
-
22 
-    <p class="stackControls">
23 
-    <input type="button" value="With stacking">
24 
-    <input type="button" value="Without stacking">
25 
-    </p>
26 
-
27 
-    <p class="graphControls">
28 
-    <input type="button" value="Bars">
29 
-    <input type="button" value="Lines">
30 
-    <input type="button" value="Lines with steps">
31 
-    </p>
32 
-
33 
-<script id="source">
34 
-$(function () {
35 
-    var d1 = [];
36 
-    for (var i = 0; i <= 10; i += 1)
37 
-        d1.push([i, parseInt(Math.random() * 30)]);
38 
-
39 
-    var d2 = [];
40 
-    for (var i = 0; i <= 10; i += 1)
41 
-        d2.push([i, parseInt(Math.random() * 30)]);
42 
-
43 
-    var d3 = [];
44 
-    for (var i = 0; i <= 10; i += 1)
45 
-        d3.push([i, parseInt(Math.random() * 30)]);
46 
-
47 
-    var stack = 0, bars = true, lines = false, steps = false;
48 
-
49 
-    function plotWithOptions() {
50 
-        $.plot($("#placeholder"), [ d1, d2, d3 ], {
51 
-            series: {
52 
-                stack: stack,
53 
-                lines: { show: lines, steps: steps },
54 
-                bars: { show: bars, barWidth: 0.6 }
55 
-            }
56 
-        });
57 
-    }
58 
-
59 
-    plotWithOptions();
60 
-
61 
-    $(".stackControls input").click(function (e) {
62 
-        e.preventDefault();
63 
-        stack = $(this).val() == "With stacking" ? true : null;
64 
-        plotWithOptions();
65 
-    });
66 
-    $(".graphControls input").click(function (e) {
67 
-        e.preventDefault();
68 
-        bars = $(this).val().indexOf("Bars") != -1;
69 
-        lines = $(this).val().indexOf("Lines") != -1;
70 
-        steps = $(this).val().indexOf("steps") != -1;
71 
-        plotWithOptions();
72 
-    });
73 
-});
74 
-</script>
75 
-
76 
- </body>
77 
-</html>

+ 0
- 54
flot/examples/thresholding.html 查看文件 

@@ -1,54 +0,0 @@
1 
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
-<html>
3 
- <head>
4 
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
-    <title>Flot Examples</title>
6 
-    <link href="layout.css" rel="stylesheet" type="text/css"></link>
7 
-    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
8 
-    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
9 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
10 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.threshold.js"></script>
11 
- </head>
12 
-    <body>
13 
-    <h1>Flot Examples</h1>
14 
-
15 
-    <div id="placeholder" style="width:600px;height:300px;"></div>
16 
-
17 
-    <p>With the threshold plugin, you can apply a specific color to
18 
-    the part of a data series below a threshold. This is can be useful
19 
-    for highlighting negative values, e.g. when displaying net results
20 
-    or what's in stock.</p>
21 
-
22 
-    <p class="controls">
23 
-    <input type="button" value="Threshold at 5">
24 
-    <input type="button" value="Threshold at 0">
25 
-    <input type="button" value="Threshold at -2.5">
26 
-    </p>
27 
-
28 
-<script id="source" language="javascript" type="text/javascript">
29 
-$(function () {
30 
-    var d1 = [];
31 
-    for (var i = 0; i <= 60; i += 1)
32 
-        d1.push([i, parseInt(Math.random() * 30 - 10)]);
33 
-
34 
-    function plotWithOptions(t) {
35 
-        $.plot($("#placeholder"), [ {
36 
-            data: d1,
37 
-            color: "rgb(30, 180, 20)",
38 
-            threshold: { below: t, color: "rgb(200, 20, 30)" },
39 
-            lines: { steps: true }
40 
-        } ]);
41 
-    }
42 
-
43 
-    plotWithOptions(0);
44 
-
45 
-    $(".controls input").click(function (e) {
46 
-        e.preventDefault();
47 
-        var t = parseFloat($(this).val().replace('Threshold at ', ''));
48 
-        plotWithOptions(t);
49 
-    });
50 
-});
51 
-</script>
52 
-
53 
- </body>
54 
-</html>

+ 0
- 71
flot/examples/time.html
文件差异内容过多而无法显示
查看文件


+ 0
- 95
flot/examples/tracking.html 查看文件 

@@ -1,95 +0,0 @@
1 
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
-<html>
3 
- <head>
4 
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
-    <title>Flot Examples</title>
6 
-    <link href="layout.css" rel="stylesheet" type="text/css"></link>
7 
-    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
8 
-    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
9 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
10 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.crosshair.js"></script>
11 
- </head>
12 
-    <body>
13 
-    <h1>Flot Examples</h1>
14 
-
15 
-    <div id="placeholder" style="width:600px;height:300px"></div>
16 
-
17 
-    <p>You can add crosshairs that'll track the mouse position, either
18 
-    on both axes or as here on only one.</p>
19 
-
20 
-    <p>If you combine it with listening on hover events, you can use
21 
-    it to track the intersection on the curves by interpolating
22 
-    the data points (look at the legend).</p>
23 
-
24 
-    <p id="hoverdata"></p>
25 
-
26 
-<script id="source" language="javascript" type="text/javascript">
27 
-var plot;
28 
-$(function () {
29 
-    var sin = [], cos = [];
30 
-    for (var i = 0; i < 14; i += 0.1) {
31 
-        sin.push([i, Math.sin(i)]);
32 
-        cos.push([i, Math.cos(i)]);
33 
-    }
34 
-
35 
-    plot = $.plot($("#placeholder"),
36 
-                      [ { data: sin, label: "sin(x) = -0.00"},
37 
-                        { data: cos, label: "cos(x) = -0.00" } ], {
38 
-                            series: {
39 
-                                lines: { show: true }
40 
-                            },
41 
-                            crosshair: { mode: "x" },
42 
-                            grid: { hoverable: true, autoHighlight: false },
43 
-                            yaxis: { min: -1.2, max: 1.2 }
44 
-                        });
45 
-    var legends = $("#placeholder .legendLabel");
46 
-    legends.each(function () {
47 
-        // fix the widths so they don't jump around
48 
-        $(this).css('width', $(this).width());
49 
-    });
50 
-
51 
-    var updateLegendTimeout = null;
52 
-    var latestPosition = null;
53 
-
54 
-    function updateLegend() {
55 
-        updateLegendTimeout = null;
56 
-
57 
-        var pos = latestPosition;
58 
-
59 
-        var axes = plot.getAxes();
60 
-        if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
61 
-            pos.y < axes.yaxis.min || pos.y > axes.yaxis.max)
62 
-            return;
63 
-
64 
-        var i, j, dataset = plot.getData();
65 
-        for (i = 0; i < dataset.length; ++i) {
66 
-            var series = dataset[i];
67 
-
68 
-            // find the nearest points, x-wise
69 
-            for (j = 0; j < series.data.length; ++j)
70 
-                if (series.data[j][0] > pos.x)
71 
-                    break;
72 
-
73 
-            // now interpolate
74 
-            var y, p1 = series.data[j - 1], p2 = series.data[j];
75 
-            if (p1 == null)
76 
-                y = p2[1];
77 
-            else if (p2 == null)
78 
-                y = p1[1];
79 
-            else
80 
-                y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
81 
-
82 
-            legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
83 
-        }
84 
-    }
85 
-
86 
-    $("#placeholder").bind("plothover",  function (event, pos, item) {
87 
-        latestPosition = pos;
88 
-        if (!updateLegendTimeout)
89 
-            updateLegendTimeout = setTimeout(updateLegend, 50);
90 
-    });
91 
-});
92 
-</script>
93 
-
94 
- </body>
95 
-</html>

+ 0
- 98
flot/examples/turning-series.html 查看文件 

@@ -1,98 +0,0 @@
1 
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
-<html>
3 
- <head>
4 
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
-    <title>Flot Examples</title>
6 
-    <link href="layout.css" rel="stylesheet" type="text/css"></link>
7 
-    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
8 
-    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
9 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
10 
- </head>
11 
-    <body>
12 
-    <h1>Flot Examples</h1>
13 
-
14 
-    <div id="placeholder" style="width:600px;height:300px;"></div>
15 
-
16 
-    <p>Here is an example with real data: military budgets for
17 
-        various countries in constant (2005) million US dollars (source: <a href="http://www.sipri.org/">SIPRI</a>).</p>
18 
-
19 
-    <p>Since all data is available client-side, it's pretty easy to
20 
-       make the plot interactive. Try turning countries on/off with the
21 
-       checkboxes below.</p>
22 
-
23 
-    <p id="choices">Show:</p>
24 
-
25 
-<script id="source" language="javascript" type="text/javascript">
26 
-$(function () {
27 
-    var datasets = {
28 
-        "usa": {
29 
-            label: "USA",
30 
-            data: [[1988, 483994], [1989, 479060], [1990, 457648], [1991, 401949], [1992, 424705], [1993, 402375], [1994, 377867], [1995, 357382], [1996, 337946], [1997, 336185], [1998, 328611], [1999, 329421], [2000, 342172], [2001, 344932], [2002, 387303], [2003, 440813], [2004, 480451], [2005, 504638], [2006, 528692]]
31 
-        },
32 
-        "russia": {
33 
-            label: "Russia",
34 
-            data: [[1988, 218000], [1989, 203000], [1990, 171000], [1992, 42500], [1993, 37600], [1994, 36600], [1995, 21700], [1996, 19200], [1997, 21300], [1998, 13600], [1999, 14000], [2000, 19100], [2001, 21300], [2002, 23600], [2003, 25100], [2004, 26100], [2005, 31100], [2006, 34700]]
35 
-        },
36 
-        "uk": {
37 
-            label: "UK",
38 
-            data: [[1988, 62982], [1989, 62027], [1990, 60696], [1991, 62348], [1992, 58560], [1993, 56393], [1994, 54579], [1995, 50818], [1996, 50554], [1997, 48276], [1998, 47691], [1999, 47529], [2000, 47778], [2001, 48760], [2002, 50949], [2003, 57452], [2004, 60234], [2005, 60076], [2006, 59213]]
39 
-        },
40 
-        "germany": {
41 
-            label: "Germany",
42 
-            data: [[1988, 55627], [1989, 55475], [1990, 58464], [1991, 55134], [1992, 52436], [1993, 47139], [1994, 43962], [1995, 43238], [1996, 42395], [1997, 40854], [1998, 40993], [1999, 41822], [2000, 41147], [2001, 40474], [2002, 40604], [2003, 40044], [2004, 38816], [2005, 38060], [2006, 36984]]
43 
-        },
44 
-        "denmark": {
45 
-            label: "Denmark",
46 
-            data: [[1988, 3813], [1989, 3719], [1990, 3722], [1991, 3789], [1992, 3720], [1993, 3730], [1994, 3636], [1995, 3598], [1996, 3610], [1997, 3655], [1998, 3695], [1999, 3673], [2000, 3553], [2001, 3774], [2002, 3728], [2003, 3618], [2004, 3638], [2005, 3467], [2006, 3770]]
47 
-        },
48 
-        "sweden": {
49 
-            label: "Sweden",
50 
-            data: [[1988, 6402], [1989, 6474], [1990, 6605], [1991, 6209], [1992, 6035], [1993, 6020], [1994, 6000], [1995, 6018], [1996, 3958], [1997, 5780], [1998, 5954], [1999, 6178], [2000, 6411], [2001, 5993], [2002, 5833], [2003, 5791], [2004, 5450], [2005, 5521], [2006, 5271]]
51 
-        },
52 
-        "norway": {
53 
-            label: "Norway",
54 
-            data: [[1988, 4382], [1989, 4498], [1990, 4535], [1991, 4398], [1992, 4766], [1993, 4441], [1994, 4670], [1995, 4217], [1996, 4275], [1997, 4203], [1998, 4482], [1999, 4506], [2000, 4358], [2001, 4385], [2002, 5269], [2003, 5066], [2004, 5194], [2005, 4887], [2006, 4891]]
55 
-        }
56 
-    };
57 
-
58 
-    // hard-code color indices to prevent them from shifting as
59 
-    // countries are turned on/off
60 
-    var i = 0;
61 
-    $.each(datasets, function(key, val) {
62 
-        val.color = i;
63 
-        ++i;
64 
-    });
65 
-
66 
-    // insert checkboxes
67 
-    var choiceContainer = $("#choices");
68 
-    $.each(datasets, function(key, val) {
69 
-        choiceContainer.append('<br/><input type="checkbox" name="' + key +
70 
-                               '" checked="checked" id="id' + key + '">' +
71 
-                               '<label for="id' + key + '">'
72 
-                                + val.label + '</label>');
73 
-    });
74 
-    choiceContainer.find("input").click(plotAccordingToChoices);
75 
-
76 
-
77 
-    function plotAccordingToChoices() {
78 
-        var data = [];
79 
-
80 
-        choiceContainer.find("input:checked").each(function () {
81 
-            var key = $(this).attr("name");
82 
-            if (key && datasets[key])
83 
-                data.push(datasets[key]);
84 
-        });
85 
-
86 
-        if (data.length > 0)
87 
-            $.plot($("#placeholder"), data, {
88 
-                yaxis: { min: 0 },
89 
-                xaxis: { tickDecimals: 0 }
90 
-            });
91 
-    }
92 
-
93 
-    plotAccordingToChoices();
94 
-});
95 
-</script>
96 
-
97 
- </body>
98 
-</html>

+ 0
- 90
flot/examples/visitors.html 查看文件 

@@ -1,90 +0,0 @@
1 
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
-<html>
3 
- <head>
4 
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
-    <title>Flot Examples</title>
6 
-    <link href="layout.css" rel="stylesheet" type="text/css"></link>
7 
-    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
8 
-    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
9 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
10 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.selection.js"></script>
11 
- </head>
12 
-    <body>
13 
-    <h1>Flot Examples</h1>
14 
-
15 
-    <div id="placeholder" style="width:600px;height:300px;"></div>
16 
-
17 
-    <p>Visitors per day to the Flot homepage. Weekends are colored. Try zooming.
18 
-      The plot below shows an overview.</p>
19 
-
20 
-    <div id="overview" style="margin-left:50px;margin-top:20px;width:400px;height:50px"></div>
21 
-
22 
-<script id="source">
23 
-$(function () {
24 
-    var d = [[1196463600000, 0], [1196550000000, 0], [1196636400000, 0], [1196722800000, 77], [1196809200000, 3636], [1196895600000, 3575], [1196982000000, 2736], [1197068400000, 1086], [1197154800000, 676], [1197241200000, 1205], [1197327600000, 906], [1197414000000, 710], [1197500400000, 639], [1197586800000, 540], [1197673200000, 435], [1197759600000, 301], [1197846000000, 575], [1197932400000, 481], [1198018800000, 591], [1198105200000, 608], [1198191600000, 459], [1198278000000, 234], [1198364400000, 1352], [1198450800000, 686], [1198537200000, 279], [1198623600000, 449], [1198710000000, 468], [1198796400000, 392], [1198882800000, 282], [1198969200000, 208], [1199055600000, 229], [1199142000000, 177], [1199228400000, 374], [1199314800000, 436], [1199401200000, 404], [1199487600000, 253], [1199574000000, 218], [1199660400000, 476], [1199746800000, 462], [1199833200000, 448], [1199919600000, 442], [1200006000000, 403], [1200092400000, 204], [1200178800000, 194], [1200265200000, 327], [1200351600000, 374], [1200438000000, 507], [1200524400000, 546], [1200610800000, 482], [1200697200000, 283], [1200783600000, 221], [1200870000000, 483], [1200956400000, 523], [1201042800000, 528], [1201129200000, 483], [1201215600000, 452], [1201302000000, 270], [1201388400000, 222], [1201474800000, 439], [1201561200000, 559], [1201647600000, 521], [1201734000000, 477], [1201820400000, 442], [1201906800000, 252], [1201993200000, 236], [1202079600000, 525], [1202166000000, 477], [1202252400000, 386], [1202338800000, 409], [1202425200000, 408], [1202511600000, 237], [1202598000000, 193], [1202684400000, 357], [1202770800000, 414], [1202857200000, 393], [1202943600000, 353], [1203030000000, 364], [1203116400000, 215], [1203202800000, 214], [1203289200000, 356], [1203375600000, 399], [1203462000000, 334], [1203548400000, 348], [1203634800000, 243], [1203721200000, 126], [1203807600000, 157], [1203894000000, 288]];
25 
-
26 
-    // first correct the timestamps - they are recorded as the daily
27 
-    // midnights in UTC+0100, but Flot always displays dates in UTC
28 
-    // so we have to add one hour to hit the midnights in the plot
29 
-    for (var i = 0; i < d.length; ++i)
30 
-      d[i][0] += 60 * 60 * 1000;
31 
-
32 
-    // helper for returning the weekends in a period
33 
-    function weekendAreas(axes) {
34 
-        var markings = [];
35 
-        var d = new Date(axes.xaxis.min);
36 
-        // go to the first Saturday
37 
-        d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))
38 
-        d.setUTCSeconds(0);
39 
-        d.setUTCMinutes(0);
40 
-        d.setUTCHours(0);
41 
-        var i = d.getTime();
42 
-        do {
43 
-            // when we don't set yaxis, the rectangle automatically
44 
-            // extends to infinity upwards and downwards
45 
-            markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
46 
-            i += 7 * 24 * 60 * 60 * 1000;
47 
-        } while (i < axes.xaxis.max);
48 
-
49 
-        return markings;
50 
-    }
51 
-
52 
-    var options = {
53 
-        xaxis: { mode: "time" },
54 
-        selection: { mode: "x" },
55 
-        grid: { markings: weekendAreas }
56 
-    };
57 
-
58 
-    var plot = $.plot($("#placeholder"), [d], options);
59 
-
60 
-    var overview = $.plot($("#overview"), [d], {
61 
-        series: {
62 
-            lines: { show: true, lineWidth: 1 },
63 
-            shadowSize: 0
64 
-        },
65 
-        xaxis: { ticks: [], mode: "time" },
66 
-        yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
67 
-        selection: { mode: "x" }
68 
-    });
69 
-
70 
-    // now connect the two
71 
-
72 
-    $("#placeholder").bind("plotselected", function (event, ranges) {
73 
-        // do the zooming
74 
-        plot = $.plot($("#placeholder"), [d],
75 
-                      $.extend(true, {}, options, {
76 
-                          xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
77 
-                      }));
78 
-
79 
-        // don't fire event on the overview to prevent eternal loop
80 
-        overview.setSelection(ranges, true);
81 
-    });
82 
-
83 
-    $("#overview").bind("plotselected", function (event, ranges) {
84 
-        plot.setSelection(ranges);
85 
-    });
86 
-});
87 
-</script>
88 
-
89 
- </body>
90 
-</html>

+ 0
- 98
flot/examples/zooming.html 查看文件 

@@ -1,98 +0,0 @@
1 
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
-<html>
3 
- <head>
4 
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
-    <title>Flot Examples</title>
6 
-    <link href="layout.css" rel="stylesheet" type="text/css"></link>
7 
-    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
8 
-    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
9 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
10 
-    <script language="javascript" type="text/javascript" src="../jquery.flot.selection.js"></script>
11 
- </head>
12 
-    <body>
13 
-    <h1>Flot Examples</h1>
14 
-
15 
-    <div style="float:left">
16 
-      <div id="placeholder" style="width:500px;height:300px"></div>
17 
-    </div>
18 
-
19 
-    <div id="miniature" style="float:left;margin-left:20px;margin-top:50px">
20 
-      <div id="overview" style="width:166px;height:100px"></div>
21 
-
22 
-      <p id="overviewLegend" style="margin-left:10px"></p>
23 
-    </div>
24 
-
25 
-    <p style="clear:left"> The selection support makes
26 
-      pretty advanced zooming schemes possible. With a few lines of code,
27 
-      the small overview plot to the right has been connected to the large
28 
-      plot. Try selecting a rectangle on either of them.</p>
29 
-
30 
-<script id="source">
31 
-$(function () {
32 
-    // setup plot
33 
-    function getData(x1, x2) {
34 
-        var d = [];
35 
-        for (var i = 0; i <= 100; ++i) {
36 
-            var x = x1 + i * (x2 - x1) / 100;
37 
-            d.push([x, Math.sin(x * Math.sin(x))]);
38 
-        }
39 
-
40 
-        return [
41 
-            { label: "sin(x sin(x))", data: d }
42 
-        ];
43 
-    }
44 
-
45 
-    var options = {
46 
-        legend: { show: false },
47 
-        series: {
48 
-            lines: { show: true },
49 
-            points: { show: true }
50 
-        },
51 
-        yaxis: { ticks: 10 },
52 
-        selection: { mode: "xy" }
53 
-    };
54 
-
55 
-    var startData = getData(0, 3 * Math.PI);
56 
-
57 
-    var plot = $.plot($("#placeholder"), startData, options);
58 
-
59 
-    // setup overview
60 
-    var overview = $.plot($("#overview"), startData, {
61 
-        legend: { show: true, container: $("#overviewLegend") },
62 
-        series: {
63 
-            lines: { show: true, lineWidth: 1 },
64 
-            shadowSize: 0
65 
-        },
66 
-        xaxis: { ticks: 4 },
67 
-        yaxis: { ticks: 3, min: -2, max: 2 },
68 
-        grid: { color: "#999" },
69 
-        selection: { mode: "xy" }
70 
-    });
71 
-
72 
-    // now connect the two
73 
-
74 
-    $("#placeholder").bind("plotselected", function (event, ranges) {
75 
-        // clamp the zooming to prevent eternal zoom
76 
-        if (ranges.xaxis.to - ranges.xaxis.from < 0.00001)
77 
-            ranges.xaxis.to = ranges.xaxis.from + 0.00001;
78 
-        if (ranges.yaxis.to - ranges.yaxis.from < 0.00001)
79 
-            ranges.yaxis.to = ranges.yaxis.from + 0.00001;
80 
-
81 
-        // do the zooming
82 
-        plot = $.plot($("#placeholder"), getData(ranges.xaxis.from, ranges.xaxis.to),
83 
-                      $.extend(true, {}, options, {
84 
-                          xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
85 
-                          yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
86 
-                      }));
87 
-
88 
-        // don't fire event on the overview to prevent eternal loop
89 
-        overview.setSelection(ranges, true);
90 
-    });
91 
-    $("#overview").bind("plotselected", function (event, ranges) {
92 
-        plot.setSelection(ranges);
93 
-    });
94 
-});
95 
-</script>
96 
-
97 
- </body>
98 
-</html>

撰写 预览
正在加载...
取消
保存