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