Skip to content

F
flot
Switch branch/tag
Find file
Normal viewHistoryPermalink
index.html 4.23 KB
Newer Older
David Schnur's avatar
Re-styled and cleaned up all the examples.
ed791745
 
David Schnur committed
1 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
olau@iola.dk's avatar
Added AJAX example
c98d5145
 
olau@iola.dk committed
2 
<html>
David Schnur's avatar
Re-styled and cleaned up all the examples.
ed791745
 
David Schnur committed
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 
<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
David Schnur's avatar
Additional code & comments cleanup.
61a13d10
 
David Schnur committed
41 
			var dataurl = button.siblings("a").attr("href");
David Schnur's avatar
Re-styled and cleaned up all the examples.
ed791745
 
David Schnur committed
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 

			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);
		});
David Schnur's avatar
Add the Flot version to each example's footer.
a2718dbe
 
David Schnur committed
114
David Schnur's avatar
Load the first AJAX series by default.
bcce4a48
 
David Schnur committed
115 116 117 118 
		// Load the first series by default, so we don't have an empty plot

		$("button.fetchSeries:first").click();
David Schnur's avatar
Add the Flot version to each example's footer.
a2718dbe
 
David Schnur committed
119 120 121 
		// Add the Flot version string to the footer

		$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
David Schnur's avatar
Re-styled and cleaned up all the examples.
ed791745
 
David Schnur committed
122 123 124 125 126 127 128 129 130 131 132 133 134 
	});

	</script>
</head>
<body>

	<div id="header">
		<h2>AJAX</h2>
	</div>

	<div id="content">

		<div class="demo-container">
David Schnur's avatar
Move placeholder styles into .demo-placeholder.
23005fdd
 
David Schnur committed
135 
			<div id="placeholder" class="demo-placeholder"></div>
David Schnur's avatar
Re-styled and cleaned up all the examples.
ed791745
 
David Schnur committed
136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 
		</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 &copy; 2007 - 2013 IOLA and Ole Laursen
	</div>

</body>
olau@iola.dk's avatar
Added AJAX example
c98d5145
 
olau@iola.dk committed
173 
</html>