summaryrefslogtreecommitdiff
path: root/examples/ajax.html
diff options
context:
space:
mode:
authorIgor Sfiligoi <isfiligoi@ucsd.edu>2009-10-23 09:07:01 -0400
committerIgor Sfiligoi <isfiligoi@ucsd.edu>2009-10-23 09:07:01 -0400
commitaf26aaa53d073a7b2d25caee93e1cb5ceb2e099c (patch)
treebcb8d15baea1f07375d1dedea414b1b95d58caa6 /examples/ajax.html
parentbf64e197b39d3f10b6145612802a6f169248cb45 (diff)
flot-0.6
Diffstat (limited to 'examples/ajax.html')
-rw-r--r--examples/ajax.html143
1 files changed, 143 insertions, 0 deletions
diff --git a/examples/ajax.html b/examples/ajax.html
new file mode 100644
index 0000000..385a834
--- /dev/null
+++ b/examples/ajax.html
@@ -0,0 +1,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"></link>
+ <!--[if IE]><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 id="source" language="javascript" 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>