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
|
<!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">
<!--[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>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></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>
<input class="fetchSeries" type="button" value="First dataset"> -
<a href="data-eu-gdp-growth.json">data</a> -
<span></span>
</p>
<p>
<input class="fetchSeries" type="button" value="Second dataset"> -
<a href="data-japan-gdp-growth.json">data</a> -
<span></span>
</p>
<p>
<input class="fetchSeries" type="button" value="Third dataset"> -
<a href="data-usa-gdp-growth.json">data</a> -
<span></span>
</p>
<p>If you combine AJAX with setTimeout, you can poll the server
for new data.</p>
<p>
<input class="dataUpdate" type="button" value="Poll for data">
</p>
<script type="text/javascript">
$(function () {
var options = {
lines: { show: true },
points: { show: true },
xaxis: { tickDecimals: 0, tickSize: 1 }
};
var data = [];
var placeholder = $("#placeholder");
$.plot(placeholder, data, options);
// fetch one series, adding to what we got
var alreadyFetched = {};
$("input.fetchSeries").click(function () {
var button = $(this);
// find the URL in the link right next to us
var dataurl = button.siblings('a').attr('href');
// then fetch the data with jQuery
function onDataReceived(series) {
// extract the first coordinate pair so you can see that
// data is now an ordinary Javascript object
var firstcoordinate = '(' + series.data[0][0] + ', ' + series.data[0][1] + ')';
button.siblings('span').text('Fetched ' + series.label + ', first point: ' + firstcoordinate);
// let's add it to our current data
if (!alreadyFetched[series.label]) {
alreadyFetched[series.label] = true;
data.push(series);
}
// and plot all we got
$.plot(placeholder, data, options);
}
$.ajax({
url: dataurl,
method: 'GET',
dataType: 'json',
success: onDataReceived
});
});
// initiate a recurring data update
$("input.dataUpdate").click(function () {
// reset data
data = [];
alreadyFetched = {};
$.plot(placeholder, data, options);
var iteration = 0;
function fetchData() {
++iteration;
function onDataReceived(series) {
// we get all the data in one go, if we only got partial
// data, we could merge it with what we already got
data = [ series ];
$.plot($("#placeholder"), data, options);
}
$.ajax({
// usually, we'll just 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
url: "data-eu-gdp-growth-" + iteration + ".json",
method: 'GET',
dataType: 'json',
success: onDataReceived
});
if (iteration < 5)
setTimeout(fetchData, 1000);
else {
data = [];
alreadyFetched = {};
}
}
setTimeout(fetchData, 1000);
});
});
</script>
</body>
</html>
|
