Added AJAX example
git-svn-id: https://flot.googlecode.com/svn/trunk@174 1e0a6537-2640-0410-bfb7-f154510ff394pull/1/head
olau@iola.dk
17 years ago
parent
c5c5348e88
commit
c98d5145fe
@ -0,0 +1,85 @@
|
||||
<!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 type="button" value="First dataset"> -
|
||||
<a href="data-eu-gdp-growth.json">data</a> -
|
||||
<span></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<input type="button" value="Second dataset"> -
|
||||
<a href="data-japan-gdp-growth.json">data</a> -
|
||||
<span></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<input type="button" value="Third dataset"> -
|
||||
<a href="data-usa-gdp-growth.json">data</a> -
|
||||
<span></span>
|
||||
</p>
|
||||
|
||||
<script id="source" language="javascript" type="text/javascript">
|
||||
$(function () {
|
||||
var options = { lines: { show: true }, points: { show: true } };
|
||||
var data = [];
|
||||
|
||||
$.plot($("#placeholder"), data, options);
|
||||
|
||||
var alreadyFetched = {};
|
||||
|
||||
$("input[type=button]").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
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
label: 'Europe (EU27)',
|
||||
data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]]
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
label: 'Japan',
|
||||
data: [[1999, -0.1], [2000, 2.9], [2001, 0.2], [2002, 0.3], [2003, 1.4], [2004, 2.7], [2005, 1.9], [2006, 2.0], [2007, 2.3], [2008, -0.7]]
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
label: 'USA',
|
||||
data: [[1999, 4.4], [2000, 3.7], [2001, 0.8], [2002, 1.6], [2003, 2.5], [2004, 3.6], [2005, 2.9], [2006, 2.8], [2007, 2.0], [2008, 1.1]]
|
||||
}
|
||||
Loading…
Reference in New Issue