1
2
3
4
5
6
7
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
34
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
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: AJAX</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<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">
$(function() {
var options = {
lines: {
show: true
},
points: {
show: true
},
xaxis: {
tickDecimals: 0,
tickSize: 1
}
};
var data = [];
$.plot("#placeholder", data, options);
// Fetch one series, adding to what we already have
var alreadyFetched = {};
$("button.fetchSeries").click(function () {
var button = $(this);
// Find the URL in the link right next to us, then fetch the data
var dataurl = button.siblings("a").attr("href");
function onDataReceived(series) {
// Extract the first coordinate pair; jQuery has parsed it, so
// the data is now just an ordinary JavaScript object
var firstcoordinate = "(" + series.data[0][0] + ", " + series.data[0][1] + ")";
button.siblings("span").text("Fetched " + series.label + ", first point: " + firstcoordinate);
// Push the new data onto our existing data array
if (!alreadyFetched[series.label]) {
alreadyFetched[series.label] = true;
data.push(series);
}
$.plot("#placeholder", data, options);
}
$.ajax({
url: dataurl,
type: "GET",
dataType: "json",
success: onDataReceived
});
});
// Initiate a recurring data update
$("button.dataUpdate").click(function () {
data = [];
alreadyFetched = {};
$.plot("#placeholder", data, options);
var iteration = 0;
function fetchData() {
++iteration;
function onDataReceived(series) {
// Load all the data in one pass; if we only got partial
// data we could merge it with what we already have.
data = [ series ];
$.plot("#placeholder", data, options);
}
// Normally we call the same URL - a script connected to a
// database - but in this case we only have static example
// files, so we need to modify the URL.
$.ajax({
url: "data-eu-gdp-growth-" + iteration + ".json",
type: "GET",
dataType: "json",
success: onDataReceived
});
if (iteration < 5) {
setTimeout(fetchData, 1000);
} else {
data = [];
alreadyFetched = {};
}
}
setTimeout(fetchData, 1000);
});
// Load the first series by default, so we don't have an empty plot
$("button.fetchSeries:first").click();
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " – ");
});
</script>
</head>
<body>
<div id="header">
<h2>AJAX</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div>
<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>
<p>The data is fetched over HTTP, in this case directly from text files. Usually the URL would point to some web server handler (e.g. a PHP page or Java/.NET/Python/Ruby on Rails handler) that extracts it from a database and serializes it to JSON.</p>
<p>
<button class="fetchSeries">First dataset</button>
[ <a href="data-eu-gdp-growth.json">see data</a> ]
<span></span>
</p>
<p>
<button class="fetchSeries">Second dataset</button>
[ <a href="data-japan-gdp-growth.json">see data</a> ]
<span></span>
</p>
<p>
<button class="fetchSeries">Third dataset</button>
[ <a href="data-usa-gdp-growth.json">see data</a> ]
<span></span>
</p>
<p>If you combine AJAX with setTimeout, you can poll the server for new data.</p>
<p>
<button class="dataUpdate">Poll for data</button>
</p>
</div>
<div id="footer">
Copyright © 2007 - 2014 IOLA and Ole Laursen
</div>
</body>
</html>
|
