diff options
Diffstat (limited to 'examples/ajax/index.html')
| -rw-r--r-- | examples/ajax/index.html | 173 |
1 files changed, 173 insertions, 0 deletions
diff --git a/examples/ajax/index.html b/examples/ajax/index.html new file mode 100644 index 0000000..35ce10d --- /dev/null +++ b/examples/ajax/index.html @@ -0,0 +1,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 - 2013 IOLA and Ole Laursen + </div> + +</body> +</html> |