root / hci / trunk / eneraptor-web-app / web-app / js / flot / examples / ajax.html @ 11
History | View | Annotate | Download (4.6 KB)
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>
|